ExtJs 怎么添加一个事件 100结贴

t101lian 2013-08-09 05:29:32

如上图，我想在入金金额的文本框下面（红线处）添加一个 Label 标签，不用Label标签也可以，只要文本框输入的内容能动态在上面显示出来就可以。

这个是onkeyup事件吧，怎么添加？在线等。。

...全文

220 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

初心不变时过迁 2013-08-13

打赏
举报

引用 9 楼 yuqi_hz 的回复:

我觉得这个帖子有点坑，我都在自己的电脑上测试过可以了，这么简单的一个东西，竟然说什么都没有啦，无语

目测LZ直接 ctrl c ctrl v 该改的东西没改、、 LZ 多检查下代码

u011150962 2013-08-13

打赏
举报

引用 11 楼 t101lian 的回复:

[quote=引用 9 楼 yuqi_hz 的回复:] 我觉得这个帖子有点坑，我都在自己的电脑上测试过可以了，这么简单的一个东西，竟然说什么都没有啦，无语

你觉得我有必要这样？按照你给的代码，

 var TxForm = new Ext.FormPanel({
        frame: true,
        layout: 'form',
        labelAlign: 'right',
        labelWidth: 90,
        width: 450,
        items: new Ext.form.FieldSet({
            title: '入金信息',
            height: 120,
            bodyStyle: 'padding:2px',
            autoHeigh: true,
            defaults: { width: 175 },
            defaultType: 'textfield',
            items: [
            {
                fieldLabel: '用户ID',
                name: 'UserId',
                blankText: '不能为空',
                readOnly: true,
                allowBlank: false
            }, {
                fieldLabel: '用户名称',
                name: 'UserName',
                readOnly: true

            }, {
                fieldLabel: '入金金额',
                name: 'DoBankroll',
                blankText: '请填写入金金额',
                allowBlank: false,
                regex: /^\d+$/,
                regexText: '请输入正确的数据类型',
                vtype: 'alphanum',
                listeners: {
                    'keyup': function (tx, e) {
                        Ext.getCmp('DoBankroll_display').setValue(tx.getValue());
                    }
                }
            }, {
                xtype: 'displayfield',
                id: 'DoBankroll_display',
                name: 'DoBankroll_display'
            }]
        })

    });

现在点击图片中的入金都不会弹出最上面那个啦

[/quote]

t101lian 2013-08-13

打赏
举报

引用 9 楼 yuqi_hz 的回复:

我觉得这个帖子有点坑，我都在自己的电脑上测试过可以了，这么简单的一个东西，竟然说什么都没有啦，无语

你觉得我有必要这样？按照你给的代码，

 var TxForm = new Ext.FormPanel({

        frame: true,

        layout: 'form',

        labelAlign: 'right',

        labelWidth: 90,

        width: 450,

        items: new Ext.form.FieldSet({

            title: '入金信息',

            height: 120,

            bodyStyle: 'padding:2px',

            autoHeigh: true,

            defaults: { width: 175 },

            defaultType: 'textfield',

            items: [

            {

                fieldLabel: '用户ID',

                name: 'UserId',

                blankText: '不能为空',

                readOnly: true,

                allowBlank: false

            }, {

                fieldLabel: '用户名称',

                name: 'UserName',

                readOnly: true



            }, {

                fieldLabel: '入金金额',

                name: 'DoBankroll',

                blankText: '请填写入金金额',

                allowBlank: false,

                regex: /^\d+$/,

                regexText: '请输入正确的数据类型',

                vtype: 'alphanum',

                listeners: {

                    'keyup': function (tx, e) {

                        Ext.getCmp('DoBankroll_display').setValue(tx.getValue());

                    }

                }

            }, {

                xtype: 'displayfield',

                id: 'DoBankroll_display',

                name: 'DoBankroll_display'

            }]

        })



    });

现在点击图片中的入金都不会弹出最上面那个啦

yuqi_hz 2013-08-12

打赏
举报

