extjs动态添加控件

wuzuyu365

于 2018-04-23 10:26:58 发布

阅读量3.4k

点赞数 1

分类专栏： js

js 专栏收录该内容

89 篇文章 1 订阅

订阅专栏

   /**
     * 初始化组件
     */
    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            tbar: me.getToolbarCmp(),

            items: [{
                id: "panelQueryCmp",
                region: "north",
                height: 70,
                layout: "fit",
                title: "查询条件",
                collapsible: true,
                collapseMode: "mini",
                layout: {
                    type: "table",
                    columns: 8
                },
                items: me.getQueryCmp()
            }, {
                region: "center",
                layout: "border",

                border: 0,
                items: [{
                    region: "west",
                    width: 190,
                    split: true,
                    layout: "fit",
                    border: 0,
                    items: [me.getTypeGrid()]
                }, {
                    region: "center",
                    layout: "fit",
                    xtype: "panel",
                    border: 0,
                    items: [me.getSkuGrid()]
                }]
            }]
        });

        me.callParent(arguments);
 
    },


  /**
     * 动态添加控件
     */
    addObj:function(){
        var fc = Ext.getCmp('panelQueryCmp');
        fc.removeAll();//把panel中原有的移除，不然会累加 
        var items = {
            xtype : 'textfield',
            name : 'x_name',
            labelWidth:50,
            fieldLabel : '名字'
        }
        fc.add(items);//把获取的items添加到panel中 
        var items = {
            xtype : 'combo',
            name : 'x_type',
            labelWidth:50,
            fieldLabel : '类别'
        }
        fc.add(items);//把获取的items添加到panel中 
        fc.doLayout();
    },

点addobj后变成这样了：