extjs 代码总结

来源：互联网发布：酷狗音乐网络异常编辑：程序博客网时间：2024/06/01 11:25

1：所以显示window 的所需的代码

js代码
1.MyExt.Utils.myWindow = Ext.extend(Ext.Window, {
2.     shadow:false,
3.      closeAction:'hide',
4.     layout:'fit',
5.     closable:true,
6.     resizable:false,
7.     modal:true,
8.     constrain:true,
9.      listeners:{
10.       hide:function(w){
11.                if(w.items){
12.             w.items.each(function(f){
13.                if(f.getXType()=="form"){
14.                        f.form.reset();
15.                }
16.                 });
17.              }
18.       }
19.     },
20.      initComponent: function(config){
21.      Ext.apply(this,config);
22.    MyExt.Utils.myWindow.superclass.initComponent.call(this);
23.    }
24.   });
MyExt.Utils.myWindow = Ext.extend(Ext.Window, {
     shadow:false,
      closeAction:'hide',
     layout:'fit',
     closable:true,
     resizable:false,
     modal:true,
     constrain:true,
      listeners:{
     hide:function(w){
             if(w.items){
          w.items.each(function(f){
           if(f.getXType()=="form"){
               f.form.reset();
           }
             });
           }
     }
     },
      initComponent: function(config){
      Ext.apply(this,config);
    MyExt.Utils.myWindow.superclass.initComponent.call(this);
    }
   });   使用例子：

js代码
1.var win = new MyExt.Utils.myWindow({
2.    height:600
3.    ,width:650
4.    ,items:[form]
5.})
     var win = new MyExt.Utils.myWindow({
      height:600
      ,width:650
      ,items:[form]
     })2:jsonStore

js代码
1.MyExt.Utils.myJsonStore = Ext.extend(Ext.data.JsonStore, {
2.    constructor: function(config){
3.        var cfg = {
4.              totalProperty: "totalCount",//总数
5.              root: "items",//grid的数据
6.              autoLoad:false, //是否自动加载
7.              autoDestroy:true, //自动销毁
8.              idProperty: 'id' //一个数据对象的参数名，它包含了一条记录的标识符。默认为 id
9.
10.        };
11.        //把cfg对象的所有属性覆盖到congfig对象里面
12.        //如果congfig对象已经存在cfg的属性则不覆盖
13.        Ext.applyIf(config,cfg);
14.        MyExt.Utils.myJsonStore.superclass.constructor.call(this,config);
15.    }
16.});
MyExt.Utils.myJsonStore = Ext.extend(Ext.data.JsonStore, {
    constructor: function(config){
    var cfg = {
        totalProperty: "totalCount",//总数
     root: "items",//grid的数据
     autoLoad:false, //是否自动加载
     autoDestroy:true, //自动销毁
     idProperty: 'id' //一个数据对象的参数名，它包含了一条记录的标识符。默认为 id

    };
    //把cfg对象的所有属性覆盖到congfig对象里面
    //如果congfig对象已经存在cfg的属性则不覆盖
        Ext.applyIf(config,cfg);
        MyExt.Utils.myJsonStore.superclass.constructor.call(this,config);
    }
}); 使用例子：

js代码
1.store = new MyExt.Utils.myJsonStore({
2.                        url:"....action",
3.                        fields:[
4.                                    {"name":"yyshd","type":"string","mapping":"yyshd"},
5.                                    {"name":"hm","type":"string","mapping":"hm"},
6.                                    {"name":"sf","type":"string","mapping":"sf"},
7.                                    {"name":"ds","type":"string","mapping":"ds"},
8.                                    {"name":"yysid","type":"int","mapping":"yysid"},
9.                                    {"name":"qy","type":"int","mapping":"qy"}
10.                                ]
11.                    });
store = new MyExt.Utils.myJsonStore({
            url:"....action",
            fields:[
               {"name":"yyshd","type":"string","mapping":"yyshd"},
               {"name":"hm","type":"string","mapping":"hm"},
               {"name":"sf","type":"string","mapping":"sf"},
               {"name":"ds","type":"string","mapping":"ds"},
               {"name":"yysid","type":"int","mapping":"yysid"},
               {"name":"qy","type":"int","mapping":"qy"}
                 ]
        }); 3:行提示

