脉脉的Ext之旅

好久没写点东西了，今天花了点时间整理了最近这段时间的ext应用开发， 分享分享！

通过Ext.Ajax.request来获取初始化数据或进行异步请求：

Ext.Ajax.request({
				async : false,
				method : "post",
				url : URL_Index.getInitData,
				params : {},
				success : function(response, opts) {
					try{
						window.initJsonData = Ext.util.JSON
								.decode(response.responseText);
					}catch(e){
						alert("初始化数据获取错误!");
					}
				},
				failure : function(response, opts) {
					alert("初始化数据获取失败!");
				}
			});

创建Ext.form.ComboBox：

new Ext.form.ComboBox({
	//fieldLabel : 'State',
	hiddenName : 'rparammap.managerType',
	editable : false,
	name : 'rparammap.managerType',
	store : new Ext.data.JsonStore({
				id : 0,
				fields : ['stateCode', 'stateName'],
				data : [{"stateCode":"2","stateName":"普通用户"},{"stateCode":"1","stateName":"管理员"},{"stateCode":"0","stateName":"超级管理员"}]
			}),
	valueField : 'stateCode',
	displayField : 'stateName',
	typeAhead : true,
	allowBlank:false,
	mode : 'local',
	triggerAction : 'all',
	selectOnFocus : true
})
									})	

window窗体封装：

/**
 * window 弹出窗体
 * 
 */
PanelWindow = function(config) {
	config = config || {};

	Ext.applyIf(config, {
		loadMask: {msg: '正在加载数据......'},
		columnLines	: true,
		stripeRows	: true,
		view: new Ext.grid.GroupingView({
			autoFill: true,
			forceFit: true,
			showGroupName: true,
			enableNoGroups: false,
			hideGroupedColumn: true
		})
	});
	
	var vWidth=config.vWidth ? config.vWidth : 500;
	var vHeight = config.vHeight ? config.vHeight : 300;
	var vTitle = config.vTitle ? config.vTitle : "无标题";
	var vIconCls = config.vIconCls ? config.vIconCls : "";
	
	this.viewWindow = new Ext.Window({
                layout:'fit',
                title : vTitle,
                iconCls : vIconCls,
                width:vWidth,
                height:vHeight,
                closeAction:'hide',
                plain: true,
				frame: true,
				modal: true,
				buttonAlign: 'center',
				items:config.formPanel
            });
            
	PanelWindow.superclass.constructor.call(this, config);
};

Ext.extend(PanelWindow, Ext.grid.GridPanel, {
	openWindow:function(){         
        this.viewWindow.show();
	},
	closeWindow: function(){
		 this.viewWindow.hide();
	}
});

封装了PanelWindow的表单基类BaseFormPanel：

/**
 * 表单基类
 * 
 * @type Form
 */
BaseFormPanel = function(config) {
	Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
	config = config || {};
	Ext.applyIf(config, {
				loadParam : {
					id : 'id',
					field : 'id'
				},
				varientParam : {} //变量参数
			});

	BaseFormPanel.superclass.constructor.call(this, config);

	this.viewWindow = new PanelWindow({
				formPanel : this,
				vWidth : config.vWidth,
				vHeight : config.vHeight,
				vTitle : config.vTitle,
				vIconCls : config.vIconCls
			});
};

