EXTJS 动态表单

我想根据XML文件动态生成页面表单,同时每行有多少列也是根据XML文件生成.
JS文件:
var xmlObj;
var tempItems = [];


Ext.Ajax.request({
url : '/test/xml/xmlFile.xml', // 访问数据字典
method : 'post',
success : function(res, opt) {
xmlObj = res.responseXML;
//initStoreData(xmlObj); // 访问成功后执行后续工作
initFiled(xmlObj);
}
})

// 初始化页面字段
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时监视已经排列生成好,但是页面就是报错.麻烦大大给解决一下吧,谢谢.

tempItems.push(rowItem);
tempItems这个变量前面没有定义



JScript code

var rowLength = 0;
var rowItem = {};
var tempItems = [];//加一下就OK了
for (var i = 0; i < fields.length; i++)

你的tempItems最终是下边这个格式
JScript code

[{ //rowItem
       layout:'column',
       xtype : 'panel',
       anchor :'100%',
       items : [{ // itemObj
               columnWidth : .3,
               layout : 'form',
               items : [{ //obj
                   xtype:'textfield',
                   fieldLabel : field[0].firstChild.nodeValue,
                   width : 120
               }]
       }]
    }]

if (!rowItem.layout)
{
rowItem.layout = 'column';
rowItem.anchor = '100%';
rowItem.items = [];
rowItem.xtype = "panel";//加上这句试试}


你先用假数据让fieldset出来再说 这样能够确保你的模板是对的 再组织
tempItems