Freewind @ Thoughtworks scala java javascript dart 工具 编程实践 月结 math python english [comments admin] [feed]

(2012-01-03) Ext 2.x中各种bug、解决方案与经验记录

广告: 云梯:翻墙vpn (省10元) 土行孙:科研用户翻墙http proxy (有优惠)

一、ComboBox在submit时,无法传出正确的值?

下面是一个典型的combo示例:

{

xtype: 'combo',       
anchor: '95%',       
fieldLabel: '发布文章前是否需要审核',       
name: 'articlesNeedCheck',       
displayField: 'text',       
valueField: 'value',       
mode: 'local',       
value: -1,       
triggerAction: 'all',       
store: new Ext.data.SimpleStore({       
     fields: ['value', 'text'],       
     data: [       
         ['-1', '沿用上级设置'],       
         ['1', '需要'],       
         ['0', '不需要']

     ]      
 })       

}

展示效果如下图:

image

我们在定义中已经指明displayField是text,即显示中文那一列;valueField是value,对应是-1,0,1那一列。但奇怪的是,提交到后台的值是竟然是中文!也就是说,下面这一行参数似乎没起作用:

valueField: ‘value’

我反复尝试也找不到原因,真让人无比郁闷。最后在网上找到答案。原来当ComboBox与SimpleStore一起用的时候,还需要指定一个叫hiddenName的值,与隐藏的那列对应,才能正确传值。

对于上例来说,就是:

hiddenName: ‘articlesNeedCheck’

加上去,就正常了。但在文档中根本没有强调,谁能想到还需要指定这个值?我翻看了其他同事写的代码,他们遇到类似问题的时候,居然因为一个combobox而手动将form中所有字段的值全部一个个取出来向后台发送,这真是浪费生命。

在写ext的过程中,我不知道因为这样的问题浪费了多少时间,经常一卡就一两个小时。我还是倾向于像GWT那样,在后台写java代码在前台生成js代码的解决方案。如果直接用js写,没有编译期的提示与查错,太容易出问题了,调试也非常困难。

二、file类型的input,在firefox下引发的Security Error

下面是错误截图,

image

image

相似你很难这些信息中找到错误原因。我也是花了几个小时的调试,才发现问题就在下面这段代码中:

{

xtype: 'textfield',    
name: 'frontImage',    
id: 'frontImage',    
anchor: '100%',    
value: 'TODO',    
inputType: 'file',    
fieldLabel: '引导图片',    
hideLabel: true    

}

这段代码在IE下一切正常,但在firefox下会出现“Security Code”。

错误的原因在于“value:'TODO'“,因为firefox不允许对file类型的input进行赋值。只是这错误提示,实在太让人无从下手了。

三、combo,如果id与hiddenName同名,则界面异常并且无法选择下拉条中的内容

先看截图:

image

这个下拉条跟其它的不一样,长度超出了边缘并且弹出来的下拉条很短,更要命的是选不上,选了以后输入框里还是空白。

又是经常一翻痛苦排查,发现原因竟然是因为id跟hiddenName同名了。

看代码:

         {   
           xtype: 'combo',    
           hiddenName: 'allowComment',    
          <font color="#ff0000"> id: 'allowComment',     

anchor: '100%',

           fieldLabel: '启用评论',    
           triggerAction: 'all',    
           displayField: 'text',    
           valueField: 'value',    
           mode: 'local',    
           store: new Ext.data.SimpleStore({    
               fields: ['value', 'text'],    
               data: [    
                   ['-1', '沿用上级评论设置'],    
                   ['1', '启用评论'],    
                   ['0', '禁止评论']    
               ]    
           }    

需要把红色部分改个名字才行。

comments powered by Disqus