游乐游手机版
首页/前端开发/文章详情

ExtJS4类的定义与扩展实例全面解析

时间:2026-06-10 07:00
首先,我们了解一下 Ext JS 4 中类的常规定义方法。需要特别留意:方法(method)与函数(function)的添加方式有所不同。为什么函数只能通过 override 方式来添加?我也没有完全弄清楚,如果你知道其中原因,欢迎赐教。 先声明一个类,并为其定义一个方法: Ext define(

首先,我们了解一下 Ext JS 4 中类的常规定义方法。需要特别留意:方法(method)与函数(function)的添加方式有所不同。为什么函数只能通过 override 方式来添加?我也没有完全弄清楚,如果你知道其中原因,欢迎赐教。

先声明一个类,并为其定义一个方法:

Ext.define('Simple.Class',{
    welcome:function(){
        alert('Welcome to the app');
    }
});

若想为已有类增加新方法,则可借助 Ext.override 进行重载:

Ext.override(Simle.Class,{
    goodBye:function(){
        alert('Goodbye');
    },
    funAll:function(){
        this.welcome();
        this.goodBye();
    }
});

接下来实例化该类对象,并调用新增方法:

var app = new Simple.Class();
app.runAll(); //Welcome to the app Goodbye

此外,还有一种更简洁的扩展写法:直接在类上调用 override 方法:

Simple.Class.override({
    // New members...
});

下面通过一个实际案例来演示。定义一个按钮类,并对其进行扩展:

Ext.define('MyButton',{
    extend:'Ext.Action',
    initComponent: function(){
        var me = this;
        var initEnable = true; //初始权限
    }
});
Ext.override(MyButton,{
    mysetenable:function(b){ //增加自定义函数设置按钮权限
        if ( this.initEnable ) {
            if (b){
                this.enable();
            }
            else{
                this.disable();
            }
        }
        else{
            this.disable();
        }
    }
});

再看一个示例,这次定义一个表单面板(Form Panel),并在其 initComponent 方法中动态添加按钮与对应逻辑:

Ext.define('PO_Head_Add_Panel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.PO_Head_Add_Panel',
    //height:400,
    //width:600,
    frame: true,
    layout: 'anchor', //该form分为两列
    bodyPadding: 5, //偏移5px
    //baseCls: "x-plain", //指定使用系统背景色
    //defaults: { anchor: "95%", msgTarget: "side" },
    // anchor: '100%',
    defaults:{
        labelSeparator :':',
        labelWidth : 60,
        allowBlank : false,
        labelAlign : 'right',
        msgTarget :'qtip'
    },
    items:[{
        xtype:'combobox',
        name: 'ToAddress',
        labelWidth:70,
        width:600,
        queryMode: 'local',
        store:TmpAddressStore,
        displayField: 'AddrName',
        valueField: 'AddrName',
        editable : false,
        forceSelection : true,
        msgTarget: 'side',
        allowBlank: false,
        fieldLabel: '送货地址'
    },{
        xtype:'textfield',
        name: 'HRemark',
        labelWidth:70,
        width:600,
        msgTarget: 'side',
        allowBlank: false,
        fieldLabel: '备注'
    }],
    initComponent: function(){
        var me = this;
        var PoType = '';
        var TmpHeadRec = Ext.create('PO_HeadData');

        Ext.apply(this, {
            buttons: [{
                text: '保存',
                handler:function(){
                    if (me.getForm().isValid()) {
                        //保存功能
                    }
                }
            }, {
                text: '取消',
                handler: function () {
                    me.ownerCt.hide();
                }
            }],
            SetFormValue:function(){
                me.TmpHeadRec = HeadStore.getAt(0);
                me.getForm().findField('POType').setValue(me.TmpHeadRec.get('POType'));
                me.getForm().findField('PONum').setValue(me.TmpHeadRec.get('PONum'));
            }
        });

        this.callParent(arguments);
    }
});

Extjs4 类的定义和扩展实例

来源:https://www.jb51.net/article/39220.htm
上一篇ExtJS4.0中数据存储的查找记录方法缺陷演示代码 下一篇Ext JS添加子组件的常见误区与正确方法
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
HTML文档版权声明结构与基础脚手架代码质量解析
前端开发 · 2026-07-07

HTML文档版权声明结构与基础脚手架代码质量解析

版权声明需用语义化``标签,©符号使用`©`实体;年份通过服务端、构建或JS分层兜底;`rel= "license "`仅指向真实许可证文件才有效。

基于HTML模板的组件化全栈交互方案
前端开发 · 2026-07-07

基于HTML模板的组件化全栈交互方案

纯HTML模板仅作静态结构,全栈交互需后端注入数据、前端JS激活模板及用户事件触发双向链路。``标签惰性,不执行脚本或加载资源,需通过克隆填充数据并手动绑定事件实现交互,父子传值依赖JS对象与自定义事件。

Bootstrap修改Badge徽章边框为圆点样式的方法
前端开发 · 2026-07-07

Bootstrap修改Badge徽章边框为圆点样式的方法

将BootstrapBadge改为圆点:自定义类设置等宽高、border-radius:50%、padding:0、font-size:0;Bootstrap5 2+需加display:inline-block;注意垂直对齐,避免min-width干扰,背景色用background-color更可控。

Bootstrap响应式多栏Footer社交图标排版实现
前端开发 · 2026-07-07

Bootstrap响应式多栏Footer社交图标排版实现

使用Bootstrap5的grid系统实现响应式多栏Footer,按断点设置列宽;以FontAwesome处理社交图标,避免使用img;利用list-unstyled组织链接列表;借助flex-column容器配合mt-auto使版权行自动贴底,避免fixed-bottom固定定位的弊端。

如何用Shadow DOM隔离组件内外事件分发
前端开发 · 2026-07-07

如何用Shadow DOM隔离组件内外事件分发

ShadowDOM内部事件默认不穿透影子边界,需显式设置composed:true才能被外部监听。此时event target指向宿主元素,真实触发源需通过event composedPath()[0]获取。原生事件手动派发时也必须声明composed:true。应避免在宿主上依赖event target做逻辑分支,建议在shadowroot内绑定事件或使用