extjs使用回车绑定查询按钮的两种方式

最新推荐文章于 2016-07-07 14:43:00 发布

JecksonChenJinHua

最新推荐文章于 2016-07-07 14:43:00 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

文章标签： extjs layout button autoload function border

本文链接：https://blog.youkuaiyun.com/JecksonChenJinHua/article/details/6857489

本文详细介绍了如何在 Ext JS 框架中为文本框和按钮设置回车事件监听，实现特定功能响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.为textfield中的回车方式：

var siteName = new Ext.form.Field({
            id: 'siteName1',//表单元素最好使用Id，不然在IE浏览器中表单内容将变形
            fieldLabel: '网站名称',
           listeners : {
               specialkey : function(field, e) {
                   if (e.getKey() == Ext.EventObject.ENTER) {
                       alert("提交");
                        ...
                   }
               }
           }
        });

2.为button的回车方式：

this.searchPanel = new Ext.FormPanel(
        {
         layout : 'column',
         region : 'north',
         height : 80,
         id:'testbaseserachid',
         bodyStyle : 'padding:6px 10px 6px 10px',
         border : false,
         defaults : {
          border : false,
          anchor : '98%,98%'
         },
         keys:[{
                      key:13, //13代表回车
                      fn:function(){
                           document.getElementById("btntrtestbaseall").click();
                      },
                      scope:this
                  }],

         items : [
           {
            columnWidth : .3,
            layout : 'form',
            items : {
             fieldLabel : '标题',
             name : 'Q_title_S_LK',
             id:'querytrtestbasetile',
             maxLength:200,
             xtype : 'textfield'
            }
           },
           {
            columnWidth : .3,
            layout : 'form',
            width:50,
            items : {
             fieldLabel : '原语言',
             hiddenName : 'queryfromlanguage',
             id:'querytrtestbasefromlangguage',
             xtype : 'combo',
             mode : 'local',
             anchor : '63%',
             editable : false,
             valueField : 'id',
             displayField : 'name',
             triggerAction : 'all',
             store : new Ext.data.SimpleStore(
               {
                autoLoad : true,
                url : __ctxPath + '/pubmodule/loadMapStringDictionary.do?itemName=language&queryuser=true',
                fields : [
                  'id',
                  'name' ]
               })
            }
          ,
           {
            columnWidth : .3,
            layout : 'hbox',
            items : [
            {
             xtype : 'button',
             text : '查询',
             id:'btntrtestbaseall',
             iconCls : 'search',
             handler : this.search
               .createCallback(this)
            },
            {
            xtype : 'button',
            text : '重置',
            iconCls:'btn-reseted',
            handler : function() {
             var searchPanel = Ext.getCmp('testbaseserachid');
             searchPanel.getForm().reset();

            }
           }]
           }
          ]
        });