EXTJS 动态向容器中添加组件

[Cyan Homlez]

数据源

var data = {
	name: "公司航站服务运行审计",
	clazz: [{
		name: "航站管理",
		option: [{
			title: "航站应建立管理文件，明确场站内各岗位的职责和各项与运行相关的工作程序。",
			operation: "审计方式：抽查<br/>审计要点：管理文件指定文字化的《工作/管理手册》...",
			textarea: "审计评语",
			radio:[{
				title: "审计结论",
				option:["符合","不符合","观察项","不适合"]
			}]
		},{
			title: "营业部/办事处应持有有效的代理协议。",
			operation: "审计方式：抽查<br/>审计要点：代理协议包括：地面服务代理协议（包括不限于头等舱协议、SLA协议）。",
			textarea: "审计评语",
			radio:[{
				title: "审计结论",
				option:["符合","不符合","观察项","不适合"]
			}]
		},{
			title: "营业部/办事处应持有有效的代理协议。",
			operation: "审计方式：抽查<br/>审计要点：代理协议包括：地面服务代理协议（包括不限于头等舱协议、SLA协议）。",
			textarea: "审计评语",
			radio:[{
				title: "审计结论",
				option:["符合","不符合","观察项","不适合"]
			}]
		}]
	},{
		name: "Manual Management",
		option: [{
			title: "营业部/办事处应持有有效的代理协议。",
			operation: "审计方式：抽查<br/>审计要点：代理协议包括：地面服务代理协议（包括不限于头等舱协议、SLA协议）。",
			textarea: "审计评语",
			radio:[{
				title: "审计结论",
				option:["符合","不符合","观察项","不适合"]
			}]
		},{
			title: "营业部/办事处应持有有效的代理协议。",
			operation: "审计方式：抽查<br/>审计要点：代理协议包括：地面服务代理协议（包括不限于头等舱协议、SLA协议）。",
			textarea: "审计评语",
			radio:[{
				title: "审计结论",
				option:["符合","不符合","观察项","不适合"]
			}]
		},{
			title: "营业部/办事处应持有有效的代理协议。",
			operation: "审计方式：抽查<br/>审计要点：代理协议包括：地面服务代理协议（包括不限于头等舱协议、SLA协议）。",
			textarea: "审计评语",
			radio:[{
				title: "审计结论",
				option:["符合","不符合","观察项","不适合"]
			}]
		}] 
	}]
};

组件：

function createRadioGroup(option) {
	var radioGroup = {
		xtype: 'fieldset',
		title: option.title,
		layout: 'form',
		collapsible: true,
		items: [{
			xtype: 'component',
			html: option.operation,
			cls: "a"
		},{
			xtype: 'textfield',
			name: 'text1',
			fieldLabel: option.textarea
		},{
			xtype: 'radiogroup',
			fieldLabel: option.radio[0].title,
			cls: 'x-check-group-alt',
			items: [
				{boxLabel: option.radio[0].option[0], name: 'choose1', inputValue: "A"},
				{boxLabel: option.radio[0].option[1], name: 'choose1', inputValue: "B"},
				{boxLabel: option.radio[0].option[2], name: 'choose1', inputValue: "C"},
				{boxLabel: option.radio[0].option[3], name: 'choose1', inputValue: "D"}
			]
		}]
	}
	return radioGroup;
};

容器：

var individual = {
	xtype: 'container',
	layout: 'hbox',
	margin: '0 0 10',
	items: [{
		xtype: 'fieldset',
		flex: 1,
		title: 'TITLE 2',
		defaultType: 'checkbox',
		layout: 'anchor',
		defaults: {
			anchor: '100%',
			hideEmptyLabel: false
		},
		items: [
			radioGroup2
		]
	}]
};

面板：

var fp = Ext.create('Ext.FormPanel', {
	title: 'Station Audit',
	frame: true,
	fieldDefaults: {
		labelWidth: 110,
		labelStyle: 'color:green;padding-left:4px'
	},
	width: 600,
	renderTo:'form-ct',
	bodyPadding: 10,
	items: [
		individual
	],
	buttons: [{
		text: 'Submit',
		handler: function(){
			if(fp.getForm().isValid()){
				Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
				fp.getForm().getValues(true).replace(/&/g,', '));
			}
		}
	},{
		text: 'Reset',
		handler: function(){
			fp.getForm().reset();
		}
	}]
});

