Ext JS 5 - 将网格面板添加到视口

Posted 2023-02-26

【中文标题】Ext JS 5 - 将网格面板添加到视口

【英文标题】：Ext JS 5 - add grid panel to viewport

【发布时间】：2015-02-21 16:23:40

【问题描述】：

我正在寻找一种将网格面板添加到我的视口的方法，我尝试使用 add() 函数，但这对我不起作用。

Ext.应用程序（ 名称：“我的应用”，

launch : function() 
       Ext.create('Ext.container.Viewport', 
        layout: 'border',
        items: [
            region: 'north',
            html: '<h1 class="x-panel-header">Page Title</h1>',
            border: false,
            margin: '0 0 5 0'
        , 
            region: 'west',
            title: 'Navigation',
            width: 250,
            collapsible: false,
            items : 
                // I want to add it just there  
                xtype : 'gridPanel'
            
        , 
            region: 'south',
            title: 'South Panel',
            collapsible: true,
            html: 'test test',
            split: true,
            height: 100,
            minHeight: 100
        , 
            region: 'east',
            title: 'East Panel',
            collapsible: true,
            split: true,
            width: 150
        , 
            region: 'center',
            xtype: 'tabpanel', 
            activeTab: 0,      
            items: 
                title: 'test Tab',
                html: ''
            
        ]
    );

);

提前谢谢，

【问题讨论】：

您已经为网格尝试了哪些配置代码？可以分享一下吗

【参考方案1】：

您只需要完成您的代码并使用正确的配置和 xtype。

我已复制您的代码并在此 fiddle 中创建了一个网格，没有任何问题，代码也在下方，以防链接中断。

Ext.application(
    name: 'MyApp',

    launch: function() 
        Ext.create('Ext.data.Store', 
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: 
                'items': [
                    '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"
                ]
            ,
            proxy: 
                type: 'memory',
                reader: 
                    type: 'json',
                    rootProperty: 'items'
                
            
        );

        Ext.create('Ext.container.Viewport', 
            layout: 'border',
            items: [
                region: 'north',
                html: '<h1 class="x-panel-header">Page Title</h1>',
                border: false,
                margin: '0 0 5 0'
            , 
                region: 'west',
                title: 'Navigation',
                width: 250,
                collapsible: false,
                items: 
                    // I want to add it just there  
                    xtype: 'grid',
                    title: 'Simpsons',
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columns: [
                        text: 'Name',
                        dataIndex: 'name'
                    , 
                        text: 'Email',
                        dataIndex: 'email',
                        flex: 1
                    , 
                        text: 'Phone',
                        dataIndex: 'phone'
                    ],
                    listeners: 
                        rowdblclick: function(grid, record, tr, rowIndex, e, eOpts) 
                            alert(record.get("name"));
                        
                    ,
                    height: 200,
                    width: 400,
                
            , 
                region: 'south',
                title: 'South Panel',
                collapsible: true,
                html: 'test test',
                split: true,
                height: 100,
                minHeight: 100
            , 
                region: 'east',
                title: 'East Panel',
                collapsible: true,
                split: true,
                width: 150
            , 
                region: 'center',
                xtype: 'tabpanel',
                activeTab: 0,
                items: 
                    title: 'test Tab',
                    html: ''
                
            ]
        );
    

);