如何在ExtJS中引用一个accordin?

时间:2017-11-03 23:14:42

标签: javascript extjs

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

示例:如果我想定位网格,我可以这样做:

Ext.ComponentQuery.query('grid');

但是,如果我使用上面的代码,它将针对UI中的所有网格,我不想这样做。我只想从我的手风琴中定位网格。

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

任何想法如何做到这一点?提前谢谢!

1 个答案:

答案 0 :(得分:0)

  

第一件事accordion不是xtype

Accordion是一种以可扩展的手风琴风格管理多个Panel的布局,默认情况下,在任何给定时间只能扩展一个Panel。

  

因为您只想从accordian

中定位网格

如果您已创建自定义xtype:'accordion',那么me.down('accordion').query('grid')如果me包含xtype:'accordion',则可以这样//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() });

如果您已定义reference,那么您可以使用控制器或lookupReference使用视图来获得此lookupReference

我在这里创建了一个小型sencha fiddle演示。希望这会对你有所帮助。

function f  = hist2dw(x,y,weights,xedges,yedges)
%all inputs should be vectors
[~,xbin] = histc(x,xedges);
[~,ybin] = histc(y,yedges);

xbin(xbin==0) = inf;
ybin(ybin==0) = inf;
xnbin = numel(xedges);
ynbin = numel(yedges);

xy = xbin * ynbin + ybin;

[xyu,id] = unique(xy);
xyu(end) = []; % remove Inf bin
id(end) = [];
hstres = histc(xy,xyu);
hstres = hstres.*weights(id); % add the weights to the histogram
f(ynbin,xnbin)=0; % preallocate memory
f(xyu-ynbin) = hstres;