ExtJS练手

 

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',
width: 80
}, {
header: '生僻字',
sortable: true, //设置这个属性进行排序 
dataIndex: 'RWLNAME',
width: 80
}, {
header: '部首',
sortable: true, //设置这个属性进行排序 
dataIndex: 'CHARACTERS',
width: 80
}, {
header: '读音',
sortable: true, //设置这个属性进行排序 
dataIndex: 'PRONUNCE',
gridwidth: 80
}
]);
//创建一个Grid
var grid = new Ext.grid.GridPanel({
cm: columns
, loadMask: { msg: '正在加载页面,请稍候...' }
// , width: document.documentElement.clientWidth - 8
// , height: document.documentElement.clientHeight - 5
, width: 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,
width: 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} });
}
});
}
};

});