`

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

 
阅读更多

在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

    

分享到:
评论

相关推荐

    EXT dojochina文本框示例Ext.form.TextField.rar

    在本示例中,"EXT dojochina文本框示例Ext.form.TextField.rar"是一个压缩包,包含了EXT框架中关于`Ext.form.TextField`组件的示例代码。 `Ext.form.TextField`是EXT框架中的一个核心组件,用于创建基本的输入字段...

    Ext表单组件之textField

    Ext.form.TextField是Ext JS中的一个核心组件,它允许用户在表单中输入单行文本。这个组件可以用于创建各种类型的输入字段,如普通文本输入、密码输入、电子邮件地址输入等,通过设置不同的配置选项来满足不同的需求...

    EXT.form组件

    EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件,用于创建具有不同功能的交互式表单。在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 ...

    Ext.form.TextField最简单的用法.docx

    `Ext.form.TextField`是Ext JS库中的一个组件,用于创建基本的文本输入字段。它在Web应用程序中广泛用于收集用户输入的数据,如用户名、搜索关键词等。以下是对`Ext.form.TextField`的一些主要特性和配置选项的详细...

    Servlets-Form-TextField.zip_This Is How

    在本示例"Servlets-Form-TextField.zip_This Is How"中,我们将探讨如何在Servlet中处理HTML表单中的文本字段数据。 首先,让我们了解Servlet的基本工作原理。Servlet是一个Java类,它扩展了`javax.servlet....

    基于TextField的图文混编的组件

    基于TextField的图文混编组件是一种解决方案,它利用了Adobe Flash(ActionScript 3,AS3)中的TextField类来实现这一功能。TextField在Flash中是一个基础的文本显示和编辑控件,它可以处理简单的文本输入,但通过...

    EXT表单验证之TextField

    总而言之,EXT表单验证中的TextField组件通过`vtype`属性提供了丰富的验证机制,能够确保用户输入的数据质量,从而提高应用程序的稳定性和用户体验。开发者可以根据需要选择合适的vtype,或者自定义验证规则,以满足...

    EXT from培训教材

    1. **文本字段**:使用`Ext.form.TextField`创建,用于输入文本。例如: ```javascript new Ext.form.TextField({ fieldLabel: '邮件', name: 'email', vtype: 'alphanum', // 字段验证类型 width: 175 // 字段...

    关于Ext中form移除textfield方法:hide(),setVisible(false),remove()

    在Ext JS这个强大的JavaScript框架中,管理用户界面组件如form中的textfield是非常常见的任务。当我们需要根据特定条件控制form中某个字段是否显示时,通常会使用`hide()`、`setVisible(false)`或`remove()`等方法。...

    ext-3-TextField-sample.rar_ext_ext TextField_ext textfield inp

    在提供的压缩包中,"ext-3-TextField-sample.rar" 涉及到的是ExtJS 3.x版本中的TextField组件,这是一个基本的用户输入控件,常用于收集用户在网页上的文本信息。这个示例着重介绍了如何创建和使用TextField。 ...

    Ext中表单中各种组件的布局

    { columnWidth: .33, layout: 'form', items: [{ xtype: 'textfield', fieldLabel: '姓名' }, { xtype: 'textfield', fieldLabel: '地址' }] }, { columnWidth: .33, layout: 'form', defaultType: 'textfield', ...

    Java组件的使用(Bottun,TextField等的使用方法,适合初学Java的人员参考)

    本教程将深入讲解Java AWT(Abstract Window Toolkit)库中的Button和TextField组件,以及如何在实际应用中使用它们。适合对Java GUI编程感兴趣的初学者。 首先,我们来了解`Button`组件。在Java AWT中,`Button`是...

    flutter 输入框组件TextField的实现代码

    Flutter 输入框组件TextField 的实现代码详解 在 Flutter 中,TextField 是一个非常重要的组件,用于用户输入文本信息。这篇文章将详细介绍 Flutter 中 TextField 的实现代码,包括其构造方法、基本使用方式、属性...

    EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题

    在EXTJS中,Form Panel是用于创建用户交互界面的核心组件,常常用来收集和提交数据。在某些场景下,我们可能需要在表单中添加隐藏字段(Hidden Textfield),以存储那些用户不可见但对系统至关重要的信息,如操作员...

    Ext Extjs 禁止文本和日期编辑

    在Ext JS这个强大的JavaScript框架中,开发者经常使用各种组件来构建富客户端应用,其中包括TextField(文本字段)和DatePicker(日期选择器)。有时,我们可能需要根据应用需求在运行时禁用这些组件的编辑功能,...

    extjs form textfield的隐藏方法

    [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by percentage },{ xtype: ‘textfield’, name: ‘FID’...

    swift-iOSPlaceholder和icon替换出现的TextField组件

    在iOS应用开发中,用户界面的设计与交互是至关重要的,其中`TextField`组件扮演着接收用户输入的关键角色。`UITextField`是苹果提供的一个基础UI元素,用于创建可以在屏幕上输入文本的区域。本篇文章将深入探讨如何...

Global site tag (gtag.js) - Google Analytics