ExtJSのアコーディンへの参照方法は？

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は、デフォルトでは唯一のパネルは、任意の時点で展開することができるように拡張可能なアコーディオンスタイルで複数のパネルを管理したレイアウトです。

あなただけのカスタムxtype:'accordion'を作成した場合meはxtype:'accordion'が含まれている場合、あなたはこのme.down('accordion').query('grid')のように取得することができますあなたのaccordian

からグリッドをターゲットにしたいと。

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