【原】基础篇:第八篇,Ext组件系列之--textfield组件的基本用法

本章介绍Ext.form.TextField组件的基本用法:

<form id="form1" runat="server">
    <div>
    <div id="Bind_TextField"></div>
    <br />
    <div id="Bind_Button"></div>
    <script type="text/javascript">
    //这里是把TextField很重要的属性列出来 实际在应用的时候不需要将每个属性都列出 也许只需要一个属性就够了。
    function ready()
    {
        Ext.QuickTips.init();
        var textfieldName = new Ext.form.TextField
        ({
              id:"textfieldName",              
              allowBlank:false,//默认是true,如果是false,就是不允许空              
              //假如不为空时,定义提示信息 默认的提示信息是:This field is required
              //要使提示内容出现,需要添加 Ext.QuickTips.init();
              blankText:"请输入数据",              
              disabled:false,//默认是false              
              emptyText:"请正确输入数据",//默认是null              
              fieldLabel:"用户名称",//默认是""              
              height:"auto",//默认是auto              
              hidden:false,//默认是false              
              hideLabel:false,//默认是false              
              hideMode:"offsets",//默认display,可以取值:display,offsets,visibility              
              inputType:"text",//输入类型 这个很重要,可以是radio, text, password, file 默认是text              
              invalidText:"invalidText:只能够输入数字",//默认是:The value in this field is invalid              
              maxLength:100,//能够输入的内容的最大长度              
              maxLengthText:"输入内容太长了",//超出最大长度的设置信息              
              minLength:2,//能够输入的内容的最小长度
              maxLengthText:"输入内容太短了",//没有达到最小长度的设置信息              
              readOnly:false,//内容是否只读,默认false              
              regex:/^\d$/, //正则表达式 这里假设只允许输入数字 如果输入的不是数字 就会出现下面定义的提示信息              
              regexText:"regexText:只能够输入数字", //定义不符合正则表达式的提示信息              
              validateOnBlur:true,//默认是true,失去焦点时验证              
              validationDelay:300,//默认是250,验证延迟时间,毫秒数              
              validationEvent:"click", //验证事件 默认是keyup 可以是String/Boolean              
              //自定义的验证函数 当输入的数据不符合正则表达式的要求时,就会执行这个函数
              validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");},              
              value:"",//自定义的信息 默认是:undefined               
              //x:number,y:number,在容器中的x,y坐标                  
              width:"auto",//默认是auto              
              renderTo:"Bind_TextField"            
        });        
        //TextField组件的方法和事件都比较简单,具体请查看Ext2.2官方文档,如果有不明白的地方在博客里提问解决
        //以上就是TextField组件的常用定义。
    }
    Ext.onReady(ready);
    </script>
    </div>
    </form>

posted @ 2008-10-30 16:49 殷良胜 阅读(2624) 评论(26)  编辑 收藏 网摘

  回复  引用  查看    
#1楼[楼主]2008-10-31 13:55 | 殷良胜      
  回复  引用  查看    
#2楼2008-11-01 16:34 | angeletfang      
继续补充:TextField组件使用也很简单的,也很固定的。注意实际应用的时候验证的问题就OK了!
  回复  引用    
#3楼2008-11-19 11:36 | 张炯[未注册用户]
上面的代码 验证有错!
  回复  引用  查看    
#4楼[楼主]2008-11-19 12:24 | 殷良胜      
@张炯
出错的地方能够描述出来吗?也好查查。

  回复  引用    
#5楼2008-11-21 22:28 | lawrenst[未注册用户]
提示Ext.QuickTips.init();这一行缺少'}',但是根本就不缺少,找不到错误在哪里,希望楼主尽快找出来。
  回复  引用    
#6楼2008-11-21 22:36 | lawrenst[未注册用户]
标签显示不出来...
  回复  引用  查看    
