ExtJs动态添加组件

1.ExtJs通过json获取其他方式获取到多条数据，然而这个时候多条数据是不固定的，我们需要动态的添加组件来显示这些数据（这些数据不是使用grid的方式进行展示）大致需要展示的效果见下图：

ExtJs动态添加组件

操作方法是这样如下：

1.给需要动态展示数据的组件加上id，方便获取需要展示容器的内容，代码如下：

Ext.define('*.*.*', {
    extend: 'Ext.view.panel',
    alias: '*.*',
    requires: ['*','*'],
    title: "XXXX",
    width: '100%',
    layout: 'vbox',
    id:'id1',

    items: []

});

可以看到给组件加了个id为id1的组件

2.在contrller里边定义其中一个展示组件的变量：

var treePanel = {
    layout: 'vbox',
    width: '100%',
    items: [{
        xtype: 'container',
        layout: 'hbox',
        flex: 7,
        border: true,
        defaults: {
            labelWidth: 120,
            labelAlign: 'right',
            xtype: 'displayfield',
            width: '100%',
            minWidth: 130,
            maxWidth: 220,
            margin: '10 0 10 0',
        },
        items: [{
            fieldLabel: '参数位置',
            name: 'position'
        }, {
            fieldLabel: '参数编码',
            name: 'argumentName'
        }, {
            fieldLabel: '数据类型',
            name: 'dataType'
        }, {
            fieldLabel: '最大长度',
            name: 'dataLength'
        }, {
            fieldLabel: '输入/输出',
            name: 'inOut'
        }]
    }, {
        xtype: 'container',
        layout: 'hbox',
        flex: 2,
        defaults: {
            labelAlign: 'right',
            margin: '10 0 10 0',
            minWidth: 250,
            maxWidth: 400,
        },
        items: [{
            name: 'argumentType',
            fieldLabel: '参数类型',
            xtype: 'extendcombo',
            editable: false,
            store: '***',
            displayField: 'name',
            valueField: 'id',
            allowBlank: false,
            hasDefaultValue: false,
            showRedStar: false,
            isHasNoLimit: false,
            queryMode: 'local',
            emptyText: '请进行选择'
        }, {
            name: 'argnameZh',
            fieldLabel: '参数名称',
            xtype: 'textfield',
            width: 500
        }]
    }, {
        xtype: 'container',
        layout: 'hbox',
        flex: 6,
        defaults: {
            labelWidth: 120,
            labelAlign: 'right',
            xtype: "textfield",
            height: 30,
            minWidth: 800,
            maxWidth: '100%',
            margin: '10 0 10 0',
        },
        items: [{
            fieldLabel: '参数描述',
            name: 'argumentDesc'
        }]
    }]
};

3.在获取json数据读取的地方，进行处理动态数据

var panel = Ext.getCmp("id1");
panel.removeAll();
var dataLen = result.data.length;//result 为获取到的json数据  次数为模拟的
if (dataLen > 0) {
    for (var i = 0; i < dataLen; i++) {
        panel.add(treePanel);
    }
    panel.doLayout();
    var position = Ext.ComponentQuery.query('displayfield[name=position]', panel);
    var argumentName = Ext.ComponentQuery.query('displayfield[name=argumentName]', panel);
    var dataType = Ext.ComponentQuery.query('displayfield[name=dataType]', panel);
    var dataLength = Ext.ComponentQuery.query('displayfield[name=dataLength]', panel);
    var inOut = Ext.ComponentQuery.query('displayfield[name=inOut]', panel);
    for (var i = 0; i < dataLen; i++) {
        var config = result.data[i];
        position[i].setValue(config.position);
        argumentName[i].setValue(config.argumentName);
        dataType[i].setValue(config.dataType);
        dataLength[i].setValue(config.dataLength);
        inOut[i].setValue(config.inOut);
    }
}

Ext.getCmp获取指定id或者name的容器

panel.add 方法是相指定的容器的items下添加item，需要调用doLayout是添加后的item展示到页面中

Ext.ComponentQuery.query这个方法可以获取到某一个组件下的同一个name的子组件，根据页面name出现的顺序获取，获取到的是一个数组。

再添加item子项之前，需要将指定的熔旗下的item进行清空(removeAll)处理，防止页面重现打开（未进行强制刷新）时item重复添加。

2.获取同样name的value方法

使用1中的 Ext.getCmp获取指定id或者name的容器

Ext.ComponentQuery.query这个方法可以获取到某一个组件下的同一个name的子组件，根据页面name出现的顺序获取，获取到的是一个数组。

然后循环遍历数组使用getValue的方法，获取每一个name的value。

转载于:https://my.oschina.net/senit/blog/826467

秒客网

ExtJs动态添加组件

相关文章