Ext.extend(BaseFormPanel, Ext.form.FormPanel, {
			state : 0,
			//设置变量参数
			setVarientParam:function(v){
				this.varientParam = v;
			},
			//获得变量参数
			getVarientParam:function(){
				return this.varientParam;
			},
			openWindow : function() {
				this.viewWindow.openWindow();
			},
			closeWindow : function() {
				this.viewWindow.closeWindow();
			},
			reset : function() {
				
				this.form.items.each(function(f) {
							if(!f.isVisible() || !f.isXType("displayfield")){
								f.originalValue = '';
							}
						});
				
				this.form.reset();
			},
			/**
			 * 加载数据失败
			 */
			loadFailure : function(form, action) {
				if(action.result && action.result.msg){
					Ext.Msg.alert('提示信息', action.result.msg);
				}else{
					Ext.Msg.alert('提示信息', '数据加载失败！');
				}
			},

			submitFailure : function(form, action) {
				if(action.result && action.result.msg){
					Ext.Msg.alert('提示信息', action.result.msg);
				}else{
					Ext.Msg.alert('提示信息', '数据保存失败！');
				}
			},
			/**
			 * 加载数据成功
			 */
			loadSuccess : function(form, action) {

			},

			submitSuccess : function(form, action) {

				this.state = 0;
				if (!this.isSaveAndAdd) {
					var task = new Ext.util.DelayedTask(function(){
					    //window.location.reload();
					    this.reload();
					});
					this.closeWindow();
					Ext.example.msg('温馨提示', '操作成功!');
					task.delay(2200); 
					/*
					Ext.Msg.show({
								title : '温馨提示',
								msg : '操作成功!',
								buttons : Ext.Msg.OK,
								fn : function() {
									window.location.reload();
								},
								animEl : 'elId',
								icon : Ext.MessageBox.OK
							});
*/
					// this.closeWindow();
				}
				// this.grid.store.reload();
				this.reset();

			},
			_success : function(form, action) {
				if (action.type === 'load') {
					this.loadSuccess(form, action);
				} else {
					this.submitSuccess(form, action);

				}
			},
			_failure : function(form, action) {
				if (action.failureType == action.CLIENT_INVALID)
					if (action.result) {
						if (action.result.exception) {
							Ext.Msg.alert("错误提示", action.result.exception);
							return;
						}
						if (action.result.message) {
							Ext.Msg.alert("错误提示", action.result.message);
							return;
						}
					}
				if (action.type === 'load') {
					this.loadFailure(form, action);
				} else {
					this.submitFailure(form, action);
				}
			},
			/**
			 * 加载数据
			 */
			loadData : function(options) {
				options = options || {};
				// var record = this.grid.selModel.getSelected();
				// var field = record.get(this.loadParam.field);
				// var params = Ext.util.JSON.decode("{'" + this.loadParam.id +
				// "' : '" + field + "'}");
				Ext.applyIf(options, {
							method : 'post',
							url : this.loadUrl,
							// params: params,
							scope : this,
							success : this._success,
							failure : this._failure,
							waitTitle : this.loadWaitTitle || '请稍候',
							waitMsg : this.loadWaitMsg || '正在加载表单数据，请稍候...'
						});

				this.form.load(options);
				this.state = 1;
			},
			/**
			 * 提交数据
			 */
			submitData : function(options) {
				options = options || {};
				this.isSaveAndAdd = options.isSaveAndAdd || false;
				Ext.applyIf(options, {
							params:{"annexSeq":this.annexSeq},
							method : 'post',
							url : this.url,
							scope : this,
							timeout : 10,
							clientValidation : true,
							success : this._success,
							failure : this._failure,
							waitTitle : this.submitWaitTitle || '请稍候',
							waitMsg : this.submitWaitMsg || '正在保存表单数据，请稍候...'
						});
				this.form.submit(options);
			}

			,
			/**
			 * 更新数据
			 */
			commitDate : function(options) {

				options = options || {};
				this.isSaveAndAdd = options.isSaveAndAdd || false;
				Ext.applyIf(options, {
							method : 'post',
							url : this.url,
							scope : this,
							timeout : 10,
							clientValidation : true,
							success : this._success,
							failure : this._failure,
							waitTitle : this.submitWaitTitle || '请稍候',
							waitMsg : this.submitWaitMsg || '正在更新表单数据，请稍候...'
						});
				this.form.submit(options);

			},

			uploadData : function(options) {
				// alert(document.all.file.value)
				options = options || {};
				this.isSaveAndAdd = options.isSaveAndAdd || false;
		
				Ext.applyIf(options, {
							method : 'post',
							url : this.uploadUrl,
							scope : this,
							//timeout : 10,
							clientValidation : true,
							success : function(form, action) {
								if(action.success){
									//Ext.Msg.alert("温馨提示", "文件上传成功!");
									 Ext.example.msg('温馨提示', '文件上传成功!');
								}else{
									Ext.Msg.alert("温馨提示", "文件上传失败!");
								}
							},
							failure : function(form, action) {
								Ext.Msg.alert("温馨提示", "文件上传失败!")
							},
							waitTitle : this.submitWaitTitle || '请稍候',
							waitMsg : this.submitWaitMsg || '正在上传数据，请稍候...'
						});
				this.form.submit(options);

			}
		});

