ExtJS - GridPanel and FormPanel DEMO

/**
 * Title: ExtJs
 * 首页
 * Description: 基础demo组合查询+列表展示
 * 
 * Copyright: Copyright (c) 2011 
 * 
 * Company: 
 * 
 * @author 程仁银 id:23949
 * @version V1.0 2011-7-13
 * @since
 */
Ext.namespace('ECC.demo');

//  ___________________________________________________________________________                   
// |                                                                           | 
// |   查询条件                                                                           |      
// |   ECC.demo.BaseQueryForm                                               |                  
// |                                                                           |                  
// |                                                                           |                  
// |___________________________________________________________________________|                   
// |                                                                           |     
// |                                                                           |    
// |                                                                           |   
// |                                                                           |                  
// |                                                                           |  
// |                                                                           |                  
// |      查询列表                                                                       |
// |      ECC.demo.BaseGridPanel                                               |                  
// |                                                                           |      
// |                                                                           |        
// |                                                                           |                  
// |                                                                           |   
// |                                                                           |                  
// |                                                                           |                  
// |                                                                           |                  
// |                                                                           |
// |                                                                           |
// |___________________________________________________________________________|

/**
 * @name ECC.demo.basePanelFrame
 * @author 程仁银
 * @description basepanel
 */
ECC.demo.basePanelFrame = function(){
	
	this.formpanel = new ECC.demo.BaseQueryForm(); //定义查询面板为当前对象引用变量
	this.gridpanel = new ECC.demo.BaseGridPanel();	 //定义列表面板为当前对象引用变量
	
	/**
	 * 构造函数
	 */
	ECC.demo.basePanelFrame.superclass.constructor.call(this,{
		id : "basePanelFrameId",
		name : "basePanelFrameName",
		autoWidth : true,
		border : false,
		layout : 'form',
		items :[this.formpanel,this.gridpanel]
	});
}

/**
 * 
 * @class ECC.demo.basePanelFrame
 * @extends Ext.Panel
 */
Ext.extend(ECC.demo.basePanelFrame,Ext.Panel,{});

/**
 * Title: 基础简单查询面板
 * 
 * Description: 基础demo组合查询
 * 
 *
 * Company: 
 * 
 * @author 程仁银 
 * @version V1.0 2011-7-11
 * @since
 */
Ext.namespace('ECC.demo');

//  ___________________________________________________________________________                   
// |                                                                           | 
// |   查询条件                                                                           |      
// |   ECC.demo.BaseQueryForm                                                  |                  
// |                                                                           |                  
// |                                                                           |                  
// |___________________________________________________________________________|                  


/**
 * 查询条件的formpanel
 * 
 * @param gridPanel-后续扩展
 */
