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

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

在表单里需要监听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']

问题解决

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值