#7楼[楼主]2008-11-22 12:54 | 殷良胜      
@lawrenst
你好
好奇怪的
你们几位朋友都认为有错误
我今天直接把上面的代码复制到文件里又测试了下
是没有问题的:
1,默认能够显示出提示的信息
2,输入字符能够显示提示要输入数字,并且弹出消息窗口进一步提示
另外
我的公告已经说明了:
测试环境是:
所有示例的开发环境除非做特别的说明,
否则全部使用VS.Net2008+C#+SQL server 2005 +EXT2.2版本



  回复  引用  查看    
#8楼[楼主]2008-11-22 12:55 | 殷良胜      
@张炯
你好
好奇怪的
你们几位朋友都认为有错误
我今天直接把上面的代码复制到文件里又测试了下
是没有问题的:
1,默认能够显示出提示的信息
2,输入字符能够显示提示要输入数字,并且弹出消息窗口进一步提示
另外
我的公告已经说明了:
测试环境是:
所有示例的开发环境除非做特别的说明,
否则全部使用VS.Net2008+C#+SQL server 2005 +EXT2.2版本

  回复  引用    
#9楼2009-01-03 13:30 | Repeter[未注册用户]
这好像与测试环境无关吧!
这没用到交互啊

  回复  引用    
#10楼2009-01-15 17:20 | 穿云箭[未注册用户]
我想动态改变fieldLabel的值
不知道能否做到?

  回复  引用  查看    
#11楼[楼主]2009-01-16 09:43 | 殷良胜      
@穿云箭
可以

  回复  引用    
#12楼2009-01-16 10:22 | 穿云箭[未注册用户]
该怎样实现呢?
望老师赐教

  回复  引用  查看    
#13楼[楼主]2009-01-16 11:39 | 殷良胜      
@穿云箭
fieldLabel:变量名称
简单吧

  回复  引用    
#14楼2009-01-16 11:53 | 穿云箭[未注册用户]
可能是我表述有问题
我的意思是刚开始时fieldLabel:变量名称1
后来我想改变这个名称——》变量名称2
按你现在的方法是改变不了的
当然这个可能涉及到界面的重新加载了

  回复  引用    
#15楼2009-01-16 11:55 | 穿云箭[未注册用户]
改变fieldLabel:由名称1 ——》名称2


  回复  引用  查看    
#16楼[楼主]2009-01-16 12:55 | 殷良胜      
@穿云箭
你想通过什么方式改变呢
是事件触发吗?
不管如何
给它传一个变量名称即可

  回复  引用    
#17楼2009-01-16 13:36 | 穿云箭[未注册用户]
我想通过一个事件触发
用combox
可是我只能改变这个变量
却不能使界面上的这个filedlable改变

  回复  引用  查看    
#18楼[楼主]2009-01-16 13:57 | 殷良胜      
@穿云箭
触发事件--》修改变量值--》使用当前面板的doLayout()方法重新加载面板

  回复  引用    
#19楼2009-01-16 15:04 | 穿云箭[未注册用户]
非常感谢!不知道要用doLayout()方法重新加载,呵呵,谢过
  回复  引用    
#20楼2009-02-25 00:22 | zhshw
尊敬的博主:
请教个问题,您以上的代码中有一句是:
//假如不为空时,定义提示信息 默认的提示信息是:This field is required
//要使提示内容出现,需要添加 Ext.QuickTips.init();
最后这个Ext.QuickTips.init();方法我查阅了一下类库,类库是这样的:
---
init ( Boolean autoRender ) : void
Initialize the global QuickTips instance and prepare any quick tips.
参数:
autoRender : Boolean
True to render the QuickTips container immediately to preload images. (Defaults to true)
返回值:
void
---
我想问这个方法在类库中不是有参数吗?为什么使用的时候就不用参数了呢?这是为什么呢?谢谢您啦!

  回复  引用  查看    
