extjs How to change panel using treepanel

Question

I'm using ExtJS5 and trying to put the object items to card panel for a function that user can change the panel when click treepanel. But I don't know is it a right way to do that.

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

I like to do that like Example

And here is the panel on right hand side.

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
});

Thank you.

Wayne Tang Wayne Tang · Accepted Answer · 2014-10-13T08:36:43

I fixed the problem....

I forgot to add width in card panel so have an error occurred.

Thank you.

extjs How to change panel using treepanel

1 Answers