将extjs项动态添加到字段容器中

时间:2012-02-22 14:58:55

标签: javascript javascript-events extjs extjs4 javascript-framework

我正在为我的应用程序使用extjs字段容器,其中我有表单中的详细信息,资金,家属部分。在基金和& dependents部分我有一个“添加另一个”按钮,用于在每次单击按钮时添加新的行项目。

这是我创建的表单 http://jsbin.com/evevod/4/edit

我是extjs4的新手。任何人都可以帮我如何动态创建一个项目。

2 个答案:

答案 0 :(得分:10)

下面是示例处理程序。

handler: function() {
    var container = this.up('fieldset');
    var config = Ext.apply({}, container.initialConfig.items[0]);
    config.fieldLabel = container.items.length + 1;
    container.add(config);
}

基本上它找到了保存行的父组件(即fieldset),访问initialConfig属性,在其中找到第一行配置(items[0]),制作配置的浅层副本(Ext.apply )并将其添加到容器(container.add)。

工作样本:http://jsbin.com/evevod/6/edit#preview

答案 1 :(得分:1)

我们可以更改这样的字段名称:

var container = this.up('fieldset'); 
var config = Ext.apply({}, container.initialConfig.items[0]);
config.fieldLabel = container.items.length+1;
config.items[0].name = 'fname' + config.fieldLabel;
config.items[1].name = 'lname' + config.fieldLabel;
config.items[2].name = 'title' + config.fieldLabel;