ECC.demo.BaseQueryForm = function(){
	
	var baseQueryForm = this; //定义当前变量为引用变量
	/**
	 * 设置gridpanel为当前类引用
	 * store 动态加载列表
	 */
//	this.baseGridPanel = new ECC.demo.BaseGridPanel();
	/**
	 * 构造方法
	 */
	ECC.demo.BaseQueryForm.superclass.constructor.call(this,{
		id : 'formId',
		title : 'ECC 培训 form and grid - demo',
		name : 'baseQueryForm',
		frame : true,
		autoWidth : true,
		autoHeight : true,
		border : false, 
		layout : 'form', // 整体以form布局，每一行，用单独的column布局
		items : [
			{
				layout : 'column', // 第一行布局采用 column 
				items : [
					{
						columnWidth : .3,
						layout : 'form',
						labelAlign : 'right',
						labelWidth : 60,
						items : [
							{
								xtype : 'textfield',
								id : 'eventTitleId',
								fieldLabel : '事件标题',
								name : 'eventTitle',
								allowBlank : false,
								anchor : '95%',
								invalidText : '事件标题不能为空',
								blankText : '请填写事件标题'
							}
						]
					},
					/**
					 * 两种时间控件 Ext.form.TimeField
					 * 			  Ext.form.DateField
					 */					
					{
						columnWidth : .3,
						layout : 'form',
						labelAlign : 'right',
						labelWidth : 60,
						items : [
							{
								xtype : 'datefield',
								fieldLabel : '开始时间',
								name : 'startTime',
								format : 'Y-m-d',
								anchor : '95%'
							}
						]
					},
					{
						columnWidth : .3,
						layout : 'form',
						labelAlign : 'right',
						labelWidth : 60,
						items : [
							{
								xtype : 'timefield',
								fieldLabel : '结束时间',
								name : 'endTime',
								increment: 30, // 设置步长
								anchor : '95%'
							}
						]
					},
					/*
					 * 按钮的三种类型（submit、reset、button
					*/
					{
						columnWidth : .1,
						layout : 'form',
						labelAlign : 'right',
						labelWidth : 60,
						items : [
							{
								/**
								 * 参考 Ext.Component 的 xtype -> class  
								 */
								xtype : 'button',
								name : 'searchBtn',
								text : '查询',
								/**
								 * 添加提交触发事件
								 * 区分按钮响应区别
								 * listeners、handler
								 * 1、handler是一个特殊的listener；
								 * 2、handler是一个函数，而listener是<event , 函数>对； 
								 */
								listeners : {
									'click' :　function(){
										if(baseQueryForm.getForm().isValid()){
											alert(Ext.getCmp('eventTitleId').getValue());
										}else{
//											alert(ECC.demo.states);
											Ext.Msg.show({
												title : 'Ext.Msg.show',
												msg : '表单验证未通过',
												buttons : Ext.Msg.OK,
												icon : Ext.Msg.ERROR
											});
										}
									}
								}
								/*
								 * handler : function (){
									Ext.Msg.show({
										title : 'Ext.Msg.show',
										msg : '表单验证未通过',
										buttons : Ext.Msg.OK,
										icon : Ext.Msg.ERROR
									});
								}*/
							}
						]
					}
				]
			},
			/**
			 * 第二行 fieldset ，组合查询-高级查询
			 * 参考ext官方 example(基于修改)
			 */
			{
	            xtype:'fieldset',
	            title: 'Phone Number',
	            collapsible: true,	//True表示为面板是可收缩的
	            collapsed: false,	//True 表示为渲染面板后即闭合
	            // 默认 闭合状态，样式会乱掉，未解决......
	            autoHeight:true,
	            labelWidth : 50,
	            layout : 'column',
	            items :[
	            	{
	                   columnWidth : .3,
	                   layout : 'form',
	                   items : [
	                   	{
	                   		/**
	                   		 * Ext.form.NumberField = Ext.extend(Ext.form.TextField....
	                   		 */
	                   		xtype : 'numberfield',
	                   		fieldLabel: 'NumberField',
	                   		labelWidth : 60,
	                    	name: 'NumberField',
	                    	invalidText : '输入数字',
	                    	emptyText : '只能输入数字'
	                   	}]
	                },
	                {
	                   columnWidth : .3,
	                   layout : 'form',
	                   items : [
	                   	{
	                   		xtype : 'textfield',
	                   		/**
	                   		 * url、alpha、alphanum、email
	                   		 */
	                   		vtype : 'email', 	//默认验证：参考 Ext.form.VTypes 
	                   		fieldLabel : 'Email',
		                    name : 'email',
		                    vtypeText  : '格式如:[email protected]' 	//制定一个错误信息代替默认的
	                   	}
	                   ]
	                },
	                /**
	                 * Ext.form.ComboBox 使用
	                 * The combo box can use any type of Ext.data.Store as its data source. 
	                 * This means your data can be XML, JSON, arrays or any other supported format. 
	                 * It can be loaded using Ajax, via script tags or locally. 
	                 * This combo uses local data from a JS array:
	                 */
	                {
	                   columnWidth : .3,
	                   layout : 'form',
	                   items : [
	                   	{	// simple array store
	                   		xtype : 'combo',	// 下拉列表demo
	                   		fieldLabel : 'ComboxBox',
	                   		/**
	                   		 * 参考：E:\开发资料\Ext\ext-3.0.0\ext-3.0.0\examples\form\combos.html
	                   		 * Ext.data.Store　：JsonStore,ArrayStore,XmlStore
	                   		 * Ext.data.DataProxy : HttpProxy,MemoryProxy,ScriptTagProxy,DirectProxy
	                   		 * Ext.data.DataReader : JsonReader,ArrayReader,XmlReader
	                   		 */
	                   		/*
	                   		 * ExtJs 2.2
	                   		 * use Ext.data.SimpleStore
	                   		*/
	                   		 store: new Ext.data.SimpleStore({
		                        fields: ['abbr', 'state'],
		                        data: ECC.demo.states
		                    }),
		                    
	                   		/*
	                   		 * ExtJs 3.3 
	                   		 * store : new Ext.data.ArrayStore({
	                   			proxy : new Ext.data.MemoryProxy(),
	                   			reader : new Ext.data.ArrayReader(
	                   				{},
	                   				new Ext.data.Record.create([
	                   					{name: 'abbr',mapping : 1},
							            {name: 'state',mapping : 2}
	                   					])
	                   			),
	                   			autoLoad  : true,
	                   			data : ECC.demo.states
	                   		}),*/
						    displayField : 'state',
						    typeAhead : true,
						    mode : 'local',
						    triggerAction : 'all',
						    emptyText : 'Select a state...',
						    selectOnFocus : true
	                   	}
	                   ]
	                }
	            ]
        	},
			/**
			 * 第3行布局采用 column
			 * fieldset checkbox 模式
			 *  参考ext官方example
			 */
			{
	            xtype:'fieldset',
	            checkboxToggle:true,	//checkbox 模式
	            title: 'User Information',
	            autoHeight:true,
	            defaults: {width: 210},
	            defaultType: 'textfield',
	            collapsed: true,	//True 表示为渲染面板后即闭合
	            items :[{
	                    fieldLabel: 'First Name',
	                    name: 'first',
	                    allowBlank:false
	                },{
	                    fieldLabel: 'Last Name',
	                    name: 'last'
	                },{
	                    fieldLabel: 'Company',
	                    name: 'company'
	                }, {
	                    fieldLabel: 'Email',
	                    name: 'email',
	                    vtype:'email'
	                }
	            ]
        	}
		]
	});
}
/**
 * 
 * @class ECC.demo.BaseQueryForm
 * @extends Ext.form.FormPanel
 */
