如何在ExtJS中引用accordin？

Question

我正在使用里面有10个网格的手风琴。所以基本上我想访问每一个手风琴的网格，但不知道如何在ExtJS中完成这个。

例子：如果我想针对一个网格我可以这样做：

Ext.ComponentQuery.query('grid'); 

但是，如果使用上面的代码，将针对所有从UI网格的，我不希望那。我只想瞄准我的手风琴家的网格。

layout: { 
      type: 'accordion', 
      animate: false, 
      fill: false, 
      hideCollapseTool: false, 
      collapseFirst: false, 
      titleCollapse: false, 
      multi: true, 
      overflowHandler: 'scroller' 
     } 

任何想法如何做到这一点？先谢谢你！

Answer 1

第一件事accordion不是xtype。

Accordion是管理多个面板中的可扩展手风琴式的，使得在默认情况下只有一个面板可以在任何给定的时间进行扩展的布局。

当你只想从你的accordian

针对网格，如果您已经创建自定义xtype:'accordion'那么你就可以得到这样me.down('accordion').query('grid')如果me包含xtype:'accordion'。

如果您已经定义了reference，那么您可以使用控制器或lookupReference使用视图获得像这样的lookupReference。

在这里，我创建了一个小的sencha fiddle演示。希望这会帮助你。

//create grid 
Ext.define('DemoGrid', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'demogrid', 
    store: { 
     fields: ['name', 'email', 'phone'], 
     data: [{ 
      name: 'Lisa', 
      email: 'lisa@simpsons.com', 
      phone: '555-111-1224' 
     }, { 
      name: 'Bart', 
      email: 'bart@simpsons.com', 
      phone: '555-222-1234' 
     }, { 
      name: 'Homer', 
      email: 'homer@simpsons.com', 
      phone: '555-222-1244' 
     }, { 
      name: 'Marge', 
      email: 'marge@simpsons.com', 
      phone: '555-222-1254' 
     }] 
    }, 
    columns: [{ 
     text: 'Name', 
     dataIndex: 'name' 
    }, { 
     text: 'Email', 
     dataIndex: 'email', 
     flex: 1 
    }, { 
     text: 'Phone', 
     dataIndex: 'phone' 
    }], 
    flex: 1 
}); 

//controller 
Ext.define('DemoCnt', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.demo', 

    onButtonClick: function (button) { 
     var accordion = this.lookupReference('demoAccordion'); //if your Accordion Layout is inside of panel/coantainer then you can use like this {this.lookupReference(your refrence name)}. 

     this.doGetAllGrid(accordion); 

     /* var panel = button.up('panel'); 
     panel.down('[reference=demoAccordion]'); 

     panel.down('panel') also we get like this 

     panel.down('panel[reference=demoAccordion]') also we get like this 
     */ 

    }, 

    doGetAllGrid: function (accordion) { 
     var data = []; 
     //{accordion.query('grid')} return all grid as Accordion contain 
     Ext.Array.forEach(accordion.query('grid'), function (item) { 
      data.push('<b>' + item.title + '</b>'); 
     }); 
     Ext.Msg.alert('Success', 'Your all grid title is below :-<br>' + data.join('<br>')); 
    } 

}); 

//Accordion Layout panel 
Ext.create('Ext.panel.Panel', { 
    title: 'Accordion Layout', 
    width: '100%', 
    controller: 'demo', 
    height: 700, 
    items: [{ 
     xtype: 'panel', 
     reference: 'demoAccordion', 
     layout: { 
      // layout-specific configs go here 
      type: 'accordion', 
      animate: false, 
      fill: false, 
      hideCollapseTool: false, 
      collapseFirst: false, 
      titleCollapse: false, 
      // multi: true, 
      overflowHandler: 'scroller' 
     }, 
     defaults: { 
      xtype: 'demogrid' 
     }, 
     items: [{ 
      title: 'Grid 1' 
     }, { 
      title: 'Grid 2' 
     }, { 
      title: 'Grid 3' 
     }, { 
      title: 'Grid 4' 
     }, { 
      title: 'Grid 5' 
     }, { 
      title: 'Grid 6' 
     }, { 
      title: 'Grid 7' 
     }, { 
      title: 'Grid 8' 
     }, { 
      title: 'Grid 9' 
     }, { 
      title: 'Grid 10' 
     }], 
    }, { 
     xtype: 'demogrid', 
     margin:'10 0', 
     title: 'Grid 11 will not inside of Accordion Layout ' 
    }], 
    buttons: [{ 
     text: 'Get All Grid', 
     height: 50, 
     padding: '0 35', 
     style: 'background: transparent;border: 2px solid #737373cc;', 
     handler: function() { 
      var panel = this.up('panel'); 
      panel.getController().doGetAllGrid(panel.down('[reference=demoAccordion]')); //Just call only common method of controller to get all grid. 
     } 
    }, { 
     text: 'Get All using controller method with a reference', 
     height: 50, 
     padding: '0 35', 
     style: 'background: transparent;border: 2px solid #737373cc;', 
     handler: 'onButtonClick' 
    }], 
    renderTo: Ext.getBody() 
});