js代码
1.function showGjToolTip(_grid){
2.                var _store = _grid.getStore();
3.                var view = _grid.getView();
4.                _grid.tip = new Ext.ToolTip ({
5.                    target:view.mainBody,
6.                    delegate:'.x-grid3-row',
7.                    trackMouse :true,
8.                    width:230,
9.                    autoHide:true,
10.                    title:"告警信息",
11.                    dismissDelay:5000, //默认5秒后提示框消失
12.                    frame:true,
13.                    renderTo:document.body,
14.                    bodyStyle:"color:red",//字体颜色
15.                    //floating:{shadow:false,shim:true,useDisplay:true,constrain:false},
16.                    listeners:{
17.                        beforeshow:function updateTipBody(tip){
18.                            var rowIndex = view.findRowIndex(tip.triggerElement);
19.                            if(_store.getAt(rowIndex).get("sfgj")==0){
20.                                return false;
21.                                tip.destroy();
22.                            }else{
23.                                tip.body.dom.innerHTML=_store.getAt(rowIndex).get("gjxx");
24.                            }
25.                        }
26.                    }
27.    })
28.}
function showGjToolTip(_grid){
   var _store = _grid.getStore();
     var view = _grid.getView();
      _grid.tip = new Ext.ToolTip ({
     target:view.mainBody,
     delegate:'.x-grid3-row',
     trackMouse :true,
     width:230,
     autoHide:true,
     title:"告警信息",
     dismissDelay:5000, //默认5秒后提示框消失
     frame:true,
     renderTo:document.body,
     bodyStyle:"color:red",//字体颜色
     //floating:{shadow:false,shim:true,useDisplay:true,constrain:false},
     listeners:{
      beforeshow:function updateTipBody(tip){
       var rowIndex = view.findRowIndex(tip.triggerElement);
       if(_store.getAt(rowIndex).get("sfgj")==0){
        return false;
        tip.destroy();
       }else{
        tip.body.dom.innerHTML=_store.getAt(rowIndex).get("gjxx");
       }
      }
     }
})
}4:获得一个不带复选框的树的所有子节点的id

js代码
1. function getTreeChildIds(node){
2.var r = [];
3.var f = function(){
4.        r.push(this.id);
5.};
6.node.cascade(f);
7.        return r;
8. }
            function getTreeChildIds(node){
           var r = [];
           var f = function(){
                   r.push(this.id);
           };
           node.cascade(f);
                   return r;
            } 调用例子

js代码
1.var rootNode = tree.getRootNode();   //获取主节点
2.             var result = getTreeChildIds(rootNode );
3.            alert(result );
      var rootNode = tree.getRootNode();   //获取主节点
                   var result = getTreeChildIds(rootNode );
                  alert(result ); 5：对Ext中DateField字段的扩展（转自： http://gaoliujie.jseye.com/blog/703839 ）

Ext中的DateField字段默认显示格式为'm/d/Y'，不太符合中国的使用习惯，以'-'号隔开，或直接显示'xxxx年x月x日'的格式，并且在同一个软件系统中，通常情况会希望日期的显示格式都相同，不要在每个页面中单独设置显示样式。

另外，由于后台传输到前台的格式一般都是js中的Date类型，直接传输到前台会因为Ext中的时区设置问题造成转换错。

基于以上原因，扩展Ext中的DateField字段类型，代码如下所示：

