文本框的可修改性问题举例

    在WEB开发中会经常碰到在不同情况下要求对文本框的操作情况不同,即,有时要对文本框进行修改而在某种情况下该文本框又不能被修改.下面举例说明:
    例如:有两列文本框,当第一列有数据时第二列的文本框中内容为可编辑状态,当第一列文本框中没有内容时第二列的文本框将为不可编辑状态.
语言表达不好,还是代码来的快!哈哈:
显示页面的部分代码:
{hideLabel:true,id:'C1', xtype:"textfield",  width:32 ,clearCls:'x',itemCls:'float-left', disabled:true }
 ,{hideLabel:true,id:'CC1', xtype:"textfield",  width:140 ,listeners:{'valid':validText}}
,{hideLabel:true,id:'C2', xtype:"textfield",  width:32 ,clearCls:'x',itemCls:'float-left', disabled:true}
,{hideLabel:true,id:'CC2', xtype:"textfield",  width:140  }
,{hideLabel:true,id:'C3', xtype:"textfield",  width:32 ,clearCls:'x',itemCls:'float-left', disabled:true }
,{hideLabel:true,id:'CC3', xtype:"textfield",  width:140  }
,{hideLabel:true,id:'C4', xtype:"textfield",  width:32 ,clearCls:'x',itemCls:'float-left', disabled:true}
,{hideLabel:true,id:'CC4', xtype:"textfield",  width:140  }

监听方法validText的代码:
var validText = function(){
    var C1v_ = Ext.getCmp('C1').getValue();
    var C2v_ = Ext.getCmp('C2').getValue();
    var C3v_ = Ext.getCmp('C3').getValue();
    var C4v_ = Ext.getCmp('C4').getValue();

    var CC1_ = Ext.getCmp('CC1');
    var CC2_ = Ext.getCmp('CC2');
    var CC3_ = Ext.getCmp('CC3');
    var CC4_ = Ext.getCmp('CC4');

    C1v_==''?CC1_.disable():CC1_.enable();
    C2v_==''?CC2_.disable():CC2_.enable();
    C3v_==''?CC3_.disable():CC3_.enable();
    C4v_==''?CC4_.disable():CC4_.enable();
}
当然这个监听方法也是可以采用循环的,这里代码就不贴了..

假如在读取数据时第一列的第一和第二个数据都存在,第三个和第四个数据为空,则结果为下图:即第一二行是可编辑的,的三四行是不可编辑的.

转载于:https://blog.51cto.com/5dreamfly/97945