EXTjs的案例（一）

最新推荐文章于 2016-05-12 11:17:00 发布
最新推荐文章于 2016-05-12 11:17:00 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： Web前端 文章标签： extjs extjs常用 extjs案例 ext java和extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a574258039/article/details/21649241
版权

我把最近刚学的ext总结一下，方便自己以后查阅，大家有需要的也可以自己看。前面是一些基于4.0的用法，后面是工作中用到的案例基于3.0。

下面是一个登录页面的代码：（命名也不是很规范，因为当时着急出效果）

(function(){
	Ext.onReady(function() {
		
	 var config = {  
        fields:['province','post'],  
        data:[['北京','10000'],['通县','101100'],['昌平','102200'],['大兴','102600'],  
             ['密云','101500'],['延庆','102100'],['顺义','101300'],['怀柔','101400']]  
    };
    var store = new Ext.data.SimpleStore(config); 
	var addNewsForm= new Ext.FormPanel({
			id:'loginForm',
			height:130, 
			labelAlign : 'right',//位置
			frame : true,
			defaultType : 'textfield',
			layout:'column',
            labelPad : 2,
			method : 'POST', 
			bodyStyle:'padding:15px 0px 0px 10px',
			defaults:{
				msgTarget:'qtip',
		      	allowBlank:false,
		      	blankText:'不允许为空'
			},
			items :[
            	{
	                fieldLabel: "登陆账号",
	                id:"userName",
	      			xtype:"textfield",
	      			name:"userName"
	      			
            	},
            	{
	                inputType: "password",
	                id:"password",
				    xtype:"textfield",
				    name:"password",
	                fieldLabel: "登陆密码",
	                blankText:'不允许为空'
            	}, {
				    id:"userid",
				    xtype:"combobox",
				    name:"userid",
				    fieldLabel:"选择身份",
				    displayField:'province',
				    store:store 
			     },
            	{
				    id:"randCode",
				    xtype:"textfield",
				    name:"randCode",
				    fieldLabel:"验证码",
				    width: 170
			     },{
					xtype: 'box',
					id:"box",
					autoEl: {
						tag: 'img',
						src: 'jsp/image.jsp',
						height:20
						
					},
				
					style: {
						margin: "0px 0 0 10px"
					}
				}
			    
            ]
	});
	
	var top= new Ext.FormPanel({
			id: 'loginLogo', 
			height: 35, 
			frame:true, 
			bodyStyle:'padding-top:4px', 
			html:'<h3><center>毕业设计a574258039</center></h3>' 
	});
	
	var bottom= new Ext.FormPanel({
			id: 'bottomLogo', 
			height: 35, 
			frame:true, 
			buttonAlign: 'center',
			buttons: [ 
			{ text : '重置',  
              id : 'clear',  
               iconCls : 'Exclamation',
              handler : reset
            }, 
			{ text: '登陆',
			iconCls : 'Housestar',
			  handler : subjectForm
			} 
			]
			
	});
var mainpanel=new Ext.Panel({
	resizable:false,
    id:'mainpanel',  
    autoWidth:true,  
    frame:true,  
    height: 245,
    width: 300,
    labelAlign : 'center',
    region:'south',  
    items:[top,addNewsForm,bottom]
}); 
	var win = new Ext.Window({
			resizable:false,
	 		height: 245,
    		width: 310,
	 		frame:true, 
	       	closable: false, 
			modal:true,
			defaults : {           
			border : false
			},
			buttonAlign: 'center', 
			items:[ 
				{ 
				//columnWidth:1, 
				items: Ext.getCmp("mainpanel") 
				}
				
			/*	, 
				{ 
				//columnWidth: 1, 
				items: Ext.getCmp("loginForm") 
				}, 
				{ 
				//columnWidth: 1, 
				items: Ext.getCmp("bottomLogo") 
				}*/ 
				]
	});

	win.show();

	
	
	function subjectForm() { 
                if (addNewsForm.getForm().isValid()) { 
               		addNewsForm.getForm().submit({ 
                    	clientValidation: true,
                        waitMsg : '正在努力登录......',  
                        url : 'loginControler.do',
                        mthod:'post',
                        params: {
					        method: 'loginCheck'
					    },
                        timeout : 3000,  
                        success : function(form, action) { 
                            if (action.result.type == 0)// OP  
                                window.location.href = 'index.jsp';  
                            else  
                                window.location.href = 'jsp/main.jsp';  
                        },  
                        failure : function(form, action) {
                            form.reset();  
                            if (action.failureType == Ext.form.Action.SERVER_INVALID)  
                                Ext.MessageBox  
                                        .alert(  
                                                '警告',  
                                                action.result.errors.msg);  
                        }  
                    });                

                }  
     };
     function reset(){
     	addNewsForm.form.reset();
     };
     
	});
	
	
	
	
})();


/* addNewsForm.getForm().submit({ 
                    	clientValidation: true,
                        waitMsg : '正在登录......',  
                        url : 'test.do?method=test&userName='+Ext.getCmp('userName').getValue()+'&password='+Ext.getCmp('password').getValue()+'&userid='+Ext.getCmp('userid').getValue()+' &randCode='+Ext.getCmp('randCode').getValue(),
                        mthod:'post',
                        params: {
					        userName: 'delivered'
					    },
                        //timeout : 3000,  
                        success : function(form, action) { 
                        	alert("aa");
                            if (action.result.type == 0)// OP  
                                window.location.href = 'success.jsp';  
                            else  
                                window.location.href = 'success.jsp';  
                        },  
                        failure : function(form, action) {
                        	alert("bb");
                            form.reset();  
                            if (action.failureType == Ext.form.Action.SERVER_INVALID)  
                                Ext.MessageBox  
                                        .alert(  
                                                '警告',  
                                                action.result.errors.msg);  
                        }  
                    }); 
                    
                    *
                    *
     addNewsForm.getForm().submit({
					url:"test.do?method=test",
					waitMsg:"添加中....",
                    timeout :'3000',
                    params: { "uid":uid },
					success:function(form,action){
						var res = action.result;
						if(res.success == 1){
							Ext.MessageBox.alert("提示框", res.msg);
                            Ext.getCmp("ONoticeGrid").store.reload();
                            Ext.getCmp("ggDisplayGridPanel").store.reload();
						    window.close();
							return;
						}else{
							Ext.Msg.alert('提示',res.msg);
							return;
						}
					},
					failure:function(form,action){
						Ext.MessageBox.alert("提示框", "添加失败!");
					}
				});                *
                    *
                    *
                    *
                    *
                    *
                    *
                    */

效果图：


下面是总结的一些工作的：

个人觉得以后在布局等方面可以参考：