#21楼[楼主]2009-02-25 08:46 | 殷良胜      
--引用--------------------------------------------------
zhshw: 尊敬的博主:
请教个问题,您以上的代码中有一句是:
//假如不为空时,定义提示信息 默认的提示信息是:This field is required
//要使提示内容出现,需要添加 Ext.QuickTips.init();
最后这个Ext.QuickTips.init();方法我查阅了一下类库,类库是这样的:
---
init ( Boolean autoRender ) : void
Initialize the global QuickTips instance and prepare any quick tips.
参数:
autoRender : Boolean
True to render the QuickTips container immediately to preload images. (Defaults to true)
返回值:
void
---
我想问这个方法在类库中不是有参数吗?为什么使用的时候就不用参数了呢?这是为什么呢?谢谢您啦!

--------------------------------------------------------
看这句
True to render the QuickTips container immediately to preload images. (Defaults to true)
你都已经复制出来了呀 仔细看看【(Defaults to true)】这句说明在没有参数的情况下默认就是true

  回复  引用    
#22楼2009-02-25 10:34 | zhshw
@殷良胜
-----
谢谢博主了。原来默认是这个样子地哩。

  回复  引用  查看    
#23楼[楼主]2009-02-25 10:49 | 殷良胜      
--引用--------------------------------------------------
zhshw: @殷良胜
-----
谢谢博主了。原来默认是这个样子地哩。
--------------------------------------------------------
呵呵

  回复  引用    
#24楼2009-05-11 10:33 | 刘liu[未注册用户]
text的自动文本改变事件是哪个啊
  回复  引用    
#25楼2009-05-24 09:14 | 一定要知道[未注册用户]
Ext.onReady(function(){

var visable = new Ext.form.TextField({
fieldLabel: '表中文名称',
labelWidth:100,
name: '表中文名称'
});

var form = new Ext.form.FormPanel({
//defaultType: 'textfield',
labelAlign: 'right',
title: 'form',
//labelWidth:100,
frame:true,
width: 300,
items: [visable],
buttons: [{
text: '图表转换',
handler: function() {
//visable.fieldLabel = '图中文名称';
visable = new Ext.form.TextField({
fieldLabel: '图中文名称',
labelWidth:100,
name: '图中文名称'
});
form.doLayout();

}
}]
});
form.render("form");
});
我现在想实现标签由‘表中文名称'-->'图中文名称',我试了doLayout方法,没有实现,有没有其他办法啊

  回复  引用  查看    
#26楼[楼主]2009-05-29 00:04 | 殷良胜      
--引用--------------------------------------------------
一定要知道: Ext.onReady(function(){

var visable = new Ext.form.TextField({
fieldLabel: '表中文名称',
labelWidth:100,
name: '表中文名称'
});

var form = new Ext.form.FormPanel({
//defaultType: 'textfield',
labelAlign: 'right',
title: 'form',
//labelWidth:100,
frame:true,
width: 300,
items: [visable],
buttons: [{
text: '图表转换',
handler: function() {
//visable.fieldLabel = '图中文名称';
visable = new Ext.form.TextField({
fieldLabel: '图中文名称',
labelWidth:100,
name: '图中文名称'
});
form.doLayout();

}
}]
});
form.render(&quot;form&quot;);
});
我现在想实现标签由‘表中文名称'--&gt;'图中文名称',我试了doLayout方法,没有实现,有没有其他办法啊
--------------------------------------------------------
有几个办法 现在按照你的代码的实现方式稍微修改即可
<script type="text/javascript">
Ext.onReady(function()
{
var visable = new Ext.form.TextField
({
fieldLabel: '表中文名称', id:"visable",
labelWidth:100,
name: '表中文名称'
});

var form = new Ext.form.FormPanel
({
//defaultType: 'textfield',
labelAlign: 'right',
title: 'form',
//labelWidth:100,
frame:true,
width: 300,
items: [visable],
buttons:
[{
text: '图表转换',
handler: function()
{
form.remove(Ext.getCmp("visable"));

var visable = new Ext.form.TextField
({
fieldLabel: '图中文名称', id:"visable",
labelWidth:100,
name: '图中文名称'
});

form.add(visable);
form.doLayout();
}
}] ,
renderTo:document.body
});
//form.render("form");
});

</script>

发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 1323145




相关文章:

相关链接: