extjs的html绑定变量,ExtJs动态添加组件

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

操作方法是这样如下：

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。

作者：o黑色乌鸦o