Ext.onReady(function(){
	  Ext.Ajax.timeout = 900;//重修修改
		var devRecord = Ext.data.Record.create([    
            {name: 'usercode',mapping:'usercode'},
            {name: 'username',mapping:'username'}                   
        ]); 
		var codeRecord = Ext.data.Record.create([    
            {name: 'codevalue',mapping:'codevalue'},
            {name: 'codename',mapping:'codename'}                   
        ]); 
		var envRecord = Ext.data.Record.create([    
            {name: 'envcode',mapping:'envcode'},
            {name: 'envname',mapping:'envname'}                   
        ]);
        var spclStore = new Ext.data.Store({    
			//设定读取的地址
			autoLoad :true,
			proxy: new Ext.data.HttpProxy({url: 'get.action?type=s'}),    
			//设定读取的格式    
			reader: new Ext.data.JsonReader({    
				id:"code",totalProy:'results',root:'items',successProperty :'success'
				}, codeRecord),    
			remoteSort: true,
            listeners: {
                load: function() {
                	var spclConfCombo = Ext.getCmp('spclConfCombo');
                    spclConfCombo.setValue(spclConfCombo.getValue());
                }
            }   
		});
        var envStore = new Ext.data.Store({    
			//设定读取的地址
			//autoLoad :true,
			proxy: new Ext.data.HttpProxy({url: 'getCom.action?flag=te'}),    
			//设定读取的格式    
			reader: new Ext.data.JsonReader({    
				id:"en",totalProperty:'results',root:'items',successProperty :'success'
				}, envRecord),    
			remoteSort: true
		});
    	var devStore=new Ext.data.Store({    
            //设定读取的地址
            proxy: new Ext.data.HttpProxy({url: 'getU.action?flag=al'}),    
            //设定读取的格式    
            reader: new Ext.data.JsonReader({    
                id:"usercode",totalProperty:'results',root:'items',successProperty :'success'
            }, devRecord),    
            remoteSort: true,
            listeners: {
                load: function() {
                    devCombo.setValue(devCombo.getValue());
                }
            }   
        });
	var devCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'usercode',
            hiddenName:'devCombo',
            displayField:'username',
            editable:false,
            forceSelection:true,
            triggerAction:'all',
            allowBlank:true,
            store:devStore,
            typeAhead: true,
            width:90
			});
			
		var streamRecord = Ext.data.Record.create([
            {name: 'brhcode',mapping:'brhcode'},
            {name: 'brhname',mapping:'brhname'}
            //,{name: 'brhtype',mapping:'brhtype'},
            //{name: 'intview',mapping:'intview'},
            //{name: 'project',mapping:'project'}                 
        ]); 
    	var streamStore=new Ext.data.Store({    
            //设定读取的地址
            proxy: new Ext.data.HttpProxy({url: 'getStreamList.action?flag=all&brhtype=dev'}),    
            //设定读取的格式    
            reader: new Ext.data.JsonReader({    
                id:"brhcode",totalProperty:'results',root:'items',successProperty :'success'
            }, streamRecord),    
            remoteSort: true,
            listeners: {
                load: function() {
                    streamCombo.setValue(streamCombo.getValue());
                }
            }
        });
		var streamCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'brhcode',
            hiddenName:'streamCombo',
            displayField:'brhname',
            editable:false,
            //disabled:true,
            triggerAction:'all',
            allowBlank:true,
            store:streamStore,
            typeAhead: true,
            //mode:'local',
            width:200
            });

			
		var envCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'envcode',
            hiddenName:'envCombo',
            displayField:'envname',
            editable:false,
            triggerAction:'all',
            allowBlank:true,
            store:envStore,
            typeAhead: true,
            width:120,
            listWidth:120,
            listeners:{
					     //'select':function(){
					     //	streamCombo.enable();
					     //	streamStore.removeAll();
					     //	streamCombo.disabled=(envCombo.getValue()==null);
					     //	if(envCombo.getValue()==null){
					     //		streamCombo.disable();
					     //	}else{
					     //		//streamStore.load({proxy: new Ext.data.HttpProxy({url: 'getStreamList.action?flag=all&brhtype=dev&envcode'+envCombo.getValue()})});
					     //		streamStore.load({params: {envcode:envCombo.getValue()}});
					     //	}
					     //	streamCombo.setValue(null);
					     //}
            	}
            });
		//expand 
			
		//创建工具栏组件

		var toolbar = new Ext.Toolbar([
			'-',
			'测试环境:',envCombo,'-',
			'开发流:',streamCombo,'-',
			'开发人员:',devCombo,'-',
			'活动号:',
			new Ext.form.TextField({
                name: 'actquery'
            })
		]);
		var toolbar2 = new Ext.Toolbar([
			'-',
			{text : '发布测试',iconCls:'complete',handler:deployToTest},
			'-'
		]);
		var toolbar3 = new Ext.Toolbar([
			'-','   ',
			{text : '查询',iconCls:'query',handler:queryToDeploy},
			'    ','-'
		]);
		//定义数据集对象

		var actStore = new Ext.data.GroupingStore({
			autoLoad :false,
			groupField:'envname',
			sortInfo:{field: 'makedate', direction: "ASC"},
			reader: new Ext.data.JsonReader({    
                id:"taskid",totalProperty:'results',root:'items',successProperty :'success'
			},
			Ext.data.Record.create([
			  
				{name: 'plantime',mapping:'plantime'},
				{name: 'groupcode',mapping:'groupcode'},
				{name: 'groupname',mapping:'groupname'},
				{name: 'proposer',mapping:'proposer'},
				{name: 'proposername',mapping:'proposername'},
				{name: 'handdeploy',mapping:'handdeploy'},
				{name: 'testorder',mapping:'testorder'}//定义一个model和后台字段最好对应上
			])
			),
			proxy : new Ext.data.HttpProxy({
				url : 'QueryDeployTest.action'
			}),
			listeners : {
		        'load' : function() {
					  actGrid. getSelectionModel(). selectAll();
		        }
		    }
		})
		//创建Grid表格组件
		var cb = new Ext.grid.CheckboxSelectionModel()
		var actGrid = new Ext.grid.EditorGridPanel({
			applyTo : 'grid-div',
			frame:true,
			tbar : toolbar,
			bbar : toolbar2,
			store: actStore,
			clicksToEdit:1,
			//height: 480,
			width:1200,
			stripeRows : true,
			autoScroll : true,
			hideGroupedColumn:true,
			viewConfig : {
				autoFill : true
			},
			sm : cb,
			columns: [//配置表格列

				new Ext.grid.RowNumberer({
					header : '行号',
					width : 40
				}),//表格行号组件
				cb,
				
				{header: "测试人", width: 60, dataIndex: 'testname', sortable: true},
				{header: "紧急发布", width: 60, dataIndex: 'urgeflagname', sortable: true,renderer : function(value, cellmeta, record) {
					return (value=="是")?('<span style="color:red;">'+value+'</span>'):value;
				}},
				{header: "描述", width: 80, dataIndex: 'content', sortable: true,
					<%--editor:new Ext.form.TextField({
						allowBlank : false
					}),--%>
					renderer:showDetail},
				{header: "备注", width: 80, dataIndex: 'remark', sortable: true,editor:new Ext.form.TextField({
						allowBlank : true
					}),renderer:showDetail},
				{header: "特殊设置", width: 70, dataIndex: 'spclconf', sortable: true
					,editor: new Ext.form.ComboBox({
						id:'spclConfCombo',
			            selectOnFocus:true,
			            valueField:'codevalue',
			            hiddenName:'spclCombo',
			            displayField:'codename',
			            editable:false,
			            forceSelection:false,
			            triggerAction:'all',
			            store:spclStore,
			            typeAhead: true,
			            width:80,
			            listWidth:100
						})
					,renderer : function(value, cellmeta, record) {
						 var index = spclStore.find(Ext.getCmp('spclConfCombo').valueField, value);
						 var recordspcl = spclStore.getAt(index);
						 var displayText = "";
						 if (recordspcl == null) {
						 	displayText = value;
						 }else {
						 	displayText = recordspcl.data.codename;
						 }
						 if(displayText != null && displayText !=""){
						 	displayText = '<span style="color:red;">' + displayText + '</span>';
						 }
						 return displayText;
					}
				},
				
				{header: "申请时间", width: 60, dataIndex: 'maketime', sortable: true},
				{header: "活动ID", width: 180, dataIndex: 'actid', sortable: true,renderer:showDetail}
			],
        	view: new Ext.grid.GroupingView({
            	//forceFit:true,
            	hideGroupedColumn : true,
            	groupByText:'使用当前字段进行分组',
            	showGroupsText:'表格分组',
            	groupTextTpl: '{text} ({[values.rs.length]} {["个活动待更新"]})'
        	})   
            ,listeners: {   
                'render': function () {
                    toolbar3.render(this.tbar); //add one tbar   
                }                
            } 
		})
		//创建新增或修改书籍信息的form表单
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
		actStore.load();
		function showDetail(value, meta, rec, rowIdx, colIdx, ds){
			return '<div ext:qtitle="" ext:qtip="' + value + '">'+ value +'</div>';
		}
		function queryToDeploy(){
			var devPerson = devCombo.getValue();
			var devStream = streamCombo.getValue();
			var envQuery = envCombo.getValue();
			var actQuery = Ext.get('actquery').dom.value;
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在查询活动信息......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			actStore.load({params:{UserCode:devPerson, BrhCode:devStream,
				envCode:envQuery,actQuery:actQuery},
				callback:function afterQuery(response,options, success){
					msgTip.hide();
              		if(!success)
              		{
                	  Ext.MessageBox.alert("提示","没有待发布的活动！");
                	  actStore.removeAll();
              		}
    		 	}
    		});
		}
		function deployToTest(){
			var acts = actGrid.getSelectionModel().getSelections();
			if(acts.length == 0){
				Ext.MessageBox.alert("提示","请选择待提交的活动！");
				return;
			}
			var changed = actStore.modified;
			var missed = false;
	        Ext.each(changed, function(record) {
	        	 var flag = true;	
	        	 Ext.each(acts, function(item) {
	        	 	if(record.data.actid == item.data.actid){
	        	 		flag = false;
	        	 	}
	        	 });
	        	 if(flag){
	        	 	missed = true;
	        	 }
	        });
			if(missed){
				Ext.MessageBox.confirm('提示',
					'有些记录您做了修改，但没有选择提交，是否继续？',
					function(id){
						if(id == 'yes'){
							deployActs();
						}
					});
			}else{
				deployActs();
			}
		}
		var msgTip=null;
		var deployReturn=false;
		function hideDeployProgress(){
			deployReturn=true;
			msgTip.hide();
		}
		function showDeployProgress(jsonData,first){
			if(first){
				 msgTip = Ext.MessageBox.show({
						title:'提示',
						width : 250,
						msg:'正在发布......',
						progress:true,
						wait:true,
						waitConfig:{
		                     interval:1000
		                }
				 });
				 deployReturn=false;
				 setTimeout(function(){showDeployProgress(jsonData)},1000)
				 return ;
			}
			Ext.Ajax.request({
				url : 'getDeployProgress.action',
				params : {jsonData:jsonData},
				method : 'POST',
				success : function(response,options){
					var result = Ext.util.JSON.decode(response.responseText);
					if(deployReturn){

					}else if(result.busy){
						Ext.MessageBox.updateText(result.msg);
						setTimeout(function(){showDeployProgress(jsonData)},1000)
					}else{
						setTimeout(function(){showDeployProgress(jsonData)},1000);
					}
				}
			});
		}
		function deployActs(){
			var acts = actGrid.getSelectionModel().getSelections();
        	var jsonData = "["; 
        	var appendRecordStrFn = function(record) {   
            	record.data.indexNo = this.indexOf(record);   
            	jsonData += Ext.encode(record.data) + ",";   
       	 	};   
        	Ext.each(acts , appendRecordStrFn, actStore);   
        	jsonData += "]";
			Ext.Ajax.request({
				url : 'deployActs.action',
				params : {jsonData:jsonData},
				timeout: 300000,
				method : 'POST',
				success : function(response,options){
					hideDeployProgress();
					var result = Ext.util.JSON.decode(response.responseText);
					Ext.Msg.alert('提示',result.msg);
					for(var i = 0 ; i < acts.length ; i++){
						actStore.remove(acts[i]);
					}
					actStore.modified = [];
				},
				failure : function(response,options){
					hideDeployProgress();
					Ext.Msg.alert('提示','发布失败或超时，请联系管理员！');
				}
			});
			showDeployProgress(jsonData,true);
		}
	});


