如何在Ext JS BorderLayout区域中的两个组件之间切换

Question

我在这里创建了2个区域(西部和中部)的网格面板视口,现在我想要的是我想动态更改"xtype"的中心

目前"xtype"是'examplegrid'当我点击"西部"区域的列时,我想将其更改为"eontable"......

这是代码:对于extjs

(

function output()
 {

    Ext.ns('supplierlist');
    Ext.BLANK_IMAGE_URL = '/extjs/ext/resources/images/default/s.gif';

    /********************************Code For Suppliers*****************************/

}
//end function var_dump
supplierlist.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        var config = {
            store: new Ext.data.JsonStore({
                id: 'supplier',
                totalProperty: 'totalcount',
                root: 'rows',
                url: 'get_suppliers_list.php',
                fields: [{
                    name: 'supplier'
                }]
            }),
            columns: [{
                id: 'supplier',
                header: 'Suppliers List',
                width: 40,
                sortable: true,
                dataIndex: 'supplier'

            }],
            viewConfig: {
                forceFit: true
            }
        }
        this.addListener('click',
        function(val) {


            });
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        supplierlist.Grid.superclass.initComponent.apply(this, arguments);

    }

    ,
    onRender: function() {
        // call parent
        supplierlist.Grid.superclass.onRender.apply(this, arguments);

        // load the store
        this.store.load({
            params: {
                start: 0,
                limit: 20
            }
        });


    }
    // eo function onRender
});

 Ext.reg('printsuppliers', supplierlist.Grid);


 Ext.ns('Example');


// example grid pre-configured class
 Example.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        var config = {
            store: new Ext.data.JsonStore({
                //                              
                id: 'company'
                ,
                totalProperty: 'totalCount'
                ,
                root: 'rows'
                ,
                url: 'get-grid-data.php'
                ,
                fields: [

                ]
            })
            ,
            columns: [{
                id: 'Smart Metering'
                ,
                header: "Smart Metering"
                ,
                width: 40,
                sortable: true

            }
            ]
            ,
            viewConfig: {
                forceFit: true
            }
        };
        // eo config object
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        this.bbar = new Ext.PagingToolbar({
            store: this.store
            ,
            displayInfo: true
            ,
            pageSize: 20
        });

        // call parent
        Example.Grid.superclass.initComponent.apply(this, arguments);
    }
    // eo function initComponent

    ,
    onRender: function() {

        // call parent
        Example.Grid.superclass.onRender.apply(this, arguments);

        // load the store
        this.store.load({
            params: {
                start: 0,
                limit: 20
            }
        });

    }
    // eo function onRender
});
 Ext.reg('examplegrid', Example.Grid);





 Ext.ns('eon');


// example grid pre-configured class
 eon.Grid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        var config = {
            store: new Ext.data.JsonStore({
                //                              
                id: 'company'
                ,
                totalProperty: 'totalCount'
                ,
                root: 'rows'
                ,
                url: 'get-grid-data.php'
                ,
                fields: [

                ]
            })
            ,
            columns: [{
                id: 'dummy'
                ,
                header: "dummy"
                ,
                width: 40,
                sortable: true

            }

            ]
            ,
            viewConfig: {
                forceFit: true
            }
        };
        // eo config object
        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        this.bbar = new Ext.PagingToolbar({
            store: this.store
            ,
            displayInfo: true
            ,
            pageSize: 20
        });

        // call parent
        eon.Grid.superclass.initComponent.apply(this, arguments);
    }
    // eo function initComponent

    ,
    onRender: function() {

        // call parent
        eon.Grid.superclass.onRender.apply(this, arguments);

        // load the store
        this.store.load({
            params: {
                start: 0,
                limit: 20
            }
        });

    }
    // eo function onRender
});
 Ext.reg('eontable', eon.Grid);


 Ext.onReady(function() {

    Ext.QuickTips.init();

    // create viewport with border layout
    var viewport = new Ext.Viewport({
        layout: 'border'
        ,
        id: 'vp'
        ,
        items: [{
            region: 'center'
            ,
            layout: 'fit'
            ,
            title: 'Center'
            ,
            xtype: 'examplegrid'
        },
        {
            region: 'west'
            ,
            title: 'Suppliers'
            ,
            width: 220
            ,
            xtype: 'printsuppliers'
            ,
            split: true
            ,
            collapsible: true
        }]
    });

});

}`)

php的代码

(`

$start = @$_REQUEST["start"];
 $limit = @$_REQUEST["limit"];

 $start = $start ? $start: 0;
 $limit = $limit ? $limit: 5;

 $data = array(
array("supplier" = >'a1'),
array("supplier" = >'a2'),
array("supplier" = >'a3'),
array("supplier" = >'a4'),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >''),
array("supplier" = >'')
);
 $a = array();
 $limit = ($limit > count($data)) ? $limit = count($data) : $limit;
for ($i = $start; $i < $start + $limit; $i++) {
    $a[] = $data[$i];
}


$o = array(
"success" = >true
, "totalCount" = >sizeof($data)
, "rows" = >$a
);

 echo json_encode($o);

// eof
 ? >

)

Answer 1

我不会尝试使用您的示例代码,因为它现在是一团糟.但是,根据您的描述,您似乎最适合探索CardLayout.

将您的中心区域定义为:

{
    id: 'center',
    region: 'center',
    layout: 'card',
    border: false,
    activeItem: 0,
    items: [
        {
            itemId: 'examplegrid',
            xtype: 'examplegrid'
            // other config properties here as needed
        },
        {
            itemId: 'eontable',
            xtype: 'eontable'
            // other config properties here as needed
        }
    ]
};

然后在其他区域中操作适当的控件时在卡片之间切换:

Ext.getCmp('center').getLayout().setActiveItem('eontable');
// or...
Ext.getCmp('center').getLayout().setActiveItem('examplegrid');

请注意,此技术可保留两种面板类型的单例实例.您也可以将其中一个面板保留在中心区域的初始定义之外,并在交换时动态创建和销毁面板.以下是从"examplegrid"更改为"eontable"的示例:

var center = Ext.getCmp('center');

center.add(Ext.ComponentMgr.create({
    itemId: 'eontable',
    xtype: 'eontable'
    // other config properties
}));

center.getLayout().setActiveItem('eontable');

center.remove('examplegrid', true);

然后将使用类似的操作以便稍后从"eontable"切换回"examplegrid".