Ext.extend(ECC.demo.BaseQueryForm,Ext.FormPanel,{});

/**
 * Title: 基础列表面板
 * 
 * Description: 显示查询列表信息
 * 
 * Company: 
 * 
 * @author 程仁银
 * @version V1.0 2011-7-13
 * @since
 */
Ext.namespace('ECC.demo');
//  ___________________________________________________________________________                   
// |                                                                           |     
// |                                                                           |    
// |                                                                           |   
// |                                                                           |                  
// |                                                                           |  
// |                                                                           |                  
// |      查询列表                                                                       |
// |      ECC.demo.BaseGridPanel                                               |                  
// |                                                                           |      
// |                                                                           |        
// |                                                                           |                  
// |                                                                           |   
// |                                                                           |                  
// |                                                                           |                  
// |                                                                           |                  
// |                                                                           |
// |                                                                           |
// |___________________________________________________________________________|
/**
 * 显示查询列表信息
 * 
 * @param {}
 */
ECC.demo.BaseGridPanel = function(){
	
	var baseGridPanel = this;	//定义当前变量为引用变量
	
	/**
	 * gridpanel Config Options
	 */
	this.sm = new Ext.grid.CheckboxSelectionModel({
		singleSelect : false
	});
	/**
	 * 定义表格列模式
	 */
	this.cm = new Ext.grid.ColumnModel([
		new Ext.grid.RowNumberer(), //显示行号
		this.sm,	//将多选框加入至表格行头
		{
			id : 'abbr',
			header : '姓名',
			dataIndex : 'abbr'
		},
		{
			id : 'state',
			header : '描述',
			dataIndex : 'state'
		}
	]);
	/**
	 * 定义数据对象
	 */
	this.record = new Ext.data.Record.create([
		{name:'abbr'},
		{name:'state'}
	]);
	/**
	 * 本地数据读取，采用
	 * Ext2.2 Ext.data.SimpleStore
	 * 后续可以使用 ExtJs 3.3 响应 store
	 * 本地数据读取，未牵扯到 datareader、dataproxy
	 */
//	this.store = new Ext.data.SimpleStore({
//		 fields : ['abbr', 'state'],
//		 data :　ECC.demo.states
//	});
	this.store = new Ext.data.Store({
        proxy: new Ext.data.PagingMemoryProxy(ECC.demo.states),
        reader: new Ext.data.ArrayReader({}, 
        	this.record)
    });
    
	/**
	 * 构造函数
	 */
	ECC.demo.BaseGridPanel.superclass.constructor.call(this,{
		id : 'gridId',
		name : 'BaseGridPanelName',
		autoWidth : true,
		height : 265,
		border : false,
		loadMask : {	//加载数据时增加用户体验的云遮功能
			msg : '加载数据 ing ...'
		},
		enableColumnMove : false,	//关闭列的拖动功能
		enableColumnResize : false, //关闭列的大小调节功能
		enableHdMenu : false,		//关闭列头部出现的下拉按钮
		viewConfig : {
			forceFit : true
		},
		cm : this.cm,
		sm : this.sm,
		store : this.store,
		/**
		 * 定义分页栏
		 */
		bbar : new Ext.PagingToolbar({
            pageSize : 10,
            store: this.store,
            displayInfo: true
        })
	});
	/**
	 * store 加载分页
	 */
	this.store.load(
		{
			params:{
				start : 0,
				limit : 10
			}
		});
}