下面是又一个案例：

Ext.ux.OperateColumn = function(config){
    /**
     * @cfg 操作
     */
    this.operates = [];
    /**
     * @cfg 行样式的class名称
     */
    this.colStyle = 'grid3-operate-col';
    
    /**
     * @private 操作与处理函数映射
     */
    this.operateHandler = {}; 

    Ext.apply(this, config);
    if(!this.id){
        this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};

Ext.ux.OperateColumn.prototype ={
    strTplImg : '<img class="{0}" op="{1}" ext:qtip="{2}" src="{3}"></img>',
    strTplText:'<span class ="{0}" op="{1}" style="{2}">{3}</span>',
    init : function(grid){
        this.grid = grid;
        this.grid.on('render', function(){
            var view = this.grid.getView();
            view.mainBody.on('click', this.onClick, this);
        }, this);
    },
    onClick : function(e, t){
        var op = t.getAttribute('op');
        if(this.operateHandler[op]){
            var index = this.grid.getView().findRowIndex(t);
            var record = this.grid.store.getAt(index);
            this.operateHandler[op](record);
        }
    },
    renderer : function(v, p, record){
        var ret = '';
        for(var i=0,len = this.operates.length;i < len; i++){
            this.operateHandler[this.operates[i]['type']] = this.operates[i]['handler'];

            if(this.operates[i].icon){
                ret = ret + String.format(this.strTplImg,this.colStyle,this.operates[i]['type'],
                this.operates[i]['qTips']||'',this.operates[i]['icon']);
            }
            else{
                ret = ret + String.format(this.strTplText,this.colStyle,this.operates[i]['type'],
                this.operates[i]['textStyle'],this.operates[i]['text']);
            }
        }
        return ret;
    }
};





var Plant = Ext.data.Record.create([
{name: 'dbcode', type: 'string'},
{name: 'dbname', type: 'string'},
{name: 'username', type: 'string'},
{name: 'passwd', type: 'string'},
{name: 'sid', type: 'string'},
{name: 'ip', type: 'string'},
{name: 'port', type: 'int'}
]);

Ext.onReady(function(){
    var opColumn = new Ext.ux.OperateColumn({
        header: "操作",
        dataIndex: 'id',//定义要映射的字段
        width: 80,
        align:'center',
        operates:[
        {
             type:'A',
             handler:function(record){
	        	Ext.MessageBox.show({   
	                title:'请稍候',   
	                msg:'正在保存数据，请耐心等待...',   
	                 progress:true
	            });
        		Ext.Ajax.request({
        		   url: "DbInfoModify.action",
        		   method: "POST",
        		   params:record.data,
        		   success: function(r) {
        				Ext.MessageBox.hide();
        				grid.store.reload();
        		   },
        		   failure: function() {
        			   Ext.MessageBox.hide();
        			   MessageBox("提示", "操作失败！", Ext.MessageBox.ERROR);
        			   grid.store.reload();
        		   }
        		});
             },
             text: '保存',
             textStyle:'color:blue'
        },{
             type:'D',
             handler:function(record){
            	if(record.data.dbcode==''){
					grid.store.remove(record);
					return ;
                }

            	Ext.MessageBox.confirm('提示框', '您确定要删除该信息吗？删除后数据不能恢复！',function(btn){
					if(btn=='no')
						return ;
            		Ext.MessageBox.show({   
    	                title:'请稍候',   
    	                msg:'正在删除数据，请耐心等待...',   
    	                 progress:true
    	            });
    	    		Ext.Ajax.request({
    	    		   url: "DeleteDbInfo.action",
    	    		   method: "POST",
    	    		   params:record.data,
    	    		   success: function(r) {
    	    				Ext.MessageBox.hide();
    	    				grid.store.remove(record);
    	    		   },
    	    		   failure: function() {
    	    			   Ext.MessageBox.hide();
    	    			   MessageBox("提示", "操作失败！", Ext.MessageBox.ERROR);
    	    		   }
    	    		});	
               	})
             },
             text:'删除',
             textStyle:'color:red'
        }
        ]
      });

 	
	var fm = Ext.form;
	var cm = new Ext.grid.ColumnModel([{
		id:'dbcode',
        header: "标识",
        dataIndex: 'dbcode',
        width: 100,
        editor: new fm.TextField({
            allowBlank: false
        })
     },{
        header: "库名",
        dataIndex: 'dbname',
        width: 120,
        editor: new fm.TextField({
            allowBlank: false
        })
     },{
         header: "用户名",
         dataIndex: 'username',
         width: 120,
         editor: new fm.TextField({
             allowBlank: false
         })
      },{
          header: "密码",
          dataIndex: 'passwd',
          width: 120,
          editor: new fm.TextField({
              allowBlank: false
          })
       },{
           header: "sid",
           dataIndex: 'sid',
           width: 80,
           editor: new fm.TextField({
               allowBlank: false
           })
        },{
            header: "IP",
            dataIndex: 'ip',
            width: 100,
            editor: new fm.TextField({
                allowBlank: false
            })
         },{
             header: "端口",
             dataIndex: 'port',
             width: 50,
             editor: new fm.NumberField({
                 allowBlank: false
             })
          },opColumn
 ]);
//	cm.defaultSortable = true;
	
	var mystore = new Ext.data.Store({   
	    //autoLoad:true,//自动加载   
	    proxy: new Ext.data.HttpProxy({   
	        url:'getDbInfos.action?t=admin',   
	        method:'GET'  
	    }),   
	    reader: new Ext.data.JsonReader({
	        root: 'dbInfoList'  
	    },
	    Plant)   
	 });   
	//alert("dd")
	var grid = new Ext.grid.EditorGridPanel({
        store: mystore,
        cm: cm,
        renderTo: 'grid-div',
        width:800,
        height:500,
        autoExpandColumn:'dbcode',
        frame:true,
        plugins:opColumn,
        clicksToEdit:1,

        tbar: ['-',{
            text: '增加',
            handler : function(){
                var p = new Plant({
                	dbcode:'',
                	dbname:'',
                	username:'',
                	passwd:'',
                	sid:'',
                	ip:'',
                	port:'1521'
                });
                grid.stopEditing();
                mystore.insert(mystore.getTotalCount(), p);
                grid.startEditing(mystore.getTotalCount(), 0);
            }
        },'-',{
            text: '刷新',
            handler : function(){
        		mystore.reload();
            }
        },'-',{
            text: 'test',
            handler : function(){
        	alert(grid.store.getTotalCount()+"/"+mystore.getTotalCount())
            }
        },'-']
    });
	mystore.load();
});

图：



3.各种不同的用法就是为了方便以后自己学习：

Ext.onReady(function(){
		var devPerson = '<%=tUsercode%>';
		var streamRecord = Ext.data.Record.create([
            {name: 'brhcode'},{name: 'brhname'},{name: 'brhtype'},
            {name: 'project'},{name: 'devview'},{name: 'intbrh'},
            {name: 'intview'},{name: 'evn'},{name: 'rebase'}                 
        ]); 
    	var streamStore=new Ext.data.Store({    
            //设定读取的地址
            proxy: new Ext.data.HttpProxy({url: 'getStreamList.action?brhtype=dev&flag=mine'}),    
            //设定读取的格式    
            reader: new Ext.data.JsonReader({    
                id:"brhcode",totalProperty:'results',root:'items',successProperty :'success'
            }, streamRecord),    
            remoteSort: true,
            listeners: {
                load: function() {
                    streamCombo.setValue(streamCombo.getValue());
                }
            } 
        });
		var streamCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'brhcode',
            hiddenName:'streamCombo',
            displayField:'brhname',
            fieldLabel: '开发流',
            blankText:'请选择开发流',
            emptyText:'请选择开发流',
            editable:false,
            triggerAction:'all',
            allowBlank:true,
            store:streamStore,
            typeAhead: true,
            width:200
            });
            streamStore.load();
			//streamCombo.setValue('lisind_dev');
			
			
		//创建工具栏组件

		var toolbar = new Ext.Toolbar([
			'-','开始日期:',
			new Ext.form.DateField({
				id:'beginDate',
				format:'Y-m-d',//显示日期的格式

				width : 120,
				value : new Date()
			}),
			'-','结束日期:',
			new Ext.form.DateField({
				id:'endDate',
				format:'Y-m-d',//显示日期的格式

				width : 120,
				value : new Date()
			}),
			'-','活动号:',
			new Ext.form.TextField({
                name: 'actquery'
            })
            //,'-',
			//{text : '查询',iconCls:'query',handler:queryToCreate}
		]);
		

		var toolbar2 = new Ext.Toolbar([
			'-','开发流:',
			streamCombo,'-',
			{text : '创建活动',iconCls:'complete',handler:createActs},
			'-',{xtype: 'tbspacer'},'-','活动号:',
			new Ext.form.TextField({
                name: 'actCreate'
            }),
            '-',
            {text : '快速创建活动',iconCls:'complete',handler:quickCreate}
		]);
		var toolbar3 = new Ext.Toolbar([
			'-','   ',
			{text : '  查询  ',iconCls:'query',handler:queryToCreate},
			'    ','-'
		]);
		//定义数据集对象

		var actStore = new Ext.data.Store({
			autoLoad :false,
			//sortInfo :{field: "makedate", direction: "DESC"},
			reader: new Ext.data.JsonReader({    
                id:"actno",totalProperty:'results',root:'items',successProperty :'success'
			},
			Ext.data.Record.create([
				{name: 'actno',mapping:'actno'},
				{name: 'upactno',mapping:'upactno'},
				{name: 'modulecode',mapping:'modulecode'},
				{name: 'modulename',mapping:'modulename'},
				{name: 'testcode',mapping:'testcode'},
				{name: 'testname',mapping:'testname'},
				{name: 'makedate',mapping:'makedate'},
				{name: 'maketime',mapping:'maketime'},
				{name: 'remark',mapping:'remark'},
				{name: 'judger',mapping:'judger'},
				{name: 'judgername',mapping:'judgername'},
				{name: 'judgetime',mapping:'judgetime'},
				{name: 'content',mapping:'content'}
			])
			),
			proxy : new Ext.data.HttpProxy({
				url : 'getActsToCreate.action'
			})
		})
		//创建Grid表格组件
		var cb = new Ext.grid.CheckboxSelectionModel()
		var actGrid = new Ext.grid.GridPanel({
			applyTo : 'grid-div',
			frame:true,
			tbar : toolbar,
			//bbar : toolbar2,
			bbar : new Ext.PagingToolbar({//分页工具栏

				store : actStore,
				pageSize : 12,
				displayInfo : true,
				displayMsg : '第 {0} 条到 {1} 条，一共 {2} 条',
				emptyMsg : "没有记录"
			}),
			store: actStore,
			stripeRows : true,
			autoScroll : true,
        	width:860,
        	//height: 500,
			viewConfig : {
				autoFill : true
			},
			sm : cb,
			columns: [//配置表格列

				new Ext.grid.RowNumberer({
					header : '行号',
					width : 40
				}),//表格行号组件
				cb,
				{header: "活", width: 130, dataIndex: 'actno', sortable: true,renderer:showDetail},
				{header: "上动号", width: 130, dataIndex: 'upactno', sortable: true,renderer:showDetail},
				
				{header: "评", width: 100, dataIndex: 'judgername', sortable: true},
				{header: "时间", width: 120, dataIndex: 'judgetime', sortable: true,renderer:showDetail}
			]
			,   
            listeners: {   
                'render': function () {   
                    toolbar2.render(this.bbar); //add one tbar   
                    toolbar3.render(this.tbar);      
                }   
            }  
		})
		//创建新增或修改书籍信息的form表单
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
		function showDetail(value, meta, rec, rowIdx, colIdx, ds){
			return '<div ext:qtitle="" ext:qtip="' + value + '">'+ value +'</div>';
		}
		function queryToCreate(){
			var beginDate = Ext.get('beginDate').dom.value;
			var endDate = Ext.get('endDate').dom.value;
			var actQuery = Ext.get('actquery').dom.value;
			if(beginDate > endDate){
				Ext.MessageBox.alert("提示","开始日期不能大于结束日期！");
				return;
			}
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在查询活动信息......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			actStore.baseParams = {beginDate:beginDate, 
									endDate:endDate,actQuery:actQuery,caller:'ActCreate'};  
			actStore.load({params:{start:0,limit:12},
				callback:function afterQuery(response,options, success){
					msgTip.hide();
              		if(!success)
              		{
                	  Ext.MessageBox.alert("提示","没有可使用的活动号，您可能需要修改查询条件！");
                	  actStore.removeAll();
              		}
    		 	}
    		});
		}
		function createActs(){
			var stream = streamCombo.getValue();
			var acts = actGrid.getSelectionModel().getSelections();
			if(stream == null || stream == ""){
				Ext.MessageBox.alert("提示","请选择开发流！");
				return;
			}
			if(acts.length == 0){
				Ext.MessageBox.alert("提示","请选择活动！");
				return;
			}
			if(acts.length > 5){
				Ext.MessageBox.alert("提示","请一次最多选5个活动！");
				return;
			}
        	var jsonData = "["; 
        	var appendRecordStrFn = function(record) {   
            	record.data.indexNo = this.indexOf(record);   
            	jsonData += Ext.encode(record.data) + ",";   
       	 	};   
        	Ext.each(acts , appendRecordStrFn, actStore);   
        	jsonData += "]";
			var index = streamStore.find('brhcode',stream);
			var proj;
			if(index != -1){
			  proj = streamStore.getAt(index).get('project');
			}
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在创建活动......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			Ext.Ajax.request({
				url : 'createActs.action',
				params : {brhCode:stream,devPerson:devPerson,jsonData:jsonData,project:proj},
				method : 'POST',
				success : function(response,options){
					msgTip.hide();
					var result = Ext.util.JSON.decode(response.responseText);
					Ext.Msg.alert('提示',result.msg);
					for(var i = 0 ; i < acts.length ; i++){
						actStore.remove(acts[i]);
					}
				},
				failure : function(response,options){
					msgTip.hide();
					Ext.Msg.alert('提示','创建活动失败，可能号码已被占用！');
				}
			});
		}
		function quickCreate(){
			var stream = streamCombo.getValue();
			var act = Ext.get('actCreate').dom.value;
			if(stream == null || stream == ""){
				Ext.MessageBox.alert("提示","请选择开发流！");
				return;
			}
			var fn = function(){
				Ext.get('actCreate').focus();
			};
			if(act == null || act == ""){
				Ext.MessageBox.alert("提示","请填写活动号！",fn);
				return;
			}
			var index = streamStore.find('brhcode',stream);
			var proj;
			if(index != -1){
			  proj = streamStore.getAt(index).get('project');
			}
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在创建活动......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			Ext.Ajax.request({
				url : 'createActs.action',
				params : {brhCode:stream,devPerson:devPerson,act:act,project:proj},
				method : 'POST',
				success : function(response,options){
					msgTip.hide();
					var result = Ext.util.JSON.decode(response.responseText);
					Ext.Msg.alert('提示',result.msg);
				},
				failure : function(response,options){
					msgTip.hide();
					Ext.Msg.alert('提示','创建活动失败，可能号码已被占用！');
				}
			});
		}
	});