js代码
1.justgin.bap.DateFieldEx = Ext.extend(Ext.form.DateField,{
2.    format:"Y-m-d",
3.
4.    initComponent: function() {
5.        this.hideTrigger = this.readOnly;
6.        justgin.bap.DateFieldEx.superclass.initComponent.call(this);
7.    },
8.
9.    setValue:function(value){
10.        var date = this.formatDate2(value);
11.        justgin.bap.DateFieldEx.superclass.setValue.call(this, date);
12.    },
13.
14.    // private ,ext自己有个formatDate方法，因此这里用formatDate2
15.    formatDate2 : function(date){
16.        //CST时间和UTC时差转换
17.        var dateStr=date.toString();
18.        var position=dateStr.indexOf("UTC");
19.        if(position!=-1){
20.            return Ext.util.Format.date(date, this.format);
21.        }else{
22.            var vdate=new Date(date); //后台默认为格林尼治时间，该方法会默认把后台时间认为是北京时间，北京时间比格林尼治时间多14小时。
23.            //找出当地时间偏移值的毫秒数
24.            var localOffset=vdate.getTimezoneOffset()*60000;
25.            var utcOffset= vdate.getTime() + localOffset;
26.            timezone=utcOffset-6*3600000;//
27.            var lastDate=new Date(timezone);
28.            return Ext.util.Format.date(lastDate, this.format);
29.        }
30.    }
31.});
justgin.bap.DateFieldEx = Ext.extend(Ext.form.DateField,{
format:"Y-m-d",

initComponent: function() {
  this.hideTrigger = this.readOnly;
  justgin.bap.DateFieldEx.superclass.initComponent.call(this);
},

setValue:function(value){
  var date = this.formatDate2(value);
  justgin.bap.DateFieldEx.superclass.setValue.call(this, date);
},

// private ,ext自己有个formatDate方法，因此这里用formatDate2
    formatDate2 : function(date){
        //CST时间和UTC时差转换
        var dateStr=date.toString();
        var position=dateStr.indexOf("UTC");
        if(position!=-1){
        return Ext.util.Format.date(date, this.format);
        }else{
        var vdate=new Date(date); //后台默认为格林尼治时间，该方法会默认把后台时间认为是北京时间，北京时间比格林尼治时间多14小时。
         //找出当地时间偏移值的毫秒数
         var localOffset=vdate.getTimezoneOffset()*60000;
         var utcOffset= vdate.getTime() + localOffset;
         timezone=utcOffset-6*3600000;//
         var lastDate=new Date(timezone);
     return Ext.util.Format.date(lastDate, this.format);
        }
    }
});

6：对Ext中CheckBox的扩展（转自：http://gaoliujie.jseye.com/blog/703833 ）

使用Ext中的Checkbox时，经常需要随form一起提交，但Checkbox设置的默认的提交值为"on"或""，后台代码中需要对字段的提交进行判断后取值，不符合我们通常的使用习惯，即直接将提交的值转换为对应的boolean类型，为此，特进行扩展和封装，以满足通过的使用方式，代码如下：

