Question

如何将网格放在边框布局的中心区域以及extjs版本4.0.0中的窗体。我能够把表格而不是网格放在一起。

源代码： -

Ext.onReady(function() {

    var viewport = Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'border',
        items: [{
            region: 'west',
            width: 200,
            collapsible: true,
            collapsed: true,
            html: 'West Region'
        }, {
            region: 'center'
        }, {
            region: 'east',
            width: 200,
            collapsible: true,
            collapsed: true,
            html: 'East Region'
        }, {
            region: 'south',
            height: 50,
            html: 'South Region'
        }]
    });

    var form = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: 'User Form',
        height: 130,
        align: 'center',
        width: 280,
        bodyPadding: 10,
        defaultType: 'textfield',
        items: [
            {
                fieldLabel: 'First Name',
                name: 'firstName'
            },
            {
                fieldLabel: 'Last Name',
                name: 'lastName'
            }
        ],

        buttons: [{
            text: 'Submit',
            handler    : function () { alert("successfully submitted");}
        }]

});
    viewport.layout.regions.center.add(form);
    // using add()
    form.show()

    });

请帮我在extjs 4.0.0的边框布局中心区域下面放一个网格

Answer 1

//THis is in app.js 
    launch : function() {
            Ext.create('Ext.container.Viewport', {
                layout : {
                    type : 'border'
                },
                defaults : {
                    split : false
                },
                items : [ {
                    region : 'north',
                    id : 'mainHeader'
                }, {
                    region : 'south',
                    height : 20,
                    id : 'mainFooter'
                }, {
                    id : 'mainContent',
                    collapsible : false,
                    region : 'center',
                    layout: 'fit'
                   }

    //----This is Controller code ---
    init: function() {
            console.debug(' controller init(). ');
             this.control({
                 'viewport > #mainContent': { //look inside a viewport component for component by id='mainContent'
                    render: this.onMainReady  //attach 'onMainReady' function to the 'render' event of the above component
                 }

    //--- this is onMainReady inside controller
               //load grid into the main content
                var main = Ext.getCmp('mainContent'); //it isnot best practice to use getCmp
                main.add({
                     xtype:'mygrid',
                     id:'whateveriwant'
                });

Answer 2

您应该在中心面板的项目中包含表单和网格，并设置适当的布局。

Answer 3

您无法将组件添加到borderlayout区域。如果您想要向视口中心区域添加多个组件，则必须使用包装器组件。

文档中的段落：http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border

BorderLayout的区域在渲染时固定，之后，其子组件可能无法删除或添加。要添加/删除 BorderLayout中的组件，将它们包含在附加组件中由BorderLayout直接管理的容器。如果是该地区是可折叠的，BorderLayout直接使用Container 经理应该是一个小组。

Answer 4

而不是添加一个表单创建表单和网格并立即添加它们

试试这个：

var bothforms = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    layout: 'column',//or whetever u want
    items [{
    title: 'User Form',
    columnWidth: .5,
    border: false,
    height: 130,
    align: 'center',
    width: 280,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [... ]
   },{
    title : 'User Grid',
    columnWidth: .5,
    border: false,
    height: 130,
    width: 300,
    items: [... ]
}]

});
viewport.layout.regions.center.add(bothforms);
// using add()
bothforms.show()

在extjs 4.0.0的边框布局中的网格？

4 个答案: