JS控制readonly、isnull、display

学习来源：　　　http://blog.csdn.net/lmb55/article/details/51759767

　　　　　　　　http://blog.csdn.net/liuxilil/article/details/6654257

 

工作任务，需要在一个控件内容发生变化时进行判断，对其他组件的属性进行修改。

1. 在需要监听的控件上设置 onchange 属性。

<input type="text" id="customerName"  onchange='onCheckJT()' name="CUSTOMERNAME" value="${(order.extension.attributes.CUSTOMERNAME)?if_exists}" isNull=false title="客户名称" onchange='onCheckJT()' readonly>

2. 在 JS 中对 判断及控制 进行实现

<script type="text/javascript">
function onCheckJT(){
    var isFromJT=document.getElementById('order.customer.extension.attributes.ISFROMJT').value;
    var input1=document.getElementById('node1');
    var show1=document.getElementById('show1');
    if(isFromJT==1){
        show1.style.display="none";
        input1.isNull=true;
        input1.readonly=false;
        alert($F('order.customer.extension.attributes.ISFROMJT')+"1111111");
    }
    if(isFromJT==0){
        show1.style.display="block";
        input1.isNull=false;
        input1.readonly="readonly";
    }else{
        alert($F('order.customer.extension.attributes.ISFROMJT')+"!!!!!!!");
    }
}
</script>

用于控制是否显示的属性有两个：style.visibility 和 style.display。

参考：http://www.jb51.net/article/54077.htm

	显示	隐藏
display	“”	“none”
visibility	“visible”	“hidden”

document.getElementById("EleId").style.visibility="hidden";
document.getElementById("EleId").style.visibility="visible";
//上述隐藏DOM的方法，会在前端留下空白

document.getElementById("EleId").style.display="none";
document.getElementById("EleId").style.display="inline";
//上述隐藏DOM的方法，不会在前端留下空白

 

3. 扩展

3.1  $F('页面元素ID')

该方法仅对 字符输入控件 有效，比如 <input>、<textarea>、<select>。

他是一种简便地获取控件 value 的方式：

<script language=javascript> 
function test() 
{ 
    方法一：
    alert(document.getElementById("ID").value);

    方法二：    
    alert( $F("ID") ); 
} 
</script>

但是他不能直接作为左值被赋值：

$F("ID") = "new value"; //错误的写法 

document.getElementById("ID").value = "new value"; //正确的代码 　　这里的value表示“属性value”

$("ID").value = "new value"; //正确的代码　　这里的value表示“值”

3.2 Ext.getCmp("ID")

在用 ExtJS 进行开发的过程中，可使用 Ext.getCmp("ID") 来代替 document.getElementById("ID") 

 <script type="text/javascript">               
            function ready(){     
                var setText=function(){
                    //先获取控件的各属性信息
                    var button=Ext.getCmp("btn");     
                    var btnId=button.id;    
                    var btnText=button.text;    
                    var btnType=button.type;     
                    var result="id:"+btnId+"  文本:"+btnText+" 类型:"+btnType;     
                    Ext.Msg.alert("",result);

　　　　　　　　　　　 //使用 setText() 方法设置控件的 Text 属性
                    Ext.getCmp("btn").setText("取消");

　　　　　　　　　　　 //对于没有相应 set 方法的属性，可按以下方式赋值
　　　　　　　　　　　 button.text="确认";
　　　　　　　　　　　 button.style.display="block";
                }     
                var alertBtn=new Ext.Button({
                    id:"btn",
                    text:"确定",
                    handler:setText,
                    renderTo:document.body     
                });     
            }     
            Ext.onReady(ready);     
        </script>

handler ：事件响应时，所调用的方法。

renderTo ：控件应该渲染的位置。

3.3 renderTo、applyto的区别