extjs 自己的小小总结

babydeed

浏览: 235721 次
性别:
来自: 北京

最近访客更多访客>>

xuganggogo

lieutc2010

asd1112131

stranger306

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT UI C C++C#

总结自己的代码可能以后会用到记录一下方便以后查阅

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

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);   
    }   
   });

使用例子：

   		var win = new MyExt.Utils.myWindow({
   			height:600
   			,width:650
   			,items:[form]
   		})

2:jsonStore

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);
    }
});

使用例子：

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:行提示

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

            function getTreeChildIds(node){
			        var r = [];
			        var f = function(){
			                r.push(this.id);
			        };
			        node.cascade(f);
              	    return r;
            }

调用例子

      var rootNode = tree.getRootNode();   //获取主节点
                   var result = getTreeChildIds(rootNode );
                  alert(result );

5：对Ext中DateField字段的扩展（转自： http://gaoliujie.iteye.com/blog/703839 ）

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

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

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

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.iteye.com/blog/703833 ）

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

	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 上移下移

    		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中的中国加油所写

<script type="text/javascript">
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);
	}
   });

	var ep=new Ext.ExtendPanel({
			renderTo:'panel',
			width:500,
			height:500,
			html:'点击试试',
			listeners:{
				click:function(e){
					alert("被点击了!"+e.getTarget());
				}
			}
	});
});
        </script>
    </head>
    <body>
        <div id="panel"></div>
    </body>
</html>

9:五步掌握Ext的拖放好文章地址：

http://blog.csdn.net/zhangxin09/archive/2010/05/03/5551665.aspx

10:Ext extend解释好文章

http://kaizhongfan.blog.163.com/blog/static/108708240201012411257716/

http://damoqiongqiu.iteye.com/blog/370591

11:用户界面与业务逻辑的解耦(来自：http://nickevin.iteye.com/blog/691340)

UI定义

// Account.ui.js 定义UI

&nbsp;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和事件处理

// 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....');
    }
});

组织

// index.js

Ext.onReady(function() {

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

    account.show();

});

上面的显示效果：

未完总结中...

分享到：

ExtJs Grid分页时序号自增的实现 | 基于java的properties文件读写操作工具类( ...

2010-08-13 21:15
浏览 3287
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论