/**
 * 
 * @class ECC.demo.BaseGridPanel
 * @extends Ext.grid.GridPanel
 */
Ext.extend(ECC.demo.BaseGridPanel,Ext.grid.GridPanel,{});

/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [email protected]
 * 
 * http://extjs.com/license
 */

/* Fix for Opera, which does not seem to include the map function on Array's */
if(!Array.prototype.map){
    Array.prototype.map = function(fun){
	var len = this.length;
	if(typeof fun != "function"){
	    throw new TypeError();
	}
	var res = new Array(len);
	var thisp = arguments[1];
	for(var i = 0; i < len; i++){
	    if(i in this){
		res[i] = fun.call(thisp, this[i], i, this);
	    }
	}
        return res;
     };
}

/* Paging Memory Proxy, allows to use paging grid with in memory dataset */
Ext.data.PagingMemoryProxy = function(data) {
	Ext.data.PagingMemoryProxy.superclass.constructor.call(this);
	this.data = data;
};

Ext.extend(Ext.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
	load : function(params, reader, callback, scope, arg) {
		params = params || {};
		var result;
		try {
			result = reader.readRecords(this.data);
		}catch(e){
			this.fireEvent("loadexception", this, arg, null, e);
			callback.call(scope, null, arg, false);
			return;
		}
		
		// filtering
		if (params.filter!==undefined) {
			result.records = result.records.filter(function(el){
			    if (typeof(el)=="object"){
					var att = params.filterCol || 0;
					return String(el.data[att]).match(params.filter)?true:false;
			    } else {
					return String(el).match(params.filter)?true:false;
			    }
			});
			result.totalRecords = result.records.length;
		}
		
		// sorting
		if (params.sort!==undefined) {
		    // use integer as params.sort to specify column, since arrays are not named
		    // params.sort=0; would also match a array without columns
		    var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;
        	var fn = function(r1, r2){
				return r1 < r2;
            };
		    result.records.sort(function(a, b) {
				var v = 0;
				if (typeof(a)=="object"){
				    v = fn(a.data[params.sort], b.data[params.sort]) * dir;
				} else {
				    v = fn(a, b) * dir;
				}
				if (v==0) {
				    v = (a.index < b.index ? -1 : 1);
				}
				return v;
		    });
		}

		// paging (use undefined cause start can also be 0 (thus false))
		if (params.start!==undefined && params.limit!==undefined) {
			result.records = result.records.slice(params.start, params.start+params.limit);
		}
		
		callback.call(scope, result, arg, true);
	}
});

/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * [email protected]
 * http://www.extjs.com/license
 */
// some data used in the examples

