关于extjs的一个方法的信息

发布时间：2023-12-08

关于extjs的一个方法的信息

更新：<time datetime="2022-11-15 02:49">2022-11-15 02:49</time>

本文目录一览：

  1. extjs怎么自定义函数
  2. ExtJs中怎么上传文件
  3. extjs函数调用方法

extjs怎么自定义函数

extjs的自定义事件主要分三步 1.在类中定义事件名称：

Person = function(config) {
    Person.superclass.constructor.call(this, config);
    this.name = config.name || '';
    this.sex = config.sex || '';
    this.addEvents({
        "nameChange": true,
        "sexChange": true
    });
};

2.实例化对象，并在该对象中定义事件的监听函数

var person = new Person({
    name: 'binoruv',
    sex: 'man'
});
person.on("nameChange", function() { alert("Name has been changed to " + this.name); });
person.on("sexChange", function() { alert("Sex has been changed to " + this.sex); });

3.触发事件

Ext.extend(Person, Ext.util.Observable, {
    //extend函数中可以自定义新的方法，也可以重写原类的方法
    setName: function(_name) {
        if (this.name != _name) {
            this.name = _name;
            this.fireEvent("nameChange", this);
        }
    },
    setSex: function(_sex) {
        if (this.sex != _sex) {
            this.sex = _sex;
            this.fireEvent("sexChange", this);
        }
    }
});
person.setName("binoruv");
person.setSex("woman");

整个代码如下：

Person = function(config) {
    /*
    此处addEvents是调用Person父类Ext.util.Observable的方法
    api中对Observable的描述：一个抽象基类（Abstract base class），为事件
    机制的管理提供一个公共接口。子类应有一个"events"属性来
    定义所有的事件。
    */
    Person.superclass.constructor.call(this, config);
    this.name = config.name || '';
    this.sex = config.sex || '';
    this.addEvents({
        "nameChange": true,
        "sexChange": true
    });
};
Ext.extend(Person, Ext.util.Observable, {
    setName : function(_name) {
        if (this.name != _name) {
            this.name = _name;
            this.fireEvent("nameChange", this);
        }
    },
    setSex : function(_sex) {
        if (this.sex != _sex) {
            this.sex = _sex;
            this.fireEvent("sexChange", this);
        }
    }
});
Ext.onReady(function() {
    var person = new Person({
        name: 'binoruv',
        sex: 'Man'
    });
    person.on("nameChange", function() { /*debugger;*/Ext.Msg.alert("Message","Name has been changed to " + this.name); });
    person.on("sexChange", function() { /*debugger;*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex); });
    person.setName("binoruv");
    person.setSex("Woman");
});

ExtJs中怎么上传文件

下面为大家介绍在ExtJs中上传文件的几种方法

第一种方法：传统的上传方式

在formpanal中增加一个fileUpload的属性 例子代码：

Ext.onReady(function(){
    var form = new Ext.form.FormPanel({
        renderTo:'file',
        labelAlign: 'right',
        title: '文件上传',
        labelWidth: 60,
        frame:true,
        url: '服务器处理上传功能的url地址',//fileUploadServlet
        width: 300,
        height:200,
        fileUpload: true,
        items: [{
            xtype: 'textfield',
            fieldLabel: '文件名',
            name: 'file',
            inputType: 'file'//文件类型
        }],
        buttons: [{
            text: '上传',
            handler: function() {
                form.getForm().submit({
                    success: function(form, response){
                        Ext.Msg.alert('信息', response.result.msg);
                    },
                    failure: function(){
                        Ext.Msg.alert('错误', '文件上传失败');
                    }
                });
            }
        }]
    });
});

第二种方法：借助Ext.ux.UploadDialog.Dialog的组件，在编码时需要导入两个文件

需要引入 Ext.ux.UploadDialog 样式文件 和 Ext.ux.UploadDialog.packed 脚本文件。 例子代码：

//在使用此方法进行文件上传时，其后台往页面的返回值类型是这样的：
//{'success':true,'message':'上传成功'}
//如果没有success:true，无论上传成功与否，显示的都是上传失败，其实这个和form.submit()的提交方式是一个道理。
var dialog = new Ext.ux.UploadDialog.Dialog({
    autoCreate: true,
    closable: true,
    collapsible: false,
    draggable: true,
    minWidth: 400,
    minHeight: 200,
    width: 400,
    height: 350,
    permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','xls','XLS'],
    proxyDrag: true,
    resizable: true,
    constraintoviewport: true,
    title: '文件上传',
    url:'用于处理上传文件功能的Url',
    reset_on_hide: false,
    allow_close_on_upload: true ,
    upload_autostart: false
});
//定义上传文件的按钮
var btnShow = new Ext.Button({
    text:'上传文件',
    listeners:{
        click:function(btnThis,eventobj){
            dialog.show();
        }
    }
});

extjs函数调用方法

当前this所引用的作用域已经改变了,可简单修改为

init: function() {
    var me = this;//保存作用域
    this.control({
        'userlist textfield[id=searchId]':{
            keyup:function(textfield, e){
                if (e.getKey() == 13) {
                    me.searchUserByEnter(textfield); //调用原作用域方法
                }
            }
        }
    });
}

规范点可参照extjs写成scope参数控制this

推荐文章