如何在ExtJS中引用手风琴? [英] How to have reference to an accordin in ExtJS?

问题描述

我正在使用其中有10个网格的手风琴.因此，基本上我想访问Accordian中的每个网格，但不确定如何在ExtJS中完成此操作.

I'm working with an accordion that has 10 grids inside of it. So basically I would like to access each grid in the accordian but not really sure how to accomplish that in ExtJS.

示例:如果我要定位网格，则可以执行以下操作:

Example: If I want to target a grid I can do this:

Ext.ComponentQuery.query('grid');

但是，如果我使用上面的代码，它将以UI中的所有网格为目标，而我不希望那样.我只想以我的手风琴演奏者为目标.

But if I use the above code it will target all of the grids from the UI and I don't want that. I ONLY want to target the grids from my accordian.

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

任何想法该怎么做?预先谢谢你！

Any ideas how to do that? Thank you in advance!

推荐答案

第一件事accordion不是xtype.

手风琴是一个布局以可扩展的手风琴样式管理多个面板，因此默认情况下，在任何给定时间只能扩展一个面板.

Accordion is a layout that manages multiple Panels in an expandable accordion style such that by default only one Panel can be expanded at any given time.

由于您只想从accordian

如果创建了自定义xtype:'accordion'，则如果me包含xtype:'accordion'，则可以得到这样的me.down('accordion').query('grid').

if you have created your custom xtype:'accordion' then you can get like this me.down('accordion').query('grid') if me contain xtype:'accordion'.

如果您已定义引用，则您可以像这样使用控制器或使用视图的lookupReference .

If you have define reference then you can get like this lookupReference using controller or lookupReference using view.

在这里，我创建了一个小的 sencha小提琴演示.希望对您有帮助.

Here I have created an small sencha fiddle demo. Hope this will help you.

//create grid
Ext.define('DemoGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'demogrid',
    store: {
        fields: ['name', 'email', 'phone'],
        data: [{
            name: 'Lisa',
            email: '[e-mail]',
            phone: '555-111-1224'
        }, {
            name: 'Bart',
            email: '[e-mail]',
            phone: '555-222-1234'
        }, {
            name: 'Homer',
            email: '[e-mail]',
            phone: '555-222-1244'
        }, {
            name: 'Marge',
            email: '[e-mail]',
            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()
});

这篇关于如何在ExtJS中引用手风琴?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！