如何在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() 
});