+ -
当前位置:首页 → 问答吧 → EXTJS 动态表单

EXTJS 动态表单

时间:2011-11-24

来源:互联网

我想根据XML文件动态生成页面表单,同时每行有多少列也是根据XML文件生成.
JS文件:
var tempItems = [];
// 初始化页面字段
function initFiled(xmlObj) {
var poTabel = xmlObj.getElementsByTagName("reftable")[0].firstChild.nodeValue;
// 获取界面表单
var fields = xmlObj.getElementsByTagName("field");
// 用来计算是否换行
var rowLength = 0;
var rowItem = {};
for (var i = 0; i < fields.length; i++) {
// 去掉XML空白
var field = cleanWhitespaces(fields[i]);
// 还有下一个节点
if (fields[i + 1]) {
var nextField = cleanWhitespaces(fields[i + 1]);
if (rowLength + parseInt(nextField[3].firstChild.nodeValue) > 90) {
rowItem = {};
rowLength = 0;
}
}
// 一行只设定一次属性
if (!rowItem.layout) {
rowItem.layout = 'column';
rowItem.anchor = '100%';
rowItem.items = [];
}
var itemObj = {};
itemObj.columnWidth = .3;
itemObj.layout = 'form';
var obj = new Object;
obj.xtype = 'textfield';
obj.fieldLabel = field[0].firstChild.nodeValue;
obj.width = 120;
itemObj.items = [];
itemObj.items.push(obj);
rowItem.items.push(itemObj);
}
tempItems.push(rowItem);
}

var other_panel = new Ext.form.FieldSet({
id: 'other_info',
title : '其他信息',
autoScroll:true,
autoHeight:true,
frame : true,
labelWidth:65,
labelAlign:'right',
anchor:'100%',
items : tempItems,
buttonAlign : "center",
buttons : [{
text : "提交"
}, {
text : "重置"
}]

});


XML文件:
<?xml version="1.0" encoding="gb2312"?>
<dictionary>
<title>基本信息</title>
<reftable>basePerson</reftable>
<targettable>base_person</targettable>

<!-- 属性 -->
<field>
<fieldtitle>姓名</fieldtitle>
<fieldname>name</fieldname>
<fieldtype>文本</fieldtype>
<length>33</length>
<uicomponent>单行</uicomponent>
</field>


<field>
<fieldtitle>年龄</fieldtitle>
<fieldname>age</fieldname>
<fieldtype>文本</fieldtype>
<length>33</length>
<uicomponent>单行</uicomponent>
</field>
</dictionary>

需要生成ITEMS的结果如同下代码的结果:
items : [{ // 行1
layout : "column", // 从左往右的布局
anchor:'100%',
items : [{
columnWidth : .3, // 该列有整行中所占百分比
layout : "form", // 从上往下的布局
items : [{xtype : "textfield", fieldLabel : "姓", width : 120}]
}, {
columnWidth : .3,
layout : "form",
items : [{xtype : "textfield", fieldLabel : "名", width : 120}]
}, { 
columnWidth : .3,
layout : "form",
items : [{xtype : "textfield", fieldLabel : "英文名", width : 120}]
}]
}, { // 行2
layout : "column",
anchor:'100%',
items : [{
columnWidth : .46,
layout : "form",
items : [{xtype : "textfield", fieldLabel : "座右铭1", width : 200
}]
}, {
columnWidth : .46,
layout : "form",
items : [{xtype : "textfield", fieldLabel : "座右铭2", width : 200
}]
}]
}],

我的问题是other_panel里属性items:tempItems 在DEBUG时监视已经排列生成好,但是页面就是报错.麻烦大大给解决一下吧,谢谢.

作者: jiang54   发布时间: 2011-11-24

你直接看那个错误信息不就知道了~~~~~~~~~~~

作者: chong023   发布时间: 2011-11-24

就是看不到错误信息的呢.从何看起? 直接就报items : tempItems,这句话有错.

作者: jiang54   发布时间: 2011-11-24

引用 2 楼 jiang54 的回复:
就是看不到错误信息的呢.从何看起? 直接就报items : tempItems,这句话有错.


items:tempItems 类型均为FieldSet

作者: yhtapmys   发布时间: 2011-11-24