js代码
1.justgin.bap.CheckboxEx = Ext.extend(Ext.form.Checkbox, {
2.    trueValue: true,
3.    falseValue: false,
4.    hiddenField: {value:''},
5.
6.    onRender : function(ct, position){
7.        justgin.bap.CheckboxEx.superclass.onRender.call(this, ct, position);
8.        var hidden = this.el.insertSibling({tag:'input', type:'hidden', name: this.name}, 'before', true);
9.        hidden.value = this.hiddenField.value;
10.        this.hiddenField = hidden;
11.        this.el.dom.removeAttribute('name');
12.        this.on('check', this.onCheck);
13.    },
14.
15.    setValue : function(v){
16.        var me = this;
17.        justgin.bap.CheckboxEx.superclass.setValue.call(this, v);
18.        this.hiddenField.value = this.checked?me.trueValue:me.falseValue;
19.    },
20.
21.    getValue : function(v){
22.        return this.hiddenField.value;
23.    },
24.
25.    onDestroy : function(){
26.        Ext.destroy(this.wrap);
27.        justgin.bap.CheckboxEx.superclass.onDestroy.call(this);
28.    },
29.
30.    onCheck : function(me, checked){
31.        this.hiddenField.value = checked?me.trueValue:me.falseValue;
32.    }
33.
34.);
justgin.bap.CheckboxEx = Ext.extend(Ext.form.Checkbox, {
  trueValue: true,
  falseValue: false,
  hiddenField: {value:''},

  onRender : function(ct, position){
     justgin.bap.CheckboxEx.superclass.onRender.call(this, ct, position);
     var hidden = this.el.insertSibling({tag:'input', type:'hidden', name: this.name}, 'before', true);
     hidden.value = this.hiddenField.value;
     this.hiddenField = hidden;
     this.el.dom.removeAttribute('name');
     this.on('check', this.onCheck);
     },

     setValue : function(v){
     var me = this;
     justgin.bap.CheckboxEx.superclass.setValue.call(this, v);
     this.hiddenField.value = this.checked?me.trueValue:me.falseValue;
     },

     getValue : function(v){
     return this.hiddenField.value;
     },

     onDestroy : function(){
         Ext.destroy(this.wrap);
         justgin.bap.CheckboxEx.superclass.onDestroy.call(this);
     },

  onCheck : function(me, checked){
         this.hiddenField.value = checked?me.trueValue:me.falseValue;
     }

});

•扩展两个属性trueValue和falseValue，可提供使用者指定选中或取消时提交的值，默认为true和false。
•重写字段的onRender方法，在render时，移除用来展示的html的input元素的名称，插入一个的同名hidden元素，保存要提交的值，不改变使用方式的前提下，能保证from在提交时，将插入的新元素提交，确保了设置的值会提交到后台。
•重写setValue和getValue方法，保证了存取值时数据的同步。
•常用的Ext创建对象的方式有两种：new justgin.bap.CheckboxEx()和Ext.create({xtype: 'checkbox'})，要想使用户在使用第二种方式时创建一个自己扩展的对象，可以在类的声明后加入一句对象类型的注册语句即可
•Ext.reg('checkbox', justgin.bap.CheckboxEx);

7:grid 上移下移

js代码
1.        Ext.apply(Ext.grid.GridPanel.prototype, {
2.            moveUp : function() {
3.    var d = this.getStore();
4.    var c = this.getColumnModel();
5.    var r = this.getSelectionModel().getSelections();
6.    var idx;
7.    if (r.length == 0) {
8.        Ext.Msg.alert('提示', '请选择记录进行操作！');
9.        return;
10.    }
11.    if (r.length == d.getCount())
12.        return;
13.    if (d.indexOf(r[0]) == 0)
14.        return;
15.    for (var i = 0; i < r.length; i++) {
16.        idx = d.indexOf(r[i]) - 1;
17.        d.remove(r[i]);
18.        d.insert(idx, r[i]);
19.    }
20.    this.getSelectionModel().selectRow(idx);
21.    this.reconfigure(d, c);
22.},
23.moveDown : function() {
24.    var d = this.getStore();
25.    var c = this.getColumnModel();
26.    var r = this.getSelectionModel().getSelections();
27.    var idx;
28.    var idx;
29.    var len = r.length;
30.    if (len == 0) {
31.        Ext.Msg.alert('提示', '请选择记录进行操作！');
32.        return;
33.    }
34.    if (len == d.getCount())
35.        return;
36.    if (d.indexOf(r[len - 1]) == d.getCount() - 1)
37.        return;
38.    for (var i = 0; i < len; i++) {
39.        idx = d.indexOf(r[len - i - 1]) + 1;
40.        d.remove(r[len - i - 1]);
41.        d.insert(idx, r[len - i - 1]);
42.    }
43.    this.getSelectionModel().selectRow(idx);
44.    this.reconfigure(d, c);
45.}
46.);
      Ext.apply(Ext.grid.GridPanel.prototype, {
       moveUp : function() {
     var d = this.getStore();
     var c = this.getColumnModel();
     var r = this.getSelectionModel().getSelections();
     var idx;
     if (r.length == 0) {
      Ext.Msg.alert('提示', '请选择记录进行操作！');
      return;
     }
     if (r.length == d.getCount())
      return;
     if (d.indexOf(r[0]) == 0)
      return;
     for (var i = 0; i < r.length; i++) {
      idx = d.indexOf(r[i]) - 1;
      d.remove(r[i]);
      d.insert(idx, r[i]);
     }
     this.getSelectionModel().selectRow(idx);
     this.reconfigure(d, c);
    },
    moveDown : function() {
     var d = this.getStore();
     var c = this.getColumnModel();
     var r = this.getSelectionModel().getSelections();
     var idx;
     var idx;
     var len = r.length;
     if (len == 0) {
      Ext.Msg.alert('提示', '请选择记录进行操作！');
      return;
     }
     if (len == d.getCount())
      return;
     if (d.indexOf(r[len - 1]) == d.getCount() - 1)
      return;
     for (var i = 0; i < len; i++) {
      idx = d.indexOf(r[len - i - 1]) + 1;
      d.remove(r[len - i - 1]);
      d.insert(idx, r[len - i - 1]);
     }
     this.getSelectionModel().selectRow(idx);
     this.reconfigure(d, c);
    }
   });

8：自定义事件来自我的ext群：23334375中的中国加油所写

js代码
1.<script type="text/jsscript">
2.Ext.onReady(function(){
3.
4. Ext.ExtendPanel= Ext.extend(Ext.Panel,{
5.    initComponent:function(){
6.        Ext.ExtendPanel.superclass.initComponent.call(this);
7.         this.addEvents("click");
8.    },
9.    onRender: function(ct, position){
10.          Ext.ExtendPanel.superclass.onRender.apply(this, arguments);
11.           var c = this.body;
12.          c.on("click", this.onClick, this);
13.    },
14.    onClick:function(e){
15.         this.fireEvent("click", e);
16.    }
17.   });
18.
19.    var ep=new Ext.ExtendPanel({
20.            renderTo:'panel',
21.            width:500,
22.            height:500,
23.            html:'点击试试',
24.            listeners:{
25.                click:function(e){
26.                    alert("被点击了!"+e.getTarget());
27.                }
28.            }
29.    });
30.});
31.        </script>
32.    </head>
33.    <body>
34.        <div id="panel"></div>
35.    </body>
36.</html>
<script type="text/jsscript">
Ext.onReady(function(){

Ext.ExtendPanel= Ext.extend(Ext.Panel,{
initComponent:function(){
  Ext.ExtendPanel.superclass.initComponent.call(this);
   this.addEvents("click");
},
onRender: function(ct, position){
    Ext.ExtendPanel.superclass.onRender.apply(this, arguments);
     var c = this.body;
    c.on("click", this.onClick, this);
},
onClick:function(e){
   this.fireEvent("click", e);
}
   });

UI定义

js代码
1.// Account.ui.js 定义UI
2.
3. AccountUi = Ext.extend(Ext.form.FormPanel, {
4.    title: 'Account',
5.    labelWidth: 100,
6.    labelAlign: 'left',
7.    layout: 'form',
8.    width: 600,
9.    frame: true,
10.    initComponent: function() {
11.        this.items = [
12.            {
13.                xtype: 'container',
14.                autoEl: 'div',
15.                layout: 'column',
16.                items: [
17.                    {
18.                        xtype: 'container',
19.                        autoEl: 'div',
20.                        layout: 'form',
21.                        columnWidth: 0.5,
22.                        items: [
23.                            {
24.                                xtype: 'textfield',
25.                                fieldLabel: 'First Name',
26.                                anchor: '95%',
27.                                name: 'fname',
28.                                ref: '../../fname'
29.                            },
30.                            {
31.                                xtype: 'datefield',
32.                                fieldLabel: 'Birth of day',
33.                                anchor: '95%',
34.                                name: 'birthday',
35.                                ref: '../../birthday'
36.                            }
37.                        ]
38.                    },
39.                    {
40.                        xtype: 'container',
41.                        autoEl: 'div',
42.                        layout: 'form',
43.                        columnWidth: 0.5,
44.                        items: [
45.                            {
46.                                xtype: 'textfield',
47.                                fieldLabel: 'Last Name',
48.                                anchor: '95%',
49.                                name: 'lname',
50.                                ref: '../../lname'
51.                            },
52.                            {
53.                                xtype: 'combo',
54.                                fieldLabel: 'Sex',
55.                                anchor: '95%',
56.                                name: 'sex',
57.                                ref: '../../sex'
58.                            }
59.                        ]
60.                    }
61.                ]
62.            },
63.            {
64.                xtype: 'htmleditor',
65.                anchor: '98%',
66.                fieldLabel: 'Memo',
67.                height: 150,
68.                width: 300,
69.                name: 'memo',
70.                ref: 'memo'
71.            }
72.        ];
73.        this.fbar = {
74.            xtype: 'toolbar',
75.            items: [
76.                {
77.                    xtype: 'button',
78.                    text: 'Save',
79.                    ref: '../saveBtn'
80.                },
81.                {
82.                    xtype: 'button',
83.                    text: 'Reset',
84.                    ref: '../resetBtn'
85.                }
86.            ]
87.        };
88.        AccountUi.superclass.initComponent.call(this);
89.    }
90.});
// Account.ui.js 定义UI

 AccountUi = Ext.extend(Ext.form.FormPanel, {
    title: 'Account',
    labelWidth: 100,
    labelAlign: 'left',
    layout: 'form',
    width: 600,
    frame: true,
    initComponent: function() {
        this.items = [
            {
                xtype: 'container',
                autoEl: 'div',
                layout: 'column',
                items: [
                    {
                        xtype: 'container',
                        autoEl: 'div',
                        layout: 'form',
                        columnWidth: 0.5,
                        items: [
                            {
                                xtype: 'textfield',
                                fieldLabel: 'First Name',
                                anchor: '95%',
                                name: 'fname',
                                ref: '../../fname'
                            },
                            {
                                xtype: 'datefield',
                                fieldLabel: 'Birth of day',
                                anchor: '95%',
                                name: 'birthday',
                                ref: '../../birthday'
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        autoEl: 'div',
                        layout: 'form',
                        columnWidth: 0.5,
                        items: [
                            {
                                xtype: 'textfield',
                                fieldLabel: 'Last Name',
                                anchor: '95%',
                                name: 'lname',
                                ref: '../../lname'
                            },
                            {
                                xtype: 'combo',
                                fieldLabel: 'Sex',
                                anchor: '95%',
                                name: 'sex',
                                ref: '../../sex'
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'htmleditor',
                anchor: '98%',
                fieldLabel: 'Memo',
                height: 150,
                width: 300,
                name: 'memo',
                ref: 'memo'
            }
        ];
        this.fbar = {
            xtype: 'toolbar',
            items: [
                {
                    xtype: 'button',
                    text: 'Save',
                    ref: '../saveBtn'
                },
                {
                    xtype: 'button',
                    text: 'Reset',
                    ref: '../resetBtn'
                }
            ]
        };
        AccountUi.superclass.initComponent.call(this);
    }
});   BL和事件处理

js代码
1.// Account.js 处理业务逻辑和事件关于如何引用到Form中的变量, 请参考组件的 ref 的定义与配置
2.
3.Account = Ext.extend(AccountUi, {
4.    initComponent: function() {
5.        Account.superclass.initComponent.call(this);
6.
7.        this.saveBtn.on('click', this.doSaveAction, this);
8.    },
9.    doSaveAction: function() {
10.        alert('do business A....');
11.        alert('do business B....');
12.    }
13.});
// Account.js 处理业务逻辑和事件关于如何引用到Form中的变量, 请参考组件的 ref 的定义与配置

Account = Ext.extend(AccountUi, {
    initComponent: function() {
        Account.superclass.initComponent.call(this);

        this.saveBtn.on('click', this.doSaveAction, this);
    },
    doSaveAction: function() {
        alert('do business A....');
        alert('do business B....');
    }
});   组织

js代码
1.// index.js
2.
3.Ext.onReady(function() {
4.
5.    var account = new Account({
6.        renderTo: Ext.getBody()
7.    });
8.
9.    account.show();
10.
11.});
// index.js

Ext.onReady(function() {

    var account = new Account({
        renderTo: Ext.getBody()
    });

account.show();

}); 上面的显示效果：

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhaoqiliang527/archive/2010/09/15/5887020.aspx