本人EXTJS新手， 现在需要根据数据源数组的长度循环创建组件，并将组件按创建顺序全部添加到容器中去，看API中有add()方法，反复尝试还是没有结果，觉得此时有必要向诸位大牛请教了，求实现。

[lzpggg]

Notes : If the Container is already rendered when add is called, you may need to call doLayout to refresh the view which causes any unrendered child Components to be rendered. This is required so that you can add multiple child components if needed while only refreshing the layout once. For example:

var tb = new Ext.Toolbar();
tb.render(document.body);  // toolbar is rendered
tb.add({text:'Button 1'}); // add multiple items (defaultType for Toolbar is 'button')
tb.add({text:'Button 2'});
tb.doLayout();             // refresh the layout

[Cyan Homlez]

嗯，API我看过了，我也尝试了，没有结果才来求教。

	var checkbox = individual.items[0];
	var a = createRadioGroup(data.clazz[0].option[0]);
	checkbox.add(a);

checkbox.add(a);就已经有问题了，doLayout()未执行。

[lzpggg]

"checkbox.add(a);就已经有问题了，doLayout()未执行。" 说明你的a格式有问题，你自己调试看看，先用手动格式看行不，然后再读取数据.

[lzpggg]

还有你的individual.items[0]现在仅仅是个配置哟并没有渲染成组件，可能出在这里！

[Cyan Homlez]

var radioGroup2 = {
	xtype: 'fieldset',
	title: data.clazz[0].option[1].title,
	layout: 'form',
	collapsible: true,
	items: [{
		xtype: 'component',
		html: data.clazz[0].option[1].operation,
		cls:'a'
	},{
		xtype: 'textfield',
		name: 'text2',
		fieldLabel: data.clazz[0].option[1].textarea
	},{
		xtype: 'radiogroup',
		fieldLabel: data.clazz[0].option[0].radio[0].title,
		cls: 'x-check-group-alt',
		items: [
			{boxLabel: data.clazz[0].option[1].radio[0].option[0], name: 'choose2', inputValue: "A"},
			{boxLabel: data.clazz[0].option[1].radio[0].option[1], name: 'choose2', inputValue: "B"},			{boxLabel: data.clazz[0].option[1].radio[0].option[2], name: 'choose2', inputValue: "C"},
			{boxLabel: data.clazz[0].option[1].radio[0].option[3], name: 'choose2', inputValue: "D"}
		]
	}]    
};
var individual = {
	xtype: 'container',
	layout: 'hbox',
	margin: '0 0 10',
	items: [{
		xtype: 'fieldset',
		flex: 1,
		title: 'TITLE 2',
		defaultType: 'checkbox',
		layout: 'anchor',
		defaults: {
			anchor: '100%',
			hideEmptyLabel: false
		},
		items: [
			radioGroup2
		]
	}]
};

面板代码就不附了，结果是：

这是我手动配的。组件的格式应该是没问题的，

[Cyan Homlez]

渲染，好，我试试。

[Cyan Homlez]

还是不行...

[lzpggg]

add组件要在父组件渲染完以后进行

var individual = {
    xtype: 'container',
    layout: 'hbox',
    margin: '0 0 10',
    items: [{
        xtype: 'fieldset',
        flex: 1,
        title: 'TITLE 2',
        defaultType: 'checkbox',
        layout: 'anchor',
        defaults: {
            anchor: '100%',
            hideEmptyLabel: false
        },
        listeners: {
             scope : this
             render: function(fieldset){
                   var a = createRadioGroup(data.clazz[0].option[0]);
                   fieldset.add(a);
                   fieldset.doLayout();
             }
        },
        items: [
            radioGroup2
        ]
    }]
};

[Cyan Homlez]

引用

add组件要在父组件渲染完以后进行

非常感谢你的帮助，受教了，辛苦。