图：

4.案例

Ext.onReady(function(){
		
		var devPerson = '<%=tUsercode%>';
		var devStream = 'allbrh';
		var devRecord = Ext.data.Record.create([    
            {name: 'usercode',mapping:'usercode'},
            {name: 'username',mapping:'username'}                   
        ]); 
		var codeRecord = Ext.data.Record.create([    
            {name: 'codevalue',mapping:'codevalue'},
            {name: 'codename',mapping:'codename'}                   
        ]); 
		var envRecord = Ext.data.Record.create([    
            {name: 'envcode',mapping:'envcode'},
            {name: 'envname',mapping:'envname'}                   
        ]);
        var spclStore = new Ext.data.Store({    
			//设定读取的地址
			//autoLoad :true,
			proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action?type=spclconf'}),    
			//设定读取的格式    
			reader: new Ext.data.JsonReader({    
				id:"codevalue",totalProperty:'results',root:'items',successProperty :'success'
				}, codeRecord),    
			remoteSort: true
		});
        var envStore = new Ext.data.Store({    
			//设定读取的地址
			//autoLoad :true,
			proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action'}),    
			//设定读取的格式    
			reader: new Ext.data.JsonReader({    
				id:"envcode",totalProperty:'results',root:'items',successProperty :'success'
				}, envRecord),    
			remoteSort: true
		});
    	var devStore=new Ext.data.Store({    
            //设定读取的地址
            proxy: new Ext.data.HttpProxy({url: 'getUserList.action?flag=all&role=dev'}),    
            //设定读取的格式    
            reader: new Ext.data.JsonReader({    
                id:"usercode",totalProperty:'results',root:'items',successProperty :'success'
            }, devRecord),    
            remoteSort: true,
            listeners: {
                load: function() {
                    devCombo.setValue(devCombo.getValue());
                }
            }   
        });
		var devCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'usercode',
            hiddenName:'devCombo',
            displayField:'username',
            blankText:'请选择开发人员',
            emptyText:'请选择开发人员',
            editable:false,
            forceSelection:true,
            triggerAction:'all',
            allowBlank:false,
            store:devStore,
            typeAhead: true,
            width:90
			});
			devStore.load();
			devCombo.setValue(devPerson);
			
		var streamRecord = Ext.data.Record.create([
            {name: 'brhcode',mapping:'brhcode'},
            {name: 'brhname',mapping:'brhname'}
            //,{name: 'brhtype',mapping:'brhtype'},
            //{name: 'intview',mapping:'intview'},
            //{name: 'project',mapping:'project'}                 
        ]); 
    	var streamStore=new Ext.data.Store({    
            //设定读取的地址
            proxy: new Ext.data.HttpProxy({url: 'getStreamList.action?flag=all&brhtype=dev'}),    
            //设定读取的格式    
            reader: new Ext.data.JsonReader({    
                id:"brhcode",totalProperty:'results',root:'items',successProperty :'success'
            }, streamRecord),    
            remoteSort: true,
            listeners: {
                load: function() {
                    streamCombo.setValue(streamCombo.getValue());
                }
            }
        });
		var streamCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'brhcode',
            hiddenName:'streamCombo',
            displayField:'brhname',
            blankText:'请选择开发流',
            emptyText:'请选择开发流',
            editable:false,
            triggerAction:'all',
            allowBlank:false,
            store:streamStore,
            typeAhead: true,
            width:200
            });
            streamStore.load();
			streamCombo.setValue(devStream);
			
			
		//创建工具栏组件

		var toolbar = new Ext.Toolbar([
			'-','开发人员:',devCombo,'-',
			'开发流:',streamCombo,'-','活动号:',
			new Ext.form.TextField({
				id:'actquery',
                name: 'actquery'
            })
		]);
		var toolbar2 = new Ext.Toolbar([
			'-',
			{text : '提交测试',iconCls:'complete',handler:commitToTest},
			'-',{xtype: 'tbspacer'},{xtype: 'tbspacer'},'-','活动号:',
			new Ext.form.TextField({
                name: 'actCreate'
            }),
            '-',
            {text : '快速提交测试',iconCls:'complete',handler:commitAct}
		]);
		var toolbar3 = new Ext.Toolbar([
			'-','   ',
			{id:'queryActsBrn',text : '查询',iconCls:'query',handler:queryToTest},
			'    ','-','        ','-','<font color=blue><注意：如需同时更新数据修改等环境，请不要写在备注里，而在"申请发布测试"菜单中提交.></font>','-'
		]);
		//定义数据集对象

		var actStore = new Ext.data.GroupingStore({
			autoLoad :false,
			groupField:'brhname',
			sortInfo:{field: 'actno', direction: "ASC"},
			reader: new Ext.data.JsonReader({    
                id:"actid",totalProperty:'results',root:'items',successProperty :'success'
			},
			Ext.data.Record.create([
				{name: 'actid',mapping:'actid'},
				{name: 'brhcode',mapping:'brhcode'},
				{name: 'brhname',mapping:'brhname'},
				{name: 'actno',mapping:'actno'},
				{name: 'devcode',mapping:'devcode'},
				{name: 'devname',mapping:'devname'},
				{name: 'modulecode',mapping:'modulecode'},
				//缺字段
				{name: 'syncenvname',mapping:'syncenvname'},
				{name: 'urgeflag',mapping:'urgeflag'}
				//,{name: 'priorty'},
				//{name: 'priortyname'}
			])
			),
			proxy : new Ext.data.HttpProxy({
				url : 'getActToTestList.action'
			})
		})
		var urgeflagRecord = Ext.data.Record.create([
			                                         {name: 'codevalue',mapping:'codevalue'},
			                                         {name: 'codename',mapping:'codename'}
			                                     ]); 
       	var urgeflagStore=new Ext.data.Store({    
               //设定读取的地址
               proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action?type=urgeflag'}),    
               //设定读取的格式    
               reader: new Ext.data.JsonReader({    
                   id:"codevalue",totalProperty:'results',root:'items',successProperty :'success'
               }, codeRecord),    //urgeflagRecord
               remoteSort: true
           });
   		
   		//urgeflagStore.load();
		
		//创建Grid表格组件
		var cb = new Ext.grid.CheckboxSelectionModel()
		var actGrid = new Ext.grid.EditorGridPanel({
			applyTo : 'grid-div',
			frame:true,
			tbar : toolbar,
			bbar : toolbar2,
			store: actStore,
			clicksToEdit:1,
			//height: 480,
			width:860,
			stripeRows : true,
			autoScroll : true,
			viewConfig : {
				autoFill : true
			},
			sm : cb,
			columns: [//配置表格列

				new Ext.grid.RowNumberer({
					header : '行号',
					width : 40
				}),//表格行号组件
				cb,
				
				{header: "活动号", width: 100,dataIndex: 'actno', sortable: true,renderer:showDetail},
				{header: "块", width: 70, dataIndex: 'modulename', sortable: true,renderer:showDetail},
				
				{header: "描", width: 120, dataIndex: 'content', sortable: true,editor:new Ext.form.TextField({
						allowBlank : true,
						readOnly:true
					}),renderer:showDetail},
				{header: "备", width: 80, dataIndex: 'remark', sortable: true,editor:new Ext.form.TextField({
						allowBlank : false
					}),renderer:showDetail},
				{header: "置", width: 80, dataIndex: 'spclconf', sortable: true,editor: new Ext.form.ComboBox({
						id:'spclConfCombo',
			            selectOnFocus:true,
			            valueField:'codevalue',
			            hiddenName:'spclCombo',
			            displayField:'codename',
			            editable:false,
			            forceSelection:false,
			            triggerAction:'all',
			            store:spclStore,
			            typeAhead: true,
			            width:80
						})
					,renderer : function(value, cellmeta, record) {
						 var index = spclStore.find(Ext.getCmp('spclConfCombo').valueField, value);
						 var recordspcl = spclStore.getAt(index);
						 var displayText = "";
						 if (recordspcl == null) {
						 	displayText = value;
						 }else {
						 	displayText = recordspcl.data.codename;
						 }
						 return displayText;
					}
				},
				
				{header: "紧布", width: 80, dataIndex: 'urgeflag', sortable: true,editor: new Ext.form.ComboBox({
					id:'urgeflagCombo',
		            selectOnFocus:true,
		            valueField:'codevalue',
		            hiddenName:'urgeflag',
		            displayField:'codename',
		            editable:false,
		            forceSelection:false,
		            triggerAction:'all',
		            store:urgeflagStore,
		            typeAhead: true,
		            width:80
					})
				,renderer : function(value, cellmeta, record) {
					 var index = urgeflagStore.find(Ext.getCmp('urgeflagCombo').valueField, value);
					 var recordspcl = urgeflagStore.getAt(index);
					 var displayText = "";
					 if (recordspcl == null) {
					 	displayText = value;
					 }else {
					 	displayText = recordspcl.data.codename;
					 }
					 return displayText;
				}
			},
//			
//				{header: "同", width: 150, dataIndex: 'syncenv', sortable: true
//					,editor: new Ext.form.MultiSelect({
//						  width:200,
//						  editable: false,
//						  store:envStore ,
//						  readData:function(){
//							envStore.baseParams = {flag:'syncenv',type:"all"};//lisind_dev
//							 envStore.load();
//						  },
//						  valueField :"envcode",
//						  displayField: "envname",
//						  mode: 'local',
//						  triggerAction: 'all',
//						  allowBlank:true,
//						  emptyText:'无'
//					})
//				},

				{header: "员", width: 70, dataIndex: 'devname', sortable: true},
				{header: "共和国", width: 60, dataIndex: 'testname', sortable: true},
				{header: "豆腐干流", width: 80, dataIndex: 'brhname', sortable: true}
			],
        	view: new Ext.grid.GroupingView({
            	//forceFit:true,
            	hideGroupedColumn:true,
            	groupByText:'使用当前字段进行分组',
            	showGroupsText:'表格分组',
            	groupTextTpl: '{text} ({[values.rs.length]} {["个活动未交付"]})'
        	}),   
            listeners: {   
                'render': function () {   
                    toolbar3.render(this.tbar); //add one tbar   
                }   
            } 
		})
		//创建新增或修改书籍信息的form表单
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
		function showDetail(value, meta, rec, rowIdx, colIdx, ds){
			return '<div ext:qtitle="" ext:qtip="' + value + '">'+ value +'</div>';
		}
		function queryToTest(){
			devPerson = devCombo.getValue();
			devStream = streamCombo.getValue();
			var actQuery = Ext.get('actquery').dom.value;
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在加载活动信息......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			
			var index = streamStore.find('brhcode',devStream);
			var proj,intview;
			if(index != -1){
			  proj = streamStore.getAt(index).get('project');
			  intview = streamStore.getAt(index).get('intview');
			  if(devStream == "allbrh"){
			  	proj = "lis";
			  }
			}
			actStore.load({params:{UserCode:devPerson, BrhCode:devStream,
				//Project:proj,intview:intview,
				actQuery:actQuery},
				callback:function afterQuery(response,options, success){
					msgTip.hide();
              		if(!success)
              		{
                	  Ext.MessageBox.alert("提示","没有数据！");
                	  actStore.removeAll();
              		}
    		 	}
    		});
		}
		function commitToTest(){
		
			var acts = actGrid.getSelectionModel().getSelections();
			if(acts.length == 0){
				Ext.MessageBox.alert("提示","请选择待提交的活动！");
			    
				return;
			}

		   var str = "";
		    for(var i=0;i <acts.length;i++){ 
		    str = acts[i].get('remark');
		    if(str== null || str ==""){
		    	Ext.MessageBox.alert("提示","您选择待提交活动的备注信息不能为空！");
				return;
		    }
		    
		   }

			var changed = actStore.modified;
			var missed = false;
	        Ext.each(changed, function(record) {
	        	 var flag = true;	
	        	 Ext.each(acts, function(item) {
	        	 	if(record.data.actid == item.data.actid){
	        	 		flag = false;
	        	 	}
	        	 });
	        	 if(flag){
	        	 	missed = true;
	        	 }
	        });
			if(missed){
				Ext.MessageBox.confirm('提示',
					'有些记录您做了修改，但没有选择提交，是否继续？',
					function(id){
						if(id == 'yes'){
							commitActs();
						}
					});
			}else{
				commitActs();
			}
		}
		function commitActs(){
			var proposer = '<%=tUsercode%>';
			var acts = actGrid.getSelectionModel().getSelections();
        	var jsonData = "["; 
        	var appendRecordStrFn = function(record) {   
            	record.data.indexNo = this.indexOf(record);   
            	jsonData += Ext.encode(record.data) + ",";   
       	 	};   
        	Ext.each(acts , appendRecordStrFn, actStore);   
        	jsonData += "]";
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在创建活动......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			Ext.Ajax.request({
				url : 'commitActs.action',
				params : {proposer:proposer,jsonData:jsonData},
				method : 'POST',
				success : function(response,options){
					msgTip.hide();
					var result = Ext.util.JSON.decode(response.responseText);
					Ext.Msg.alert('提示',result.msg,function(){
						if(!result.success){
							actStore.removeAll();
							queryToTest();
						}else{
							for(var i = 0 ; i < acts.length ; i++){
								actStore.remove(acts[i]);
							}
						}
						actStore.modified = [];
					});
				},
				failure : function(response,options){
					msgTip.hide();
					Ext.Msg.alert('提示','提交失败，请联系管理员！');
				}
			});
		}
		function commitAct(){
		  var proposer = '<%=tUsercode%>';
			var act = Ext.get('actCreate').dom.value;
			var fn = function(){
				Ext.get('actCreate').focus();
			};
			if(act == null || act == ""){
				Ext.MessageBox.alert("提示","请填写活动号！",fn);
				return;
			}
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在提交活动......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			Ext.Ajax.request({
				url : 'commitActs.action',
				params : {proposer:proposer,act:act},
				method : 'POST',
				success : function(response,options){
					msgTip.hide();
					var result = Ext.util.JSON.decode(response.responseText);
					Ext.Msg.alert('提示',result.msg);
				},
				failure : function(response,options){
					msgTip.hide();
					Ext.Msg.alert('提示','提交失败，请联系管理员！');
				}
			});
		}
	});