例子：ImageUploadFormPanel继承了BaseFormPanel，并使用PanelWindow的openWindow方法打开窗体：
先看效果图：

/**
* 图片上传
*/

ImageUploadFormPanel = function(config){
	config = config || {};

	Ext.applyIf(config, {
		//renderTo: 'fi-form',
        fileUpload: true,
        width: 500,
        frame: false,
        autoHeight: true,
        vHeight : 135,
		vWidth : 310,
		vTitle : "上传图片",
        bodyStyle: 'padding: 10px 10px 0 10px;',
        labelWidth: 40,
        defaults: {
            anchor: '95%',
            allowBlank: false,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'textfield',
            emptyText: '请输入保存的名称(请勿使用中文名称)',
            name: 'saveName',
            fieldLabel: '名称'
        },{
            xtype: 'fileuploadfield',
            emptyText: '请选择上传的图片',
            fieldLabel: '图片',
            name: 'image',
            buttonText: '',
            buttonCfg: {
                iconCls: 'upload-icon'
            }
        }],
        buttons: [{
            text: '上传',
            handler: function(){
            /*
                if(fp.getForm().isValid()){
	                fp.getForm().submit({
	                    url: 'file-upload.php',
	                    waitMsg: 'Uploading your photo...',
	                    success: function(fp, o){
	                        msg('Success', 'Processed file "'+o.result.file+'" on the server');
	                    }
	                });
                }
              */
            }
        },{
            text: '重置',
            handler: function(){
                //fp.getForm().reset();
            }
        }]
	});

	ImageUploadFormPanel.superclass.constructor.call(this, config);
};

Ext.extend(ImageUploadFormPanel, BaseFormPanel, {
    
});

实例化ImageUploadFormPanel:

imgUpload = new ImageUploadFormPanel({
	buttons: [{
            text: '上传',
            handler: function(){
                if(imgUpload.getForm().isValid()){
	                imgUpload.getForm().submit({
	                    url: URL_Fileupload.uploadImage,
	                    waitMsg: '正在上传...',
	                    success: function(iu, o){
	                         Ext.example.msg('温馨提示', '上传成功!');
	                         imgUpload.closeWindow();
	                         imgUpload.getForm().reset();
	                         chooser.store.load();
	                    },
	                    failure : function(iu, o){
	                    	Ext.Msg.alert('温馨提示', o.result.msg);
	                    }
	                });
                }
            }
        },{
            text: '重置',
            handler: function(){
                imgUpload.getForm().reset();
                
            }
        }]});

同理，也可以将PanelWindow封装到Grid中，看一效果图：



Ext.tree.TreePanel中loader的使用（异步请求）：通过beforeload事件对请求参数进行处理，通过processResponse 事件对请求成功后返回的数据进行处理并添加到当前树节点中。

new Ext.tree.TreeLoader({
			preloadChildren: false,
			clearOnLoad: false,
			dataUrl : URL_Category.list,
			listeners : {
				beforeload : function(loader, node) {
					this.baseParams['rparammap.type'] = node.attributes['type'];
					if(node.attributes['pid'] == -1){
						this.baseParams['rparammap.id'] = '0';
					}else{
						this.baseParams['rparammap.id'] = node.id;
					}
					
				}
			},
			
			processResponse : function(response, node, callback) {
				var json = response.responseText;
				try {
					var o = Ext.decode(json).object;
					node.beginUpdate();
					for (var i = 0, len = o.length; i < len; i++) {
						var n = this.createNode(o[i]);
						if (n) {
							node.appendChild(n);
						}
					}
					node.endUpdate();
					if (typeof callback == "function") {
						callback(this, node);
					}
				} catch (e) {
					this.handleFailure(response);
				}
			}
		})

评论

1 楼 t19731864 2013-09-04  

1