您的位置:首页 > Web前端 > JavaScript

Ext.js 古怪的问题(表单布局崩溃)

2016-01-20 10:41 591 查看
好吧,最后我没用现在这个方法,当晚调试之后是正常的,第二天又出现该问题了。后台我用表格替换了生成模板!不得不说自己真的好蠢!表格那么好用的东西,居然死活要用模板。主要是刚开始是想着使用模板的。第一印象真是害死人!

在表单里需要监听beforerender的事件添加模板,但是会报错,很古怪:

Uncaught TypeError: Cannot read property ‘parentNode’ of null

猜测是render事件对表单布局做出了影响,不过仅限于稍微复杂点的表单,解决办法

等等!布局的控制不能解决根本问题。实际上是因为模板里面节点在二次请求页面的时候进行了二次加载,可能产生的问题是数据重复,或者是布局崩溃,比如就是找不到parentNode.最好的解决办法是关闭页面的时候清空加载的模板节点!

items: [{
listeners: {
'render': function () {
Ext.Ajax.request({
//async:false,
url: 'http://localhost:8899/api/roles/RolesQuery',
method: 'GET',

success: function (response) {

var text = response.responseText;

jsondata = Ext.util.JSON.decode(text)
console.log("-----角色------")
console.log(jsondata.aaData)
datarole = jsondata
roletpl = new Ext.XTemplate(
'<div style="overflow:auto;height:300px">',

'<form>',

'<table cellpadding=0 cellspacing=0 border=1 width=400px style="border:1px solid #CECECE">',

'<tpl for="aaData">',
'<tr><td style="width:200px;border:1px solid #CECECE">',
'<p style="margin:0px "> ',
'<input type="checkbox" name={IndexID} class="role"',
' style="width:17px;height:17px;"/>',
'<span style="position:relative;top:-3px">{RoleName}</span>',
' </p>',
'</td>',
'</tr>',

'</tpl>',
'</table>',

'</form>',
'</div>'

);
//roletpl.overwrite(this.up().body, datarole);
roletpl.overwrite(Ext.get('roletpl'), datarole);
datarole = null;
roletpl = null;
}
})

},

}
}]


items: [{
listeners: {
'beforerender': function () {

roletpl.overwrite(this.up().body, data);
//添加了暂停布局的方法
Ext.suspendLayouts();

}
}
}]


布局是不会崩溃,然而下拉列表的布局收到了 Ext.suspendLayouts();的影响。因此我将下拉列表换成了radiogroup

{
xtype: 'radiogroup',

//cls: 'x-check-group-alt',
items: [

{
boxLabel: '女', name: 'rb-auto', inputValue: 0,id:'girl',
listeners: {
'change': function () {

console.log("-----change1------")
console.log(this.inputValue)
}
}
},
{
boxLabel: '男', name: 'rb-auto', inputValue: 1, id: 'boy',
listeners: {
'change': function () {

console.log("-----change2------")

console.log(this.inputValue)
}
}
}
]
},


在提交表单需要得到radiogroup的value,用的是,注意的是只要name值一样就可以单选了,这样获得value值没有问题,name值不一样就是多选,多选获取value值暂时还不知道怎么弄。

var form =Ext.getCmp('adduser').getForm();
me.epGender = form.getValues()['rb-auto'];
me.stateValue = form.getValues()['status']


问题解决
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: