extjs自定义控件

最新推荐文章于 2019-04-10 09:56:41 发布

原创最新推荐文章于 2019-04-10 09:56:41 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #ViewUI

ExtJs 专栏收录该内容

9 篇文章

订阅专栏

// JavaScript Document
Ext.namespace('CRM.Panels');
CRM.Panels.UserDetail = Ext.extend(Ext.Panel,{
     width:350,
height:120,
data:{
       ID: 0,
    FirstName: '',
    LastName: '',
    Email: '',
    City: '',
    Phone:''
},
split:true,
tpl: new Ext.XTemplate([
    '<div>编号：{ID}</div>',
       '<div>姓名：{FirstName}-{LastName}</div>',
    '<div>电话：{Phone}</div>',
    '<div>城市：{City}</div>',
    '<div>邮箱：{Email}</div>'
]),
initComponent:function(){
        CRM.Panels.UserDetail.superclass.initComponent.call(this);
    if(typeof this.tpl === 'string'){
        this.tpl = new Ext.XTemplate(this.tpl);
    }
    this.addEvents('UAlert');//注册新事件
    this.addListener({//侦听函数 www.2cto.com
         UAlert: { //注册的新事件
       fn:this.onAlert,//调用onAlert方法
       scope: this
      }
    });
},
//
onAlert: function(){
    alert('注册的新事件');
},
UAlert:function(){
    this.fireEvent('UAlert');
},
/
onRender: function(ct, position){
          CRM.Panels.UserDetail.superclass.onRender.call(this, ct, position);
    if(this.data){
        this.update(this.data);
    }
},
update: function(data){
   this.data = data;
   this.tpl.overwrite(this.body, this.data);
// this.fireEvent('update',this.data);
}
});

//把新建的自定义组件注册为一种xtype
Ext.reg('UserDetail',CRM.Panels.UserDetail);
/*使用：
items:[
   {
    region:'west',
    xtype:'UserDetail',
    data: userData[0],
    title:'User Detail'
    }
]*/

在页面上：

<button id="xt">点击</button>
<button id="alert">注册的新事件</button>

ExtJS中的面向对象设计,组件化编程思想/**
* @author: Lilf
* Description: ExtJS中的面向对象设计,组件化变成思想
*/
/****************************扩展VTypes类，增加年龄的验证****************************/
Ext.apply(Ext.form.VTypes, {
     "age": function(_v){
         if (/^\d+$/.test(_v)) {
             var intExp = parseInt(_v);
             if (intExp < 200)
                 return true;
         }
         return false;
     },
     ageText: "请输入正确的年龄格式，如：23"
});
/****************************继承自FormPanel的表单组件,用来构件Window***************************/
PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
     constructor: function(){
         PersonInfoFormPanel.superclass.constructor.apply(this, [{
             baseCls: "x-plain",
             buttonAlign: "right",
             labelWidth: 30,
             defaultType: "textfield",
             defaults: {
                 anchor: "95%",
                 labelStyle: "text-align:right"
             },
             items: [{
                 fieldLabel: "姓名",
                 name: "name"
             }, {
                 fieldLabel: "年龄",
                 name: "age",
                 vtype: "age"//验证年龄（通过vtype类型来验证）
             }, {
                 xtype: "combo",
                 mode: "local",//本地数据
                 readOnly: true,
                 fieldLabel: "性别",
                 displayField: "sex",//显示下拉框的内容
                 triggerAction: "all",//在选择时，显示所有的项
                 value: "男",//默认值
                 store: new Ext.data.SimpleStore({
                     fields: ["sex"],
                     data: [["男"], ["女"]]
                 }),
                 name: "sex"//绑定字段
             }]
         }])
     },
     //---以下为PersonInfoFormPanel类对外提供的方法---
     getValues: function(){
         if (this.getForm().isValid())
             return new Ext.data.Record(this.getForm().getValues());
         else
             throw new Error("验证没有通过");//自定义异常
     },
     setValues: function(_r){
         this.getForm().loadRecord(_r);
     },
     reset: function(){
         this.getForm().reset();
     }
});
/**************继承自Window的基类,insertWindow与updateWindow都由此继承****************/
baseWindow = Ext.extend(Ext.Window, {
     form: null,
     constructor: function(){
         this.form = new PersonInfoFormPanel();//实例化PersonInfoFormPanel类
         baseWindow.superclass.constructor.apply(this, [{
             plain: true,
             width: 350,
             //title: "新增人员",
             modal: true,
             resizable: false,
             closeAction: "hide",
             defaults: {
                 style: "padding:5px"
             },
             items: this.form,
             buttons: [{
                 text: "确定",
                 handler: this.onSubmitClick,//提交事件调用
                 scope: this
             }, {
                 text: "取消",
                 handler: this.onCancelClick,//取消事件调用
                 scope: this

             }]
         }]);
         //给insertWindow对象添加事件（事件冒泡）
         this.addEvents("submit");
     },
     //提交事件处理函数
     onSubmitClick: function(){
         try {
             //发布事件
             this.fireEvent("submit", this, this.form.getValues());//调用PersonInfoFormPanel类中自定义的方法getValues
            this.close();

        }
        catch (_err) {
            Ext.Msg.alert("系统提示", _err.description);//扑捉自定义错误或异常
        }
    },
    //取消事件处理函数
    onCancelClick: function(){
        this.close();
    },
    //重置与隐藏事件处理函数
    close: function(){
        this.form.reset();
        this.hide();
    }

});
/*******************insertWindow类****************************/
insertWindow = Ext.extend(baseWindow, {
    title: "新增人员"
});
/*****************updateWindow类******************************/
updateWindow = Ext.extend(baseWindow, {
    title: "修改人员",
    load: function(_r){
        this.form.setValues(_r);
    }
});
/********根据上面组件创建新的GridPanel类,它就像我们根据不同的零件设计出来的汽车************
* ExtJs自定义PersonListGridPanel类
* 该类继承自GridPanel[使用Ext.extend(superClass,override Object)方法实现继承],
* 并override了该类的构造函?hu数
* 构造函数内部继承自GridPanel的构造函数[apply(this,arguments)实现继承]
* 该类实现了如何对外部公布一个事件
* 在构造函数中添加一个事件[this.addEvents("事件名称"）]
* 然后使用this.fireEvent("事件名称",参数）来发布此事?件
* 最后在客户端调用的时候来订阅该事?jian件
*/
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
    _window: null,
    _updateWin: null,
    constructor: function(_url){
        this._window = new insertWindow();//insertWindow对象引用
        this._updateWin = new updateWindow();//updateWindow对象引用
        PersonListGridPanel.superclass.constructor.apply(this, [{
            renderTo: Ext.getBody(),
            width: 550,
            height: 200,
            frame: true,
            layout: "form",
            //工具栏
            tbar: [{
                text: "add",
                handler: function(){
                    this._window.show();
                },
                scope: this
            }, "-", {
                text: "update",
                handler: function(){
                    this._updateWin.show();
                    try {
                        this._updateWin.load(this.getSelected());
                    }


                    catch (_err) {
                        Ext.Msg.alert("系统提示", _err.description);
                        this._updateWin.close();
                    }
                },
                scope: this
            }, "-", {
                text: "delete",
                handler: this.onRemovePerson,
                scope: this
            }],
            enableColumnMove: false,
            //列模板
            columns: [{
                header: "Name",
                menuDisabled: true,
                dataIndex: "name"
            }, {
                header: "Age",
                menuDisabled: true,
                dataIndex: "age"
            }, {
                header: "Sex",
                menuDisabled: true,
                dataIndex: "sex"
            }],
            //数据源
            store: new Ext.data.JsonStore({
                autoLoad: true,
                url: _url,
                fields: ["name", "age", "sex"]
            }),
            //选中模板
            selModel: new Ext.grid.RowSelectionModel({
                singleSelect: true,
                listeners: {
                    "rowselect": {
                        fn: this.onRowSelected,
                        scope: this
                    }
                }
            })

        }]);
        //添加事件
        this.addEvents("rowselect");
        //事件订阅
        this._window.on("submit", this.onInsertWinSubmit, this);
        this._updateWin.on("submit", this.onUpdateWinSubmit, this);
    },
    //----- 以下为自定义方法---------
    //获得选中的记录
    getSelected: function(){
        var _sm = this.getSelectionModel();
        if (_sm.getCount() == 0)
            throw new Error("你没有选中任何记录,请选择一条记录后重试");
        return _sm.getSelected();
    },
    //插入一条记录
    insert: function(_r){
        this.getStore().add(_r);
    },
    //更新选中的记录
    update: function(_r){
        try {
            var _rs = this.getSelected();
            var _data = _rs.data;
            for (var _i in _data) {
                _rs.set(_i, _r.get(_i));
            };
            _rs.commit();
        }
        catch (_err) {

        }

    },
    //删除选中的记录
    remove: function(){
        try {
            var _rs = this.getSelected();
            Ext.Msg.confirm("系统提示", "你确定删除吗?", function(_btn){
                if (_btn == "yes")
                    this.getStore().remove(_rs);
            }, this);
        }
        catch (_err) {
            Ext.Msg.alert("系统提示", _err.description);
        }
    },
    //-------以下为自定义事件处理函数------------
    //添加事件
    onInsertWinSubmit: function(_win, _r){
        this.insert(_r);
    },
    //修改事件
    onUpdateWinSubmit: function(_win, _r){
        this.update(_r);
    },
    //删除事件
    onRemovePerson: function(){
        this.remove();
    },
    //选中事件
    onRowSelected: function(_sel, _index, _r){
        this.fireEvent("rowselect", _r);//发布事件
    }
})

//
如何编写ExtJS自定义控件

// 1、引入命名空间
Ext.namespace("ExtUD.Ext");//相当于java中包的作用
// 2、编写自定义控件类
ExtUD.Ext.UDPanel = Ext.extend(Ext.Panel, {
   title : '自定义控件',
   html:'自定义控件面板',
   layout:'fit',
   getAlert:function(){alert('自定义控件函数！');}
});
// 3、注册控件
Ext.reg('udpanel', ExtUD.Ext.UDPanel);//第一个参数为自定义控件的xtype

//4、使用自定义控件
Ext.onReady(function() {
var temp = new ExtUD.Ext.UDPanel({
renderTo : document.body
});
temp.show();
temp.getAlert();
});