图：

案例：

Ext.onReady(function(){
	  var devPerson = 'all';
		var testPerson = 'all';
		var chgtestPerson =  '<%=tUsercode%>';
		var devRecord = Ext.data.Record.create([    
            {name: 'usercode',mapping:'usercode'},
            {name: 'username',mapping:'username'}                   
        ]); 
		var codeRecord = Ext.data.Record.create([    
            {name: 'codevalue',mapping:'codevalue'},
            {name: 'codename',mapping:'codename'}                   
        ]); 
		var envRecord = Ext.data.Record.create([    
            {name: 'envcode',mapping:'envcode'},
            {name: 'envname',mapping:'envname'}                   
        ]);

    var envStore = new Ext.data.Store({    
			//设定读取的地址
			//autoLoad :true,
			proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action?flag=srctestenv'}),    
			//设定读取的格式    
			reader: new Ext.data.JsonReader({    
				id:"envcode",totalProperty:'results',root:'items',successProperty :'success'
				}, envRecord),    
			remoteSort: true
		});
    var devStore=new Ext.data.Store({    
            //设定读取的地址
            proxy: new Ext.data.HttpProxy({url: 'getUserList.action?flag=all&role=dev'}),    
            //设定读取的格式    
            reader: new Ext.data.JsonReader({    
                id:"usercode",totalProperty:'results',root:'items',successProperty :'success'
            }, devRecord),    
            remoteSort: true,
            listeners: {
                load: function() {
                    devCombo.setValue(devCombo.getValue());
                }
            }   
        });
    var testStore=new Ext.data.Store({    
            //设定读取的地址
            proxy: new Ext.data.HttpProxy({url: 'getUserList.action?flag=all&role=test'}),    
            //设定读取的格式    
            reader: new Ext.data.JsonReader({    
                id:"usercode",totalProperty:'results',root:'items',successProperty :'success'
            }, devRecord),    
            remoteSort: true,
            listeners: {
                load: function() {
                    testCombo.setValue(testCombo.getValue());
                }
            }   
        });
    var chgtestStore=new Ext.data.Store({    
            //设定读取的地址
            proxy: new Ext.data.HttpProxy({url: 'getUserList.action?role=test'}),    
            //设定读取的格式    
            reader: new Ext.data.JsonReader({    
                id:"usercode",totalProperty:'results',root:'items',successProperty :'success'
            }, devRecord),    
            remoteSort: true,
            listeners: {
                load: function() {
                    chgtestCombo.setValue(chgtestCombo.getValue());
                }
            }   
        });
		var devCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'usercode',
            hiddenName:'devCombo',
            displayField:'username',
            blankText:'请选择开发人员',
            emptyText:'请选择开发人员',
            editable:false,
            forceSelection:true,
            triggerAction:'all',
            allowBlank:false,
            store:devStore,
            typeAhead: true,
            width:90
			});
			devStore.load();
			devCombo.setValue(devPerson);
			
		var testCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'usercode',
            hiddenName:'testCombo',
            displayField:'username',
            blankText:'请选择测试人员',
            emptyText:'请选择测试人员',
            editable:false,
            forceSelection:true,
            triggerAction:'all',
            allowBlank:false,
            store:testStore,
            typeAhead: true,
            width:90
			});
			testStore.load();
			testCombo.setValue(testPerson);
		var envCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'envcode',
            hiddenName:'envCombo',
            displayField:'envname',
            editable:false,
            triggerAction:'all',
            allowBlank:true,
            store:envStore,
            typeAhead: true,
            width:200
            });
		var chgtestCombo = new Ext.form.ComboBox({
            selectOnFocus:true,
            valueField:'usercode',
            hiddenName:'chgtestCombo',
            displayField:'username',
            blankText:'请试人员',
            emptyText:'人员',
            editable:false,
            forceSelection:true,
            triggerAction:'all',
            allowBlank:false,
            store:chgtestStore,
            typeAhead: true,
            width:90
			});
			chgtestStore.load();
			chgtestCombo.setValue(chgtestPerson);
			
		//创建工具栏组件

		var toolbar = new Ext.Toolbar([
			'-','环:',envCombo,'-','人:',testCombo,'-','发人:',devCombo,'-','活动号:',
			new Ext.form.TextField({
				id:'actquery',
                name: 'actquery'
            }),
			'-'
		]);
		var toolbar2 = new Ext.Toolbar([
			'-',
			{text : '通过',iconCls:'complete',handler:testPassed},
			'-',{xtype: 'tbspacer'},{xtype: 'tbspacer'},
            '-',
            {text : '申生产',iconCls:'complete',handler:appToPrd},'-',
      {xtype: 'tbspacer'},{xtype: 'tbspacer'},{xtype: 'tbspacer'},{xtype: 'tbspacer'},
      '-','变为:',chgtestCombo,'-',
      {text : '提交变更',iconCls:'complete',handler:chgTester},'-'
		]);
		var toolbar3 = new Ext.Toolbar([
			'-','   ',
			{id:'queryActsBrn',text : '询',iconCls:'query',handler:queryToTest},
			'    ','-'
		]);
		//定义数据集对象

		var actStore = new Ext.data.GroupingStore({
			autoLoad :false,
			groupField:'envname',
			sortInfo:{field: 'taskid', direction: "ASC"},
			reader: new Ext.data.JsonReader({    
                id:"actid",totalProperty:'results',root:'items',successProperty :'success'
			},
			Ext.data.Record.create([
				{name: 'actid',mapping:'actid'},
				{name: 'taskid',mapping:'taskid'},
				{name: 'brhcode',mapping:'brhcode'},
				{name: 'brhname',mapping:'brhname'},
				{name: 'actno',mapping:'actno'},
				{name: 'devcode',mapping:'devcode'},
				{name: 'devname',mapping:'devname'},
				{name: 'modulecode',mapping:'modulecode'},
				//缺字段
				{name: 'envcode',mapping:'envcode'},
				{name: 'envname',mapping:'envname'},
				{name: 'spclconf',mapping:'spclconf'},
				{name: 'spclconfname',mapping:'spclconfname'},
				{name: 'relatives',mapping:'relatives'},
				{name: 'deployedEnvs',mapping:'deployedEnvs'},
				{name: 'urgeflag',mapping:'urgeflag'}
			])
			),
			proxy : new Ext.data.HttpProxy({
				url : 'getActInTestList.action'
			})
		})
		var urgeflagRecord = Ext.data.Record.create([
			                                         {name: 'codevalue',mapping:'codevalue'},
			                                         {name: 'codename',mapping:'codename'}
			                                     ]); 
    var urgeflagStore=new Ext.data.Store({    
               //设定读取的地址
               proxy: new Ext.data.HttpProxy({url: 'getComboxValues.action?type=urgeflag'}),    
               //设定读取的格式    
               reader: new Ext.data.JsonReader({    
                   id:"codevalue",totalProperty:'results',root:'items',successProperty :'success'
               }, codeRecord),    //urgeflagRecord
               remoteSort: true
           });
   		
   		//urgeflagStore.load();
		
		//创建Grid表格组件
		var cb = new Ext.grid.CheckboxSelectionModel()
		var actGrid = new Ext.grid.EditorGridPanel({
			applyTo : 'grid-div',
			frame:true,
			tbar : toolbar,
			//bbar : toolbar2,
			bbar : new Ext.PagingToolbar({//分页工具栏
				store : actStore,
				pageSize : 12,
				displayInfo : true,
				displayMsg : '第 {0} 条到 {1} 条，一共 {2} 条',
				emptyMsg : "没有记录"
			}),
			store: actStore,
			clicksToEdit:1,
			//height: 480,
			width:860,
			stripeRows : true,
			autoScroll : true,
			viewConfig : {
				autoFill : true
			},
			sm : cb,
			columns: [//配置表格列

				new Ext.grid.RowNumberer({
					header : '行',
					width : 40
				}),//表格行号组件
				cb,
				
				{header: "块", width: 70, dataIndex: 'modulename', sortable: true,renderer:showDetail},
				{header: "述", width: 120, dataIndex: 'content', sortable: true,editor:new Ext.form.TextField({
						allowBlank : true,
						readOnly:true
					}),renderer:showDetail},
				{header: "注", width: 80, dataIndex: 'remark', sortable: true,renderer:showDetail},
				{header: "联", width: 120, dataIndex: 'relatives', sortable: true,editor:new Ext.form.TextField({
						allowBlank : true,
						readOnly:true
					}),renderer:showDetail}
				
			],
        	view: new Ext.grid.GroupingView({
            	//forceFit:true,
            	hideGroupedColumn:true,
            	groupByText:'使用当前字段进行分组',
            	showGroupsText:'表格分组',
            	groupTextTpl: '{text} ({[values.rs.length]} {["个活动"]})'
        	}),   
            listeners: {   
                'render': function () { 
                    toolbar2.render(this.bbar); //add one tbar     
                    toolbar3.render(this.tbar); //add one tbar   
                }   
            } 
		});
		//创建新增或修改书籍信息的form表单
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
		function showDetail(value, meta, rec, rowIdx, colIdx, ds){
			return '<div ext:qtitle="" ext:qtip="' + value + '">'+ value +'</div>';
		}
		function queryToTest(){
			devPerson = devCombo.getValue();
			testPerson = testCombo.getValue();
			env = envCombo.getValue();
			var actQuery = Ext.get('actquery').dom.value;
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在查询活动信息......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			
			actStore.baseParams = {DevCode:devPerson, TestCode:testPerson,envCode:env,
				actQuery:actQuery};  
			actStore.load({params:{start:0,limit:12},
				callback:function afterQuery(response,options, success){
					msgTip.hide();
              		if(!success)
              		{
                	  Ext.MessageBox.alert("提示","没有数据！");
                	  actStore.removeAll();
              		}
    		 	}
    		});
		}
		function testPassed(){
			dealActs('testPassed.action');
		}
		function dealActs(url){
			var acts = actGrid.getSelectionModel().getSelections();
			if(acts.length == 0){
				Ext.MessageBox.alert("提示","请选择待提交的活动！");
				return;
			}
			var changed = actStore.modified;
			var missed = false;
	        Ext.each(changed, function(record) {
	        	 var flag = true;	
	        	 Ext.each(acts, function(item) {
	        	 	if(record.data.actid == item.data.actid){
	        	 		flag = false;
	        	 	}
	        	 });
	        	 if(flag){
	        	 	missed = true;
	        	 }
	        });
			if(missed){
				Ext.MessageBox.confirm('提示',
					'有些记录您做了修改，但没有选择提交，是否继续？',
					function(id){
						if(id == 'yes'){
							commitActs(url);
						}
					});
			}else{
				commitActs(url);
			}
		}
		function commitActs(url){
			var proposer = '<%=tUsercode%>';
			var acts = actGrid.getSelectionModel().getSelections();
        	var jsonData = "["; 
        	var appendRecordStrFn = function(record) {   
            	record.data.indexNo = this.indexOf(record);   
            	jsonData += Ext.encode(record.data) + ",";   
       	 	};   
        	Ext.each(acts , appendRecordStrFn, actStore);   
        	jsonData += "]";
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在提交......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			Ext.Ajax.request({
				url : url,
				params : {proposer:proposer,jsonData:jsonData},
				method : 'POST',
				success : function(response,options){
					msgTip.hide();
					var result = Ext.util.JSON.decode(response.responseText);
					Ext.Msg.alert('提示',result.msg,function(){
						if(!result.success){
							actStore.removeAll();
							queryToTest();
						}else{
							for(var i = 0 ; i < acts.length ; i++){
								actStore.remove(acts[i]);
							}
						}
						actStore.modified = [];
					});
				},
				failure : function(response,options){
					msgTip.hide();
					Ext.Msg.alert('提示','提交失败，请联系管理员！');
				}
			});
		}
		function appToPrd(){
			dealActs('appToPrd.action');
		}
		function chgTester(){
			var proposer = chgtestCombo.getValue();
			var acts = actGrid.getSelectionModel().getSelections();
			if(acts.length == 0){
				Ext.MessageBox.alert("提示","请选择待提交的活动！");
				return;
			}
      var jsonData = "["; 
      var appendRecordStrFn = function(record) {   
            	record.data.indexNo = this.indexOf(record);   
            	jsonData += Ext.encode(record.data) + ",";   
       	 	};   
        	Ext.each(acts , appendRecordStrFn, actStore);   
        	jsonData += "]";
			var msgTip = Ext.MessageBox.show({
				title:'提示',
				width : 250,
				msg:'正在提交......',
				progress:true,
				wait:true,
				waitConfig:{
                     interval:1000
                }
			});
			Ext.Ajax.request({
				url : 'chgTester.action',
				params : {proposer:proposer,jsonData:jsonData},
				method : 'POST',
				success : function(response,options){
					msgTip.hide();
					var result = Ext.util.JSON.decode(response.responseText);
					Ext.Msg.alert('提示',result.msg,function(){
						actStore.removeAll();
						queryToTest();
						actStore.modified = [];
					});
				},
				failure : function(response,options){
					msgTip.hide();
					Ext.Msg.alert('提示','提交失败，请联系管理员！');
				}
			});
		}
	});

