ExtJs学习资料67学生信息管理实例.doc

1、引入ExtJs框架文件（存入Global.js文件中）document.write( );document.write();document.write();document.write();2、引入Global.js文件 .myIcon background:url(js/icon.png) 0 4px no-repeat !important .editIcon background:url(js/edit.png) 0 4px no-repeat !important 3、效果图=4、JS源代码Ext.onReady(function()Ext.QuickTips.init();Ext.state.Manager.setProvider(new Ext.state.CookieProvider();var sexRenderer = function(value)if (value = 0) return 女;else if (value = 1) return 男;var studentRecord = Ext.data.Record.create( name: id, type: int , name: code, type: string , name: name, type: string , name: sex, type: int , name: age, type: int , name: political, type: string , name: origin, type: string , name: professional, type: string , name: addTime, type: string);var myMask = new Ext.LoadMask(Ext.getBody(), msg: 正在载入数据,请耐心等待. );myMask.show();var studentStore = new Ext.data.Store(proxy: new Ext.data.HttpProxy( url: http:/localhost/Server/ListStudentInfo.ashx ),reader: new Ext.data.JsonReader(totalProperty: totalProperty,root: root, studentRecord),remoteSort: true,baseParams: name: myValue /不会丢失,在reload时自动加到url后面,sortInfo: field: addTime,direction: DESC,listeners: load: function(thisStore, options)myMask.hide(););/或在下面进行配置/studentStore.baseParams = /name: myValue /不会丢失,在reload时自动加到url后面/studentStore.load(params: /直接加在load方法params属性里,当进行翻页时会丢失自定义参数start: 0, /不会丢失limit: 10/不会丢失/,name: myValue /自定义参数进行翻页时会丢失);var sm = new Ext.grid.CheckboxSelectionModel( /handleMouseDown:Ext.emptyFn /避免有多个选项时,单击其它行会取消多选的情况);var GridColumns = new Ext.grid.ColumnModel(new Ext.grid.RowNumberer(), /添加行号/sm, /实现复选框(在GridPanel中也要声明) header: 学号, dataIndex: code, width: 30 , header: 姓名, dataIndex: name, width: 30 , header: 性别, dataIndex: sex, renderer: sexRenderer, width: 20, align: center , header: 年龄, dataIndex: age, width: 20, align: center , header: 政治面貌, dataIndex: political, width: 30 , header: 籍贯, dataIndex: origin, width: 40 , header: 所属系, dataIndex: professional, width: 40 , id: addTime, /在grid组件中声明autoExpandColumn时需要header: 添加时间, dataIndex: addTime);GridColumns.defaultSortable = true;var grid = new Ext.grid.GridPanel(title: 学生信息列表,region: center,/loadMask: true,/或者是loadMask: msg: 正在载入数据,请耐心等待. ,frame: true,iconCls: myIcon,store: studentStore,cm: GridColumns,autoExpandColumn: addTime,stripeRows: true, /产生斑马线(每隔一行显示背景颜色)隔行换色trackMouseOver:true, /鼠标移动到某一行时，该行会变成高亮显示border:true, /是否去掉边框/sm:sm, /实现复选框(在ColumnModel中也要声明)sm: new Ext.grid.RowSelectionModel( singleSelect: true ),/实现单选功能(多选和单选只能选择一种方式)viewConfig: forceFit: true, autoFill: true, emptyText: 数据库暂无信息 ,bbar: new Ext.PagingToolbar(pageSize: 10,store: studentStore,displayInfo: true),listeners: rowclick: function(gird, rowIndex, e)var record = grid.getStore().getAt(rowIndex);form.getForm().loadRecord(record);/或者是/form.getForm().loadRecord(grid.getSelectionModel().getSelected();form.buttons0.setText(修 改););var form = new Ext.form.FormPanel(title: 编辑学生信息, region: east, frame: true, iconCls: editIcon,labelWidth: 60, labelAlign: right, autoHeight: true, defaultType: textfield,width: 300, monitorValid: true,defaults: width: 200, allowBlank: false ,items: xtype: hidden, id: hId, name: id , fieldLabel: 学号, name: code , fieldLabel: 姓名, name: name , fieldLabel: 年龄, name: age, xtype: numberfield, allowNegative: false, maxLength: 3,minLength: 1, minValue: 5, maxValue: 80 , fieldLabel: 性别, name: mySex, hiddenName: sex, xtype: combo,store: new Ext.data.SimpleStore(data: 1, 男, 0, 女,fields: key, name: value, type: string, renderer: sexRenderer ),displayField: value, valueField: key, triggerAction: all, mode: local,/emptyText:请选择.,value: 1,readOnly: true, fieldLabel: 政治面貌,name: myPolitical,xtype: combo,store: new Ext.data.SimpleStore(data: 群众, 党员, 团员,fields: txt),displayField: txt, valueField: txt, hiddenName: political,triggerAction: all, mode: local, value: 团员, readOnly: true, fieldLabel: 籍贯,name: origin, fieldLabel: 所属系,name: professional,buttons: formBind: true,id: add,text: 添 加,handler: function()if (!form.getForm().isValid() return; /直接返回,阻止下面的程序执行form.getForm().submit(url: http:/localhost/Server/save.ashx,waitTitle: 系统提示,waitMsg: 系统正在执行你的请求,请耐心等待.,success: function(basicForm, response)Ext.Msg.alert(系统提示, response.result.msg);form.getForm().reset();form.buttons0.setText(添 加);/studentStore.reload(); /重新加载后台数据/或者是grid.getStore().reload(); /重新加载后台数据,failure: function(basicForm, response)Ext.Msg.alert(系统提示, response.result.msg););, text: 清 空,handler: function()if (Ext.getCmp(add).disabled = false) form.buttons0.setText(添 加);form.getForm().reset();, text: 删 除,handler: function()var id = form.findByType(hidden)0.getValue();/id=form.findById(hId).getEl().getValue();/id=form.getForm().findField(hId).getValue();/alert(id);if (id != ) Ext.Msg.confirm(系统提示, 确定要删除该条记录吗?, function(btnValue)if (btnValue = yes) form.getForm().reset();form.buttons0.setText(添 加);Ext.Ajax.disableCaching = false; /禁用缓存Ext.Ajax.defaultHeaders = accept: application/jsonExt.Ajax.request(url: http:/localhost/Server/Del.ashx,success: function(response, options)studentStore.remove(grid.getSelectionModel().getSelected();grid.getView().refresh(); /刷新grid视图,保证行号可以连续var obj = Ext.decode(response.responseText);alert(obj.msg);,failure: function(response, options)var obj = Ext.decode(response.responseTe