EXTJS 动态向器皿中添加组件
日期：2014-05-16 浏览次数：20421 次
EXTJS 动态向容器中添加组件
数据源
组件：
容器：
面板：
数据源
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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
