Ext里面Store的例子

var gp; Ext.onReady(function(){ //创建store var meta = {totalProperty:'totalCount',root:'rows'}; var student = new Ext.data.Record.create( [{name:'id',type:'int'}, {name:'stuId'}, {name:'stuName'}, {name:'stuAge',type:'int'}, {name:'stuBirth'}]); var store = new Ext.data.Store({ proxy:new Ext.data.HttpProxy({url:'list.action'}), reader:new Ext.data.JsonReader(meta,student) }); var param = {params:{start:0,limit:10}}; store.load(param); //创建RowSelectionModel var sm = new Ext.grid.RowSelectionModel({singleSelect:false}); //创建ColumnModel var cm = new Ext.grid.ColumnModel([ {header:'学号',dataIndex:'stuId',width:240,sortable:true}, {header:'姓名',dataIndex:'stuName',width:240}, {header:'年龄',dataIndex:'stuAge',width:240}, {header:'出生日期',dataIndex:'stuBirth',width:240}, {header:'操作',dataIndex:'stuId',renderer:operation,width:280}]); //搜索方法 function search() { var searchText = Ext.get('searchTest').getValue(); param = {params:{start:0,limit:10,searchText:searchText}}; store.load(param); } //显示全部数据的方法 function displayAll() { param = {params:{start:0,limit:10}}; store.load(param); } //创建新增按钮 var insertBtn = new Ext.Toolbar.Button({ id:'add', text:'增加', icon:'images/add.png', cls: "x-btn-text-icon bmenu", handler:insertWin }); //创建新增按钮 var updateBtn = new Ext.Toolbar.Button({ id:'update', text:'修改数据', icon:'images/application_edit.png', cls: "x-btn-text-icon bmenu", handler:updateWin }); //创建删除按钮 var deleteBtn = new Ext.Toolbar.Button({ id:'delete', text:'删除数据', icon:'images/application_delete.png', cls: "x-btn-text-icon bmenu", handler:deleteWin }); //创建Label var searchLabel = new Ext.form.Label({ id:'label', text:'输入姓名:' }); //创建搜索文本 var searchTest = new Ext.form.TextField({ id:'searchTest', name:'searchTest1', maxLength:15, value:'', width:100 }); //创建搜索按钮 var searchBtn = new Ext.Toolbar.Button({ id:'search', text:'搜索', handler:search }); //创建刷新按钮 var displayAllBtn = new Ext.Toolbar.Button({ id:'displayAll', text:'刷新', icon:'images/arrow_refresh.png', cls: "x-btn-text-icon bmenu", handler:displayAll }); //创建PagingToolbar var pt = new Ext.PagingToolbar({ displayInfo:true, displayMsg:'第 {0}条到第{1}条数据,总共{2}页', emptyMsg:'没有找到任何数据', pageSize:10, store:store }); //创建GridPanel gp = new Ext.grid.GridPanel({ title:'显示学生详细信息', cm:cm, loadMask:{msg:'正在加载数据.....'}, store:store, stripeRows:true, renderTo:'display', selModel:sm, width:Ext.get('display').getWidth(), autoHeight:true, tbar:['|',insertBtn,'|',updateBtn,'|',deleteBtn, '|',searchLabel,searchTest,'|',searchBtn,'|',displayAllBtn], bbar:pt }); gp.on('rowclick',rowclick); function rowclick(gp, rowIndex,e){ alert('rowIndex:'+rowIndex); } }); //增加一个学生信息的方法 function insertWin(){ var form1 = new Ext.form.FormPanel({ renderTo:'display', frame:true, bodyStyle:'padding:5px 5px 0', onSubmit: Ext.emptyFn, defaults:{width:230}, items:[{ xtype:'textfield', allowBlank:false, fieldLabel:'请输入学号', id:'stuid', minLength:3, name:'stuId', regex:new RegExp('[0-9]{3,}'), regexText:'输入的学号不合法' },{ xtype:'textfield', allowBlank:false, fieldLabel:'请输入姓名', id:'stuname', minLength:2, name:'stuName', regex:/^[A-Za-z0-9/u4e00-/u9fa5]+$/ },{ xtype:'numberfield', allowBlank:false, fieldLabel:'请输入年龄', id:'stuage', minLength:1, minValue:1, maxValue:100, name:'stuAge' },{ xtype:'datefield', allowBlank:false, fieldLabel:'请选择生日', format:'y-m-d', id:'stubirth', name:'stuBirth', readOnly:true }], buttons:[{ xtype:'button', text:'保存', type:'button', handler:function(){ if(form1.getForm().isValid()){ form1.getForm().submit({ method:'POST', url:'addStudent.action', waitTitle:'发送', waitMsg:'正在发送数据...', success:insertSuccess, failure:insertFailure }); } } },{ xtype:'button', text:'重置', type:'reset', handler:function(){ form1.getForm().reset(); } }] }); var win = new Ext.Window({ title:'添加学生信息窗口', items:form1, height:200, width:400, layout:'fit' }); win.show(); function insertSuccess(form,action){ Ext.Msg.alert('提示','添加学生的信息成功'); gp.getStore().reload(); win.hide(); } function insertFailure(form,action){ Ext.Msg.alert('提示','添加学生的信息失败'); win.hide(); } } //修改学生信息的方法 function updateWin(){ var flag = checkSelectRow(); if(!flag) { Ext.MessageBox.alert('提示','请先选中一行数据'); return; } var record = gp.getSelectionModel().getSelected(); var form1 = new Ext.form.FormPanel({ renderTo:'display', frame:true, defaults:{width:230}, items:[{ xtype:'hidden', id:'Id', name:'id', readOnly:true, value:record.get('id') },{ xtype:'textfield', allowBlank:false, fieldLabel:'请输入学号', id:'stuid', minLength:3, name:'stuId', readOnly:true, value:record.get('stuId'), regex:new RegExp('[0-9]{3,}'), regexText:'输入的学号不合法' },{ xtype:'textfield', allowBlank:false, fieldLabel:'请输入姓名', id:'stuname', minLength:2, name:'stuName', value:record.get('stuName'), regex:/^[A-Za-z0-9/u4e00-/u9fa5]+$/, regexText:'输入的姓名不合法' },{ xtype:'numberfield', allowBlank:false, fieldLabel:'请输入年龄', id:'stuage', minLength:1, name:'stuAge', value:record.get('stuAge'), minValue:1, maxValue:100 },{ xtype:'datefield', allowBlank:false, fieldLabel:'请选择生日', format:'y-m-d', id:'stubirth', name:'stuBirth', value:record.get('stuBirth'), readOnly:true }], buttons:[{ xtype:'button', text:'修改', formBind: true, handler:function(){ form1.getForm().submit({ url:'updateStudent.action', method:'POST', waitTitle:'发送', waitMsg:'正在发送数据...', success:updateSuccess, failure:updateFailure }); } },{ xtype:'button', text:'重置', type:'reset', handler:function(){ form1.form.reset(); } }] }); var win = new Ext.Window({ title:'修改学生信息窗口', items:form1, height:200, width:400, layout:'fit' }); win.show(); function updateSuccess(form,action){ Ext.Msg.alert('提示','修改学生的信息成功'); gp.getStore().reload(); win.hide(); } function updateFailure(form,action){ Ext.Msg.alert('提示','修改学生的信息失败'); win.hide(); } } //删除学生信息的方法 function deleteWin(){ var flag = checkSelectRow(); if(!flag) { Ext.MessageBox.alert('提示','请先选中一行数据'); return; } var record = gp.getSelectionModel().getSelected(); Ext.MessageBox.confirm('确认删除','您真的要删除所选的数据吗?',function(btn,text){ var param = "id="+record.get('id'); if(btn == 'yes'){ var info; Ext.Ajax.request({ url:'deleteStudent.action', params:param, method:'POST', success:function(request,response){ if(request.responseText == '删除学生信息成功'){ gp.getStore().remove(record); gp.getStore().reload(); } else{ Ext.MessageBox.alert('错误','删除学生信息失败'); } } }); } }); } //产生操作列的代码 function operation() { return "<input type=/"image/" src="/" mce_src="/""images/application_edit.png/" alt=/"修改/" onclick=/"updateWin();/" />   " +"<input type=/"image/" src="/" mce_src="/""images/application_delete.png/" alt=/"删除/" onclick=/"deleteWin();/" />   "; } //判断是否选中一行的方法 function checkSelectRow(){ var rows = gp.getSelectionModel().getCount(); if(rows == 0) { return false; } else { return true; } }