Extjs4.2 MVC 动态添加删除组件

例子 ：将一个grid添加到一个panel中去
panel

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myPanel',//与controller中ref的selector关联
    height: 250,
    id: 'panel',
    width: 400,
    layout: 'fit',
    title: 'My Panel',
    initComponent: function() {
        var me = this;
        me.callParent(arguments);
    }
});

grid

Ext.define('MyApp.view.mygrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.myGrid',//与controller中ref的selector关联
    requires: [
        'Ext.grid.column.Number',
        'Ext.grid.column.Date',
        'Ext.grid.column.Boolean',
        'Ext.grid.View'
    ],
    height: 250,
    id: 'grid',
    width: 400,
    title: 'My Grid Panel',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'string',
                    text: 'String'
                },
                {
                    xtype: 'numbercolumn',
                    dataIndex: 'number',
                    text: 'Number'
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'date',
                    text: 'Date'
                },
                {
                    xtype: 'booleancolumn',
                    dataIndex: 'bool',
                    text: 'Boolean'
                }
            ]
        });
        me.callParent(arguments);
    }
});

controller

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    views: [
        'mygrid',
        'MyPanel'
    ],
    refs: [
        {
            autoCreate: true,//必须自动创建对象，因为程序启动时只创建了主view（myPanel），这是在app.js中定义了的
            ref: 'grid',//引用名随意起，但是在生成get方法后首字母强制大写，如：getGrid（）
            selector: 'myGrid',//必须与alias中widget.后的部分字符相同
            xtype: 'myGrid'//必须与alias中widget.后的部分字符相同，autoCreate必须声明xtype
        },
        {
            ref: 'myPanel',//主view
            selector: 'myPanel'
        }
    ],
    onLaunch: function() {
        var panel = this.getMyPanel();//controller根据ref生成的get方法，注意get后的首字母强制大写。
        panel.removeAll(true);//删 最好先删再定义grid 如果在按钮事件中，这样重复点击按钮不会出现addcls为null错误，大概是删的时候会清除css样式，如果这个时候已经有grid对象，则样式会丢失
        var grid = this.getGrid();//controller根据ref生成的get方法，注意get后的首字母强制大写。
        panel.add(grid);//添
        panel.doLayout();//刷新
    }
});