extjs-mvc - 网格和表单在同一个视图中 extjs mvc

Question

我需要在同一个视图上附加表单和网格，但无法做到这一点......我如何扩展两者。

扩展网格面板

和

扩展面板

我的视图代码就像...

Ext.define('CustomerService.view.customer.AfterAddingTemplate',{
extend:'Ext.grid.Panel',
alias:'widget.aftertemplate',
requires:['Ext.form.Panel','Ext.grid.Panel'],
id:'afteraddingtemplate',
store:'StockCategoryStore',
autoResizeColumns:true,
//layout:'fit',
columnLines:true,
stripeRows:true,
autoHeight:true,
autoWidth:true,
initComponent:function(){
this.items=[{
xtype:'textfield',
fieldLabel:'something'
}];
this.columns=[
{
header:'Select a template',
flex:2
},
{header:'Category'},
{header:'Warehouse'}];
this.callParent(arguments);     
}});

Answer 1

为什么你需要扩展两者？您可以扩展表单并将网格面板添加为项目，例如

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',
    height: 250,
    width: 400,
    bodyPadding: 10,
    title: 'My Form',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'textfield',
                    anchor: '100%',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'gridpanel',
                    title: 'My Grid Panel',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'string',
                            text: 'String'
                        }
                    ]
                }
            ]
        });
        me.callParent(arguments);
    }

});