我觉得这个帖子有点坑，我都在自己的电脑上测试过可以了，这么简单的一个东西，竟然说什么都没有啦，无语

t101lian 2013-08-12

打赏
举报

renderTo去掉后，页面同样什么都没有啦，。。不过还是谢谢你的回复，

yuqi_hz 2013-08-12

打赏
举报

引用 2 楼 yuqi_hz 的回复:


Ext.onReady(function(){
	
	   var TxForm = new Ext.FormPanel({
	        frame: true,
	        layout: 'form',
	        labelAlign: 'right',
	        labelWidth: 90,
	        width: 450,
	        items: new Ext.form.FieldSet({
	            title: '入金信息',
	            height: 120,
	            bodyStyle: 'padding:2px',
	            autoHeigh: true,
	            defaults: { width: 175 },
	            defaultType: 'textfield',
	            items: [
	            {
	                fieldLabel: '用户ID',
	                name: 'UserId',
	                blankText: '不能为空',
	                readOnly: true,
	                allowBlank: false
	            }, {
	                fieldLabel: '用户名称',
	                name: 'UserName',
	                readOnly: true
	 
	            }, {
	                fieldLabel: '入金金额',
	                enableKeyEvents:true,   //增加，否则无效
	                id:'DoBankroll',        //增加id
	                name: 'DoBankroll',
	                blankText: '请填写入金金额',
	                allowBlank: false,
	                regex: /^\d+$/,
	                regexText: '请输入正确的数据类型',
	                vtype: 'alphanum'
	            }],
	            renderTo: 'test' //测试时候用
	        })
	    });
	
	   //添加事件
	   Ext.getCmp('DoBankroll').on('keyup',function(){
		   alert(this.getRawValue());
	   });
});

怎么可能整个页面都不显示，你把renderTo去掉，这是我在自己机器上测试时候用的渲染的div的id

齊麟 2013-08-12

打赏
举报

引用 4 楼 qider 的回复:

{ fieldLabel: '入金金额', enableKeyEvents:true, //增加，否则无效 id:'DoBankroll', //增加id name: 'DoBankroll', blankText: '请填写入金金额', allowBlank: false, regex: /^\d+$/, regexText: '请输入正确的数据类型', vtype: 'alphanum', listeners:{ 'keyup':function(tx,e){ Ext.getCmp('DoBankroll_display').setValue(tx.getValue()); } } },{ xtype:'displayfield', id:'DoBankroll_display', name:'DoBankroll_display' }

这个应该是可以的吧

qider 2013-08-11

打赏
举报



Ext.onReady(function(){
	
	   var TxForm = new Ext.FormPanel({
	        frame: true,
	        layout: 'form',
	        labelAlign: 'right',
	        labelWidth: 90,
	        width: 450,
	        items: new Ext.form.FieldSet({
	            title: '入金信息',
	            height: 120,
	            bodyStyle: 'padding:2px',
	            autoHeigh: true,
	            defaults: { width: 175 },
	            defaultType: 'textfield',
	            items: [
	            {
	                fieldLabel: '用户ID',
	                name: 'UserId',
	                blankText: '不能为空',
	                readOnly: true,
	                allowBlank: false
	            }, {
	                fieldLabel: '用户名称',
	                name: 'UserName',
	                readOnly: true
	 
	            },{
	                fieldLabel: '入金金额',
	                enableKeyEvents:true,   //增加，否则无效
	                id:'DoBankroll',        //增加id
	                name: 'DoBankroll',
	                blankText: '请填写入金金额',
	                allowBlank: false,
	                regex: /^\d+$/,
	                regexText: '请输入正确的数据类型',
	                vtype: 'alphanum',
	                listeners:{
	                	'keyup':function(tx,e){
	                		Ext.getCmp('DoBankroll_display').setValue(tx.getValue());
	                	}
	                }
	            },{
	            	xtype:'displayfield',
	            	id:'DoBankroll_display',
	            	name:'DoBankroll_display'
	            }],
	            renderTo: 'test' //测试时候用
	        })
	    });

qider 2013-08-11

打赏
举报

{ fieldLabel: '入金金额', enableKeyEvents:true, //增加，否则无效 id:'DoBankroll', //增加id name: 'DoBankroll', blankText: '请填写入金金额', allowBlank: false, regex: /^\d+$/, regexText: '请输入正确的数据类型', vtype: 'alphanum', listeners:{ 'keyup':function(tx,e){ Ext.getCmp('DoBankroll_display').setValue(tx.getValue()); } } },{ xtype:'displayfield', id:'DoBankroll_display', name:'DoBankroll_display' }

t101lian 2013-08-11

打赏
举报

引用 2 楼 yuqi_hz 的回复:


Ext.onReady(function(){
	
	   var TxForm = new Ext.FormPanel({
	        frame: true,
	        layout: 'form',
	        labelAlign: 'right',
	        labelWidth: 90,
	        width: 450,
	        items: new Ext.form.FieldSet({
	            title: '入金信息',
	            height: 120,
	            bodyStyle: 'padding:2px',
	            autoHeigh: true,
	            defaults: { width: 175 },
	            defaultType: 'textfield',
	            items: [
	            {
	                fieldLabel: '用户ID',
	                name: 'UserId',
	                blankText: '不能为空',
	                readOnly: true,
	                allowBlank: false
	            }, {
	                fieldLabel: '用户名称',
	                name: 'UserName',
	                readOnly: true
	 
	            }, {
	                fieldLabel: '入金金额',
	                enableKeyEvents:true,   //增加，否则无效
	                id:'DoBankroll',        //增加id
	                name: 'DoBankroll',
	                blankText: '请填写入金金额',
	                allowBlank: false,
	                regex: /^\d+$/,
	                regexText: '请输入正确的数据类型',
	                vtype: 'alphanum'
	            }],
	            renderTo: 'test' //测试时候用
	        })
	    });
	
	   //添加事件
	   Ext.getCmp('DoBankroll').on('keyup',function(){
		   alert(this.getRawValue());
	   });
});

不对。。。整个页面都不显示啦，，，

yuqi_hz 2013-08-10

打赏
举报


Ext.onReady(function(){
	
	   var TxForm = new Ext.FormPanel({
	        frame: true,
	        layout: 'form',
	        labelAlign: 'right',
	        labelWidth: 90,
	        width: 450,
	        items: new Ext.form.FieldSet({
	            title: '入金信息',
	            height: 120,
	            bodyStyle: 'padding:2px',
	            autoHeigh: true,
	            defaults: { width: 175 },
	            defaultType: 'textfield',
	            items: [
	            {
	                fieldLabel: '用户ID',
	                name: 'UserId',
	                blankText: '不能为空',
	                readOnly: true,
	                allowBlank: false
	            }, {
	                fieldLabel: '用户名称',
	                name: 'UserName',
	                readOnly: true
	 
	            }, {
	                fieldLabel: '入金金额',
	                enableKeyEvents:true,   //增加，否则无效
	                id:'DoBankroll',        //增加id
	                name: 'DoBankroll',
	                blankText: '请填写入金金额',
	                allowBlank: false,
	                regex: /^\d+$/,
	                regexText: '请输入正确的数据类型',
	                vtype: 'alphanum'
	            }],
	            renderTo: 'test' //测试时候用
	        })
	    });
	
	   //添加事件
	   Ext.getCmp('DoBankroll').on('keyup',function(){
		   alert(this.getRawValue());
	   });
});

t101lian 2013-08-09

打赏
举报

    var TxForm = new Ext.FormPanel({
        frame: true,
        layout: 'form',
        labelAlign: 'right',
        labelWidth: 90,
        width: 450,
        items: new Ext.form.FieldSet({
            title: '入金信息',
            height: 120,
            bodyStyle: 'padding:2px',
            autoHeigh: true,
            defaults: { width: 175 },
            defaultType: 'textfield',
            items: [
            {
                fieldLabel: '用户ID',
                name: 'UserId',
                blankText: '不能为空',
                readOnly: true,
                allowBlank: false
            }, {
                fieldLabel: '用户名称',
                name: 'UserName',
                readOnly: true

            }, {
                fieldLabel: '入金金额',
                name: 'DoBankroll',
                blankText: '请填写入金金额',
                allowBlank: false,
                regex: /^\d+$/,
                regexText: '请输入正确的数据类型',
                vtype: 'alphanum'
            }]
        })

    });

ASP.NET通用项目管理系统源码开发环境 :VS2010+sqlserver2008 +mvc 3.0+Extjs 功能介绍： 1：权限管理。对公司人员，组织架构进行管理，对用户采用角色授权的方式控制结点、菜单权限 3：项目管理。对一个项目可以进行分阶段，分任务...划分，对每个划分点指定负责人员，只有负责人员可以对该划分点进行进度修改，工作情况进行描述，同时此处也与工作日志模块进行关联，相关结点负责人可以对负责项目的项目进行工作日志添加。项目的甘特图显示，清晰的展现出整个项目的时间安排情况 4：日程管理。对员工每天的工作安排进行管理，当天的日志可以进行修改，以前的日志不允许修改，每个人只能查询自己的日志；领导可以查询所有人日志 5：文档管理：在线的文档管理系统，对文件夹进行授权（显示，查看，修改，上传，复制，粘贴，移动）

开发环境 :Vs2010+sqlserver2008 +mvc 3.0+Extjs 功能介绍： 1：权限管理。对公司人员，组织架构进行管理，对用户采用角色授权的方式控制结点、菜单权限 3：项目管理。对一个项目可以进行分阶段，分任务...划分，对每个划分点指定负责人员，只有负责人员可以对该划分点进行进度修改，工作情况进行描述，同时此处也与工作日志模块进行关联，相关结点负责人可以对负责项目的项目进行工作日志添加。项目的甘特图显示，清晰的展现出整个项目的时间安排情况 4：日程管理。对员工每天的工作安排进行管理，当天的日志可以进行修改，以前的日志不允许修改，每个人只能查询自己的日志；领导可以查询所有人日志 5：文档管理：在线的文档管理系统，对文件夹进行授权（显示，查看，修改，上传，复制，粘贴，移动）

ASP.NET通用项目管理系统源码开发语言 : C# 数据库 : SQL2008 开发工具 : VS2010 源码类型 : WebForm 注意：不带技术支持，有帮助文件，虚拟商品，发货不退，看好再拍。开发环境 :VS2010+sqlserver2008 +mvc 3.0+Extjs 功能介绍： 1：权限管理。对公司人员，组织架构进行管理，对用户采用角色授权的方式控制结点、菜单权限 3：项目管理。对一个项目可以进行分阶段，分任务...划分，对每个划分点指定负责人员，只有负责人员可以对该划分点进行进度修改，工作情况进行描述，同时此处也与工作日志模块进行关联，相关结点负责人可以对负责项目的项目进行工作日志添加。项目的甘特图显示，清晰的展现出整个项目的时间安排情况 4：日程管理。对员工每天的工作安排进行管理，当天的日志可以进行修改，以前的日志不允许修改，每个人只能查询自己的日志；领导可以查询所有人日志 5：文档管理：在线的文档管理系统，对文件夹进行授权（显示，查看，修改，上传，复制，粘贴，移动）

今天看到一篇关于Extjs正则表达式比较系统的总结。使用extJs时能常用的正则表达式 "^\d+$"　　//非负整数（正整数 + 0）"^[0-9]*[1-9][0-9]*$"　　//正整数"^((-\d+)|(0+))$"　　//非正整数（负整数 + 0）"^-[0-9]*[1-9][0-9]*$"　　//负整数"^-?\d+$"　　　　//整数"^\d+(\...

使用extJs时能常用的正则表达式

"^/d+$"　　//非负整数（正整数 + 0）
"^[0-9]*[1-9][0-9]*$"　　//正整数
"^((-/d+)|(0+))$"　　//非正整数（负整数 + 0）