student.js
上传用户:zaktkj
上传日期:2022-08-08
资源大小:5770k
文件大小:8k
源码类别:

JavaScript

开发平台:

JavaScript

  1. Ext.onReady(function() {
  2.     Ext.QuickTips.init();
  3.     var sexRenderer = function(value) {
  4.         if (value == 1) {
  5.             return '<span style="color:red;font-weight:bold;">男</span>';
  6.         } else if (value == 2) {
  7.             return '<span style="color:green;font-weight:bold;">女</span>';
  8.         }
  9.     };
  10.     var StudentRecord = Ext.data.Record.create([
  11.         {name: 'id', type: 'int'},
  12.         {name: 'code', type: 'string'},
  13.         {name: 'name', type: 'string'},
  14.         {name: 'sex', type: 'int'},
  15.         {name: 'age', type: 'int'},
  16.         {name: 'political', type: 'string'},
  17.         {name: 'origin', type: 'string'},
  18.         {name: 'professional', type: 'string'}
  19.     ]);
  20.     var store = new Ext.data.Store({
  21.         proxy: new Ext.data.HttpProxy({url: './jsp/list.jsp'}),
  22.         reader: new Ext.data.JsonReader({
  23.             totalProperty: 'totalCount',
  24.             root: 'result'
  25.         },StudentRecord),
  26.         remoteSort: true
  27.     });
  28.     store.load({params:{start:0,limit:15}});
  29.     var columns = new Ext.grid.ColumnModel([
  30.         {header: '学号', dataIndex: 'code'},
  31.         {header: '姓名', dataIndex: 'name'},
  32.         {header: '性别', dataIndex: 'sex', renderer: sexRenderer},
  33.         {header: '年龄', dataIndex: 'age'},
  34.         {header: '政治面貌', dataIndex: 'political'},
  35.         {header: '籍贯', dataIndex: 'origin'},
  36.         {header: '所属系', dataIndex: 'professional'}
  37.     ]);
  38.     columns.defaultSortable = true;
  39.     // grid start
  40.     var grid = new Ext.grid.GridPanel({
  41.         title: '学生信息列表',
  42.         region: 'center',
  43.         loadMask: true,
  44.         store: store,
  45.         cm: columns,
  46.         sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
  47.         viewConfig: {
  48.             forceFit: true
  49.         },
  50.         bbar: new Ext.PagingToolbar({
  51.             pageSize: 15,
  52.             store: store,
  53.             displayInfo: true
  54.         })
  55.     });
  56.     // grid end
  57.     // form start
  58.     var form = new Ext.form.FormPanel({
  59.         title: '编辑学生信息',
  60.         region: 'east',
  61.         frame: true,
  62.         width: 300,
  63.         autoHeight: true,
  64.         labelAlign: 'right',
  65.         labelWidth: 60,
  66.         defaultType: 'textfield',
  67.         defaults: {
  68.             width: 200,
  69.             allowBlank: false
  70.         },
  71.         items: [{
  72.             xtype: 'hidden',
  73.             name: 'id'
  74.         },{
  75.             fieldLabel: '学号',
  76.             name: 'code'
  77.         },{
  78.             fieldLabel: '姓名',
  79.             name: 'name'
  80.         },{
  81.             fieldLabel: '年龄',
  82.             name: 'age',
  83.             xtype: 'numberfield',
  84.             allowNegative: false
  85.         },{
  86.             fieldLabel: '性别',
  87.             name: 'sexText',
  88.             hiddenName: 'sex',
  89.             xtype: 'combo',
  90.             store: new Ext.data.SimpleStore({
  91.                 fields: ['value','text'],
  92.                 data: [['1','男'],['2','女']]
  93.             }),
  94.             emptyText: '请选择',
  95.             mode: 'local',
  96.             triggerAction: 'all',
  97.             valueField: 'value',
  98.             displayField: 'text',
  99.             readOnly: true
  100.         },{
  101.             fieldLabel: '政治面貌',
  102.             name: 'political',
  103.             xtype: 'combo',
  104.             store: new Ext.data.SimpleStore({
  105.                 fields: ['text'],
  106.                 data: [['群众'],['党员'],['团员']]
  107.             }),
  108.             emptyText: '请选择',
  109.             mode: 'local',
  110.             triggerAction: 'all',
  111.             valueField: 'text',
  112.             displayField: 'text',
  113.             readOnly: true
  114.         },{
  115.             fieldLabel: '籍贯',
  116.             name: 'origin'
  117.         },{
  118.             fieldLabel: '所属系',
  119.             name: 'professional'
  120.         }],
  121.         buttons: [{
  122.             text: '添加',
  123.             handler: function() {
  124.                 if (!form.getForm().isValid()) {
  125.                     return;
  126.                 }
  127.                 if (form.getForm().findField("id").getValue() == "") {
  128.                     // 添加
  129.                     form.getForm().submit({
  130.                         url: './jsp/save.jsp',
  131.                         success: function(f, action) {
  132.                             if (action.result.success) {
  133.                                 Ext.Msg.alert('消息', action.result.msg, function() {
  134.                                     grid.getStore().reload();
  135.                                     form.getForm().reset();
  136.                                     form.buttons[0].setText('添加');
  137.                                 });
  138.                             }
  139.                         },
  140.                         failure: function() {
  141.                             Ext.Msg.alert('错误', "添加失败");
  142.                         }
  143.                     });
  144.                 } else {
  145.                     // 修改
  146.                     form.getForm().submit({
  147.                         url: './jsp/save.jsp',
  148.                         success: function(f, action) {
  149.                             if (action.result.success) {
  150.                                 Ext.Msg.alert('消息', action.result.msg, function() {
  151.                                     grid.getStore().reload();
  152.                                     form.getForm().reset();
  153.                                     form.buttons[0].setText('添加');
  154.                                 });
  155.                             }
  156.                         },
  157.                         failure: function() {
  158.                             Ext.Msg.alert('错误', "修改失败");
  159.                         }
  160.                     });
  161.                 }
  162.             }
  163.         },{
  164.             text: '清空',
  165.             handler: function() {
  166.                 form.getForm().reset();
  167.                 form.buttons[0].setText('添加');
  168.             }
  169.         },{
  170.             text: '删除',
  171.             handler: function() {
  172.                 var id = form.getForm().findField('id').getValue();
  173.                 if (id == '') {
  174.                     Ext.Msg.alert('提示', '请选择需要删除的信息。');
  175.                 } else {
  176.                     Ext.Ajax.request({
  177.                         url: './jsp/remove.jsp',
  178.                         success: function(response) {
  179.                             var json = Ext.decode(response.responseText);
  180.                             if (json.success) {
  181.                                 Ext.Msg.alert('消息', json.msg, function() {
  182.                                     grid.getStore().reload();
  183.                                     form.getForm().reset();
  184.                                     form.buttons[0].setText('添加');
  185.                                 });
  186.                             }
  187.                         },
  188.                         failure: function() {
  189.                             Ext.Msg.alert('错误', "删除失败");
  190.                         },
  191.                         params: "id=" + id
  192.                     });
  193.                 }
  194.             }
  195.         }]
  196.     });
  197.     // form end
  198.     // 单击修改信息 start
  199.     grid.on('rowclick', function(grid, rowIndex, event) {
  200.         var record = grid.getStore().getAt(rowIndex);
  201.         form.getForm().loadRecord(record);
  202.         form.buttons[0].setText('修改');
  203.     });
  204.     // 单击修改信息 end
  205.     // layout start
  206.     var viewport = new Ext.Viewport({
  207.         layout: 'border',
  208.         items: [{
  209.             region: 'north',
  210.             contentEl: 'head'
  211.         }, grid, form, {
  212.             region: 'south',
  213.             contentEl: 'foot'
  214.         }]
  215.     });
  216.     // layout end
  217. });