《ExtJs学习资料67学生信息管理实例.doc》由会员分享，可在线阅读，更多相关《ExtJs学习资料67学生信息管理实例.doc（6页珍藏版）》请在三一文库上搜索。
1、1、引入ExtJs框架文件（存入Global.js文件中）document.write("<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"/> ");document.write("<script type="text/javascript" src="./extjs/adapter/ext/ext-base.js"></scr
2、ipt>");document.write("<script type="text/javascript" src="./extjs/ext-all.js"></script>");document.write("<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>");2、引入Global.js文件<script
3、type="text/javascript" src="Global.js"></script><script src="js/ListInfo.js"></script><style type="text/css"> .myIcon background:url(js/icon.png) 0 4px no-repeat !important .editIcon background:url(js/edit.png) 0 4px no-repeat !impor
4、tant </style>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 "<span style='color:green;font-weight:bold;'>女</span>"else if (value = 1) retur
5、n "<span style='color:red;font-weight:bold;'>男</span>"var studentRecord = Ext.data.Record.create( name: "id", type: "int" , name: "code", type: "string" , name: "name", type: "string" , name: "sex", t
6、ype: "int" , name: "age", type: "int" , name: "political", type: "string" , name: "origin", type: "string" , name: "professional", type: "string" , name: "addTime", type: "string");var myMas
7、k = new Ext.LoadMask(Ext.getBody(), msg: "正在载入数据,请耐心等待." );myMask.show();var studentStore = new Ext.data.Store(proxy: new Ext.data.HttpProxy( url: "" ),reader: new Ext.data.JsonReader(totalProperty: 'totalProperty',root: 'root', studentRecord),remoteSort: true,bas
8、eParams: name: "myValue" /不会丢失,在reload时自动加到url后面,sortInfo: field: "addTime",direction: "DESC",listeners: "load": function(thisStore, options)myMask.hide(););/或在下面进行配置/studentStore.baseParams = /name: "myValue" /不会丢失,在reload时自动加到url后面/studentStore.loa
9、d(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, /
10、实现复选框(在GridPanel中也要声明) header: "学号", dataIndex: "code", width: 30 , header: "姓名", dataIndex: "name", width: 30 , header: "性别", dataIndex: "sex", renderer: sexRenderer, width: 20, align: "center" , header: "年龄", dataIndex
11、: "age", width: 20, align: "center" , header: "政治面貌", dataIndex: "political", width: 30 , header: "籍贯", dataIndex: "origin", width: 40 , header: "所属系", dataIndex: "professional", width: 40 , id: "addTime", /在gr
12、id组件中声明autoExpandColumn时需要header: "添加时间", dataIndex: "addTime");GridColumns.defaultSortable = true;var grid = new Ext.grid.GridPanel(title: "学生信息列表",region: "center",/loadMask: true,/或者是loadMask: msg: "正在载入数据,请耐心等待." ,frame: true,iconCls: "myIco
13、n",store: studentStore,cm: GridColumns,autoExpandColumn: "addTime",stripeRows: true, /产生斑马线(每隔一行显示背景颜色)隔行换色trackMouseOver:true, /鼠标移动到某一行时，该行会变成高亮显示border:true, /是否去掉边框/sm:sm, /实现复选框(在ColumnModel中也要声明)sm: new Ext.grid.RowSelectionModel( singleSelect: true ),/实现单选功能(多选和单选只能选择一种方式)viewC
14、onfig: 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.
15、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, defa
16、ultType: "textfield",width: 300, monitorValid: true,defaults: width: 200, allowBlank: false ,items: xtype: "hidden", id: "hId", name: "id" , fieldLabel: "学号", name: "code" , fieldLabel: "姓名", name: "name" , fieldLabel: &
17、quot;年龄", 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&
18、quot;, "男", "0", "女",fields: "key", name: "value", type: "string", renderer: sexRenderer ),displayField: "value", valueField: "key", triggerAction: "all", mode: "local",/emptyText:"请选择.",val
19、ue: "1",readOnly: true, fieldLabel: "政治面貌",name: "myPolitical",xtype: "combo",store: new Ext.data.SimpleStore(data: "群众", "党员", "团员",fields: "txt"),displayField: "txt", valueField: "txt", hiddenName:
20、"political",triggerAction: "all", mode: "local", value: "团员", readOnly: true, fieldLabel: "籍贯",name: "origin", fieldLabel: "所属系",name: "professional",buttons: formBind: true,id: "add",text: "添 加",hand
21、ler: function()if (!form.getForm().isValid() return; /直接返回,阻止下面的程序执行form.getForm().submit(url: "",waitTitle: "系统提示",waitMsg: "系统正在执行你的请求,请耐心等待.",success: function(basicForm, response)Ext.Msg.alert("系统提示", response.result.msg);form.getForm().reset();form.button
22、s0.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
23、.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.M
24、sg.confirm("系统提示", "确定要删除该条记录吗?", function(btnValue)if (btnValue = "yes") form.getForm().reset();form.buttons0.setText("添 加");Ext.Ajax.disableCaching = false; /禁用缓存Ext.Ajax.defaultHeaders = accept: "application/json"Ext.Ajax.request(url: ""
25、,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.responseText);alert(obj.msg);,para
26、ms: id: id);else Ext.Msg.alert("系统提示", "请选择要删除的学生的信息"););var view = new Ext.Viewport(layout: "border",frame: true,items: region: "north",height: 50,contentEl: "head", grid, form, region: "south",height: 22,contentEl: "bottom"););5、HMTL源代码<div id="head" style="text-align:center;font-weight:bold;font-size:200%">学生信息管理</div><div id="bottom" style="text-align:right;">版权所有 © 2010-2011</div>6 / 6文档可自由编辑打印