图：


下面的是一些总结杂项：

Ext.Ajax.request({

url : 'QueryActivit.action'+actids,

method : 'POST',

success : function(response,options){

var result = Ext.util.JSON.decode(response.responseText);//json->object

//eval('var a='+response.responseText);//和上面的功能类似

//alert(a.items[0].actid);

//alert('result'+result.items[0].actid);

var Record = actStore2.recordType;

for(var i=0;i<result.items.length;i++){

var r = new Record(result.items[i]); //转成Record

actStore2.insert(0,r); 

}

}

});

 

数据库获取数据，然后把一个json换成一个object，然后把他们转换成record。

actStore2一个store

Record:4.0里面叫model 其实就是一个类


 

 

 

renderer:function（value， cellmeta， record， rowIndex， columnIndex， store）{

 

}

1.value是当前单位格的值

2.cellmeta里保存的是cellId单位格id，id是列号，css是这个单位格的css样式。

3.record是所在行数据，你想要什么，record.data["id"]就获得了。

4.rowIndex是行号，不是从头往下数的意思，而是分页后的成果。

5.columnIndex列号。

6.store，这个是你创建表格时辰传递的ds，也就是说表格里所有的数据，你都可以随便调用，

 

 

生日换年龄：

(cast(to_char(APPNTBIRTHDAY,'yyyy')  as number(10)) - cast(to_char(APPNTBIRTHDAY,'yyyy')  as number(10))) as age

 

上面的一些例子仅供学习，如果你想那过去直接用，基本是不可能的。需要自己改动。只要领会精神就可以了。


a574258039
关注
专栏目录
EXTJS 经典 案例
06-16
EXTJS经典案例 经典收藏版 EXTJS经典案例 经典收藏版 EXTJS经典案例 经典收藏版
Extjs应用案例--<酒店管理系统>
11-13
Extjs应用案例： 本酒店管理系统采用三层架构，SQL Server数据库。最主要的是采用了Extjs框架。 酒店系统实现了部分功能。aspx后台页面几乎无代码。业务逻辑处理全部采用Extjs自带的函数。对于学习Extjs的框架的...
一个ExtJS实例
程序员小董的专栏
05-12 796
聊聊ExtJS 这几天接触了一个项目 前台用的是extjs 发现这个东西还是有点意思的  就把前台的部分 剥离了下来 有兴趣的朋友可以当做模板学习 不多说先上效果图 这篇文章 可以看作是ext知识的一个汇总 因此我不想讲太多细碎的知识点 但我会一一之命这些知识点在哪里可以找到 另一方面 ext细碎的知识点确实太多 自己没有精力也不想搞的太清楚 够用就行
Extjs grid控件应用
wwwlike
03-09 181
Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。 首先，一个表格应该有列定义，即定义表头Column...
ExtJS 序言一
weixin_30237281的博客
01-04 143
最近看到博客里好多关于ExtJS的不少文章，自己在网上也搜索里一些，特整理出来给初学者学习下，望大家不要介意。 1.1.一切从extjs发布包开始 非常幸运的是，我们可以免费去extjs.com下载ext发布包，里边源代码，api文档，例子一应俱全。不过要是想访问svn获得最新的代码，就要花钱了。不过我们现阶段只要这个免费的发布包就可以了，通过里边的...
推荐一个ExtJS的综合示例
phphot
01-24 2098
由于ExtJS算是一重量级的客户端框架了，如何把他与传统的Web应用集成也是比较重要的，是所有的地方都用Ext，还是在某些地方使用，另外是每一个页面都引入ext-all.js，还是让整个应用只加载在这个大家伙一次，如何开发自定义的控件，如何充分使用javascript的面向对象特性对我们的应用进行封装，这些也是实际开发中非常关注的。　　学习ExtJS，感觉如果不在项目中使用的话，仅仅是看文
extjs案例使用详解
11-28
众多的案例详细介绍了extjs的使用和实现效果
extjs实用案例
09-12
本资源包括了extjs中的常用实例，适用于初学者
ExtJS4.2入门案例
10-31
ExtJS4.2入门案例 博客：http://blog.csdn.net/coco2d_x2014/article/details/52986835
ExtJs grid使用详细
nxyc_twz
12-08 281
Ext2.0是一个javascript框架，它的Grid控件和其它可以显示数据的控件，能够支持多种数据类型，如二维数组、Json数据和XML数据，甚至包括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.Store，通过它我们可以把任何格式的数据转化成grid可以使用的形式，这样就不需要为每种数据格式写一个grid的实现了。 首先，一个表格应该有列定义，即定义表头ColumnMod...
Extjs大型项目实例
12-25
Extjs大型项目
extjs 4.2.1 examples 官方例子
11-27
http://docs.sencha.com/extjs/4.2.1/ 参考这个 ，与这个一样
extjs4实例
03-26
NULL 博文链接：https://wcf0987.iteye.com/blog/1166232
extjs4 项目例子
02-07
这个项目里面包含了本人从开始初学EXTJS4的全部事例：grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释，还有一个file.txt文件是本人的小小总结，还没完整。我也是一个第一次接触EXT的初学者，只希望能与大家共享、学习，许多不到的地方希望大家能体谅，用myeclipse8.6运行项目，数据库用mysql，大家给力，免费下载。
extJs例子-------
12-16
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
一个ExtJS的综合示例
天一的专栏
01-22 216
　　ExtJS算是一重量级的客户端框架了,如何把他与传统的Web应用集成？是所有的地方都用Ext，还是在某些地方使用，另外是每一个页面都引入ext-all.js，还是让整个应用只加载在这个大家伙一次？我们又该如何开发自定义的控件，如何充分使用javascript的面向对象特性对我们的应用进行封装呢？ 　　下面推荐我们团队的williamRaym及冷雨所做的一个ExtJS综合示例，是一个ExtJ...
ExtJS示例
zhangzikui的专栏
12-22 2088
<% String path = request.getContextPath(); %> 账户信息查询 /ext/resources/css/xtheme-silverCherry.css" /> /nresources/default/form_table.css" /> /ext/resources/css/prefix.css" /> /ext
一些基于ExtJS的Desktop特效应用的网站
weixin_30266885的博客
10-26 115
http://qwikioffice.com/desktop-demo/ http://recorall.org/jsdesk/ http://jeamy.werk1.at/ http://www.digitalbucket.net/User/FileManager.aspx http://www.feyasoft.com/home.htm http://gsylva...
EXTJS 组件开发（完整例子）
hongweigg的专栏
01-15 7617
目标：EXTJS组件开发，从component基础实现一个TAB控件。 使用EXTJS版本为5.0。测试通过。 这个例子还很初级，仅仅是说明通过示例使用EXTJS进行组件开发的一个基本思路。 EXT JS TEST .tabsDiv{ width:500px;height:450px; margin-top: 0px; margin-left: 0px
ExtJS入门实践：从简单案例到TabPanel
这些案例展示了EXTJS的基础用法，对于初学者来说，是一个很好的起点，可以帮助理解EXTJS的核心组件和它们之间的交互方式。通过学习和实践这些案例，开发者可以快速掌握EXTJS的基本操作，进而构建更复杂的Web应用程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值