如何修改form组件textfield,combbox 的fieldLabel

最新推荐文章于 2021-01-12 02:04:34 发布

qingsf

最新推荐文章于 2021-01-12 02:04:34 发布

阅读量318

点赞数

分类专栏： extjs 学习文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/qsfwy/article/details/84232571

版权

extjs 学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在ExtJs中不能直接通过fieldLabel='new fieldLabel'来修改Form中组件的fieldLabel.不过可以通过修改dom来完成对fieldLabel的修改。
下面我做了个简单的示例：

Java代码

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="../ext-2.2.0/resources/css/ext-all.css" /> 
    <link href="column-tree.css" rel="stylesheet" type="text/css" />
 	<script type="text/javascript" src="../ext-2.2.0/adapter/ext/ext-base.js"></script>
 	<script type ="text/javascript" scr="../ext-2.2.0/ext-all-debug.js></script>
         <script type="text/javascript" src="../ext-2.2.0/ext-all.js"></script>
         <script language="javascript">
	 Ext.onReady(function(){
      var formpanel =new Ext.form.FormPanel({
	     title:'ChangeFieldLabel',
		 applyTo:'script',
		 frame:true,
	  	 height:'400',
		 width:'600',
		 autoShow:true,
		 buttons:[{text:'changFieldLabel',handler:function changeFieldLabel(){
              //获取fieldLabel对象 
		 label =Ext.getCmp('changeLabel').getEl().parent().parent().first();
              //修改fieldLabel 
	     label.dom.innerHTML ='afterChange';
				}}],
		 labelAlign:'right',
		 items:[{  xtype:'textfield',
				   id:'changeLabel',
		           fieldLabel:'beforeChange'				  
				  }]
	  	        });
   });
</script>
<body>
<div id="script" >
</div>
</body>
</head>
</html>

上在这个例子中，在firebug下html如下图.

说明：由上图可以看出代码中parent()的个数由form组件位置决定的。

思路：通过火狐浏览器的firebug查看元素的上下位置顺序

ext修改fieldLabel总结:

(1).修改textfield的fieldLabel采用以下方法：

    //获取fieldLabel对象
   label =Ext.getCmp('changeLabel').getEl().parent().parent().first();
    //修改fieldLabel
     label.dom.innerHTML ='afterChange';

(2). 修改combbox的fieldLabel采用以下方法：

　　　combboxId.getEl().parent().parent().parent().first().dom.innerHTML="afterChange:";

combboxId为声明combbox的id