extjs 如何使用 treepanel 更改面板

Question

我正在使用 ExtJS5 并尝试将对象项放到卡片面板中，以实现用户可以在单击树形面板时更改面板的功能。但我不知道这样做是否正确。

var p = Ext.create('Ext.panel.Panel', {
    layout: 'card',
    items: [
        grid, bottompanel
    ]
});

我喜欢像Example那样做

这是右侧的面板。

var grid = Ext.create('Ext.grid.Panel', {
    //title: 'Simpsons',
    title: 'Customers',
    height: 300,
    width:'100%',
    id: 'cus_grid',
    columns: [
        {text: "Customer ID", dataIndex: "id", flex: 1},
        {text: "Customer Name", dataIndex: "name", flex: 1},
        {text: "Services Name", dataIndex: "s_name", flex: 1},
        {text: "Services Type", dataIndex: "s_type", flex: 1}
    ],
    store: user,
    listeners : {
        itemclick: function(dv, record, item, index, e) {
            //alert(record.get('name')); 
            Ext.getCmp('infoForm').getForm().findField('id').setReadOnly(true);
            Ext.getCmp('infoForm').getForm().findField('s_type').setReadOnly(true);
            Ext.getCmp('infoForm').loadRecord(record);          
        }
    }
});

var bottompanel = Ext.create('Ext.form.Panel', {
    //region: 'center',
    title: 'Information',
    bodyPadding: 10,
    flex:1,
    width:'100%',
    id: 'infoForm',
    items: [{
                xtype: 'textfield',
                name: 'id',
                fieldLabel: 'Customer ID',
                allowBlank: false  // requires a non-empty value
            },{
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name',
                allowBlank: false  // requires a non-empty value
            }, {
                xtype: 'textfield',
                name: 's_name',
                fieldLabel: 'Services Name',
                allowBlank: false  // requires a non-empty value
            }, cmbBox],
            // Reset and Submit buttons
            buttons: [],
            tbar: toolBar
});

谢谢。

Answer 1

我解决了这个问题....

我忘记在卡片面板中添加宽度，所以发生了错误。

谢谢。