Ext.onReady(function () { //给grid添加数据源 var store = new Ext.data.JsonStore({ root: 'rows', totalProperty: 'total', url: 'RareWords.aspx?opt=init', fields: ['RWLID', 'RWLNAME', 'CHARACTERS', 'PRONUNCE'] }); function createStore(url) { return new Ext.data.JsonStore({ root: 'rows', totalProperty: 'total', url: url, fields: ['RWLID', 'RWLNAME', 'CHARACTERS', 'PRONUNCE'] }); } //分页工具栏 var p = new Ext.PagingToolbar({ store: store , pageSize: 20 , autoWidth: true , displayInfo: true , displayMsg: '第{0}条到{1}条,一共{2}条' , emptyMsg: '没有记录' }); //列名 var columns = new Ext.grid.ColumnModel([ { header: '编号', sortable: true, //设置这个属性进行排序 dataIndex: 'RWLID', 80 }, { header: '生僻字', sortable: true, //设置这个属性进行排序 dataIndex: 'RWLNAME', 80 }, { header: '部首', sortable: true, //设置这个属性进行排序 dataIndex: 'CHARACTERS', 80 }, { header: '读音', sortable: true, //设置这个属性进行排序 dataIndex: 'PRONUNCE', grid 80 } ]); //创建一个Grid var grid = new Ext.grid.GridPanel({ cm: columns , loadMask: { msg: '正在加载页面,请稍候...' } // , document.documentElement.clientWidth - 8 // , height: document.documentElement.clientHeight - 5 , 600 , height: 600 , autoScroll: true , collapsible: false , animCollapse: false , enableHdMenu: false , title: '生僻字' , renderTo: 'RareWords' , store: store , bbar: p , tbar: [{ text: '新增', id: 'btn_add', handler: Add, iconCls: 'newIcon' }, //添加一个生僻字 '-', { text: '修改', id: 'btn_sub', handler: Modify, iconCls: 'modIcon' }, //修改生僻字 '-', { text: '删除', id: 'btn_del', handler: Delete, iconCls: 'delIcon' }, '->', { xtype: 'tbtext', text: '部首:' }, { xtype: 'textfield', id: 'Characters' }, '-', { xtype: 'tbtext', text: '读音:' }, { xtype: 'textfield', id: 'Prounce' }, '-', { text: '查询', handler: Search, iconCls: 'search' } ] }); //按部首、读音查询 function Search() { var opt = 'Search'; var characters = Ext.getCmp('Characters').getValue(); var prounce = Ext.getCmp('Prounce').getValue(); //escape var receive_url = 'RareWords.aspx?opt=' + opt + '&Characters=' + escape(characters) + '&Pronunce=' + escape(prounce); store = createStore(receive_url); store.reload({ params: { start: 0, limit: 20} }); grid.reconfigure(store, grid.getColumnModel()); $('#dialog input').val(''); }; //初始化数据 query(); function query() { grid.getStore().reload({ params: { start: 0, limit: 20} }); grid.reconfigure(grid.getStore(), grid.getColumnModel()); }; //定义全局变量 var ID; var opt = ''; //生僻字弹出层 $('#dialog').dialog({ autoOpen: false, 400, height: 250, minWidth: 200, minHeight: 200, maxWidth: 400, maxHeight: 400, title: '生僻字', modal: true, buttons: { "确定": function () { var RWLNAME = $('#RWLNAME').val(); var CHARACTERS = $('#CHARACTERS').val(); var PRONUNCE = $('#PRONUNCE').val(); var rnt = requestUrl('RareWords.aspx', { opt: opt, RwlId: ID, RwlName: RWLNAME, Characters: CHARACTERS, Pronunce: PRONUNCE }); $(this).dialog('close'); grid.getStore().reload({ params: { start: 0, limit: 20} }); Ext.Msg.alert('提示', rnt); }, "关闭": function () { $(this).dialog('close'); } } }); //新增生僻字 function Add() { //打开遮层 opt = 'Add'; $('#dialog input').val(''); $('#dialog').dialog('open'); }; //修改生僻字 function Modify() { //选中一条记录 var rows = grid.getSelectionModel().getSelections(); if (rows.length == 0) { alert('请至少选择一条记录'); return; } opt = 'Update'; $('#dialog').dialog('open'); var RWLID = rows[0].get('RWLID'); var RWLNAME = rows[0].get('RWLNAME'); var CHARACTERS = rows[0].get('CHARACTERS'); var PRONUNCE = rows[0].get('PRONUNCE'); $('#RWLNAME').val(RWLNAME); $('#CHARACTERS').val(CHARACTERS); $('#PRONUNCE').val(PRONUNCE); ID = RWLID; }; //删除生僻字 function Delete() { //选中一条记录 var rows = grid.getSelectionModel().getSelections(); if (rows.length == 0) { alert('请至少选择一条记录'); return; } var RWLID = rows[0].get('RWLID'); var opt = 'Delete'; var receive_url = 'RareWords.aspx'; var data = { 'opt': opt, 'RwlId': RWLID }; if (confirm('你确定要删除吗?')) { $.ajax({ url: receive_url, async: false, data: data, success: function () { //删除之后更新页面数据 grid.getStore().reload({ params: { start: 0, limit: 20} }); } }); } }; });