在ExtJs中不能直接通过fieldLabel='new fieldLabel'来修改Form中组件的fieldLabel.不过可以通过修改dom来完成对fieldLabel的修改。
下面我做了个简单的示例:
<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框架中关于`Ext.form.TextField`组件的示例代码。 `Ext.form.TextField`是EXT框架中的一个核心组件,用于创建基本的输入字段...
Ext.form.TextField是Ext JS中的一个核心组件,它允许用户在表单中输入单行文本。这个组件可以用于创建各种类型的输入字段,如普通文本输入、密码输入、电子邮件地址输入等,通过设置不同的配置选项来满足不同的需求...
EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件,用于创建具有不同功能的交互式表单。在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 ...
`Ext.form.TextField`是Ext JS库中的一个组件,用于创建基本的文本输入字段。它在Web应用程序中广泛用于收集用户输入的数据,如用户名、搜索关键词等。以下是对`Ext.form.TextField`的一些主要特性和配置选项的详细...
在本示例"Servlets-Form-TextField.zip_This Is How"中,我们将探讨如何在Servlet中处理HTML表单中的文本字段数据。 首先,让我们了解Servlet的基本工作原理。Servlet是一个Java类,它扩展了`javax.servlet....
基于TextField的图文混编组件是一种解决方案,它利用了Adobe Flash(ActionScript 3,AS3)中的TextField类来实现这一功能。TextField在Flash中是一个基础的文本显示和编辑控件,它可以处理简单的文本输入,但通过...
总而言之,EXT表单验证中的TextField组件通过`vtype`属性提供了丰富的验证机制,能够确保用户输入的数据质量,从而提高应用程序的稳定性和用户体验。开发者可以根据需要选择合适的vtype,或者自定义验证规则,以满足...
1. **文本字段**:使用`Ext.form.TextField`创建,用于输入文本。例如: ```javascript new Ext.form.TextField({ fieldLabel: '邮件', name: 'email', vtype: 'alphanum', // 字段验证类型 width: 175 // 字段...
在Ext JS这个强大的JavaScript框架中,管理用户界面组件如form中的textfield是非常常见的任务。当我们需要根据特定条件控制form中某个字段是否显示时,通常会使用`hide()`、`setVisible(false)`或`remove()`等方法。...
在提供的压缩包中,"ext-3-TextField-sample.rar" 涉及到的是ExtJS 3.x版本中的TextField组件,这是一个基本的用户输入控件,常用于收集用户在网页上的文本信息。这个示例着重介绍了如何创建和使用TextField。 ...
{ columnWidth: .33, layout: 'form', items: [{ xtype: 'textfield', fieldLabel: '姓名' }, { xtype: 'textfield', fieldLabel: '地址' }] }, { columnWidth: .33, layout: 'form', defaultType: 'textfield', ...
本教程将深入讲解Java AWT(Abstract Window Toolkit)库中的Button和TextField组件,以及如何在实际应用中使用它们。适合对Java GUI编程感兴趣的初学者。 首先,我们来了解`Button`组件。在Java AWT中,`Button`是...
Flutter 输入框组件TextField 的实现代码详解 在 Flutter 中,TextField 是一个非常重要的组件,用于用户输入文本信息。这篇文章将详细介绍 Flutter 中 TextField 的实现代码,包括其构造方法、基本使用方式、属性...
在EXTJS中,Form Panel是用于创建用户交互界面的核心组件,常常用来收集和提交数据。在某些场景下,我们可能需要在表单中添加隐藏字段(Hidden Textfield),以存储那些用户不可见但对系统至关重要的信息,如操作员...
在Ext JS这个强大的JavaScript框架中,开发者经常使用各种组件来构建富客户端应用,其中包括TextField(文本字段)和DatePicker(日期选择器)。有时,我们可能需要根据应用需求在运行时禁用这些组件的编辑功能,...
[{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by percentage },{ xtype: ‘textfield’, name: ‘FID’...
在iOS应用开发中,用户界面的设计与交互是至关重要的,其中`TextField`组件扮演着接收用户输入的关键角色。`UITextField`是苹果提供的一个基础UI元素,用于创建可以在屏幕上输入文本的区域。本篇文章将深入探讨如何...