Ext.namespace('ECC.demo');

	ECC.demo.states = [
        ['AL', 'Alabama', 'The Heart of Dixie'],
        ['AK', 'Alaska', 'The Land of the Midnight Sun'],
        ['AZ', 'Arizona', 'The Grand Canyon State'],
        ['AR', 'Arkansas', 'The Natural State'],
        ['CA', 'California', 'The Golden State'],
        ['CO', 'Colorado', 'The Mountain State'],
        ['CT', 'Connecticut', 'The Constitution State'],
        ['DE', 'Delaware', 'The First State'],
        ['DC', 'District of Columbia', "The Nation's Capital"],
        ['FL', 'Florida', 'The Sunshine State'],
        ['GA', 'Georgia', 'The Peach State'],
        ['HI', 'Hawaii', 'The Aloha State'],
        ['ID', 'Idaho', 'Famous Potatoes'],
        ['IL', 'Illinois', 'The Prairie State'],
        ['IN', 'Indiana', 'The Hospitality State'],
        ['IA', 'Iowa', 'The Corn State'],
        ['KS', 'Kansas', 'The Sunflower State'],
        ['KY', 'Kentucky', 'The Bluegrass State'],
        ['LA', 'Louisiana', 'The Bayou State'],
        ['ME', 'Maine', 'The Pine Tree State'],
        ['MD', 'Maryland', 'Chesapeake State'],
        ['MA', 'Massachusetts', 'The Spirit of America'],
        ['MI', 'Michigan', 'Great Lakes State'],
        ['MN', 'Minnesota', 'North Star State'],
        ['MS', 'Mississippi', 'Magnolia State'],
        ['MO', 'Missouri', 'Show Me State'],
        ['MT', 'Montana', 'Big Sky Country'],
        ['NE', 'Nebraska', 'Beef State'],
        ['NV', 'Nevada', 'Silver State'],
        ['NH', 'New Hampshire', 'Granite State'],
        ['NJ', 'New Jersey', 'Garden State'],
        ['NM', 'New Mexico', 'Land of Enchantment'],
        ['NY', 'New York', 'Empire State'],
        ['NC', 'North Carolina', 'First in Freedom'],
        ['ND', 'North Dakota', 'Peace Garden State'],
        ['OH', 'Ohio', 'The Heart of it All'],
        ['OK', 'Oklahoma', 'Oklahoma is OK'],
        ['OR', 'Oregon', 'Pacific Wonderland'],
        ['PA', 'Pennsylvania', 'Keystone State'],
        ['RI', 'Rhode Island', 'Ocean State'],
        ['SC', 'South Carolina', 'Nothing Could be Finer'],
        ['SD', 'South Dakota', 'Great Faces, Great Places'],
        ['TN', 'Tennessee', 'Volunteer State'],
        ['TX', 'Texas', 'Lone Star State'],
        ['UT', 'Utah', 'Salt Lake State'],
        ['VT', 'Vermont', 'Green Mountain State'],
        ['VA', 'Virginia', 'Mother of States'],
        ['WA', 'Washington', 'Green Tree State'],
        ['WV', 'West Virginia', 'Mountain State'],
        ['WI', 'Wisconsin', "America's Dairyland"],
        ['WY', 'Wyoming', 'Like No Place on Earth']
    ];

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<% 
	String path = request.getContextPath(); 
%>
<html>
  <head>
    <title>My JSP 'ExtHello.jsp' starting page</title>
	<link rel="stylesheet" type="text/css" href="<%=path %>/ext-2.2/resources/css/ext-all.css">
	<script type="text/javascript" src="<%=path %>/ext-2.2/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=path %>/ext-2.2/ext-all.js"></script>
	<script type="text/javascript" src="<%=path %>/ext-2.2/source/locale/ext-lang-zh_CN.js"></script>
	
	<script type="text/javascript" src="<%=path %>/ExtJsDemo/eccBaseForm.js"></script>
	<script type="text/javascript" src="<%=path %>/ExtJsDemo/states.js"></script>
	<script type="text/javascript" src="<%=path %>/ExtJsDemo/baseGridPanel.js"></script>
	<script type="text/javascript" src="<%=path %>/ExtJsDemo/eccDemoFrame.js"></script>
	<script type="text/javascript" src="<%=path %>/ExtJsDemo/PagingMemoryProxy.js"></script>
  	<script type="text/javascript"><!--
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
  			Ext.QuickTips.init();
  			/**
  			*	eccBaseForm demo
  			*/
  			//var baseQueryForm = new ECC.demo.BaseQueryForm();
  			//baseQueryForm.render('div1');
  			/**
  			*	eccBaseForm demo
  			*/
  			//var baseGridPanel = new ECC.demo.BaseGridPanel();
  			//baseGridPanel.render('div1');
  			var panelFrame = new ECC.demo.basePanelFrame();
  			panelFrame.render('div1');
  		});
  	--></script>
  </head>
  <body>
  	<div id="div1" align="center"></div>
  </body>
</html>