EXTJS-Grid
///HTTP Proxy方式
var prox=new Ext.data.HttpProxy({url:"../DataService.aspx?Action=XML"});
var jprox=new Ext.data.HttpProxy({url:"../DataService.aspx?Action=JSON"});
Ext.Ajax.request({
url:"../DataService.aspx?Action=JSON",
success:xtoss,
failure:xtoss
})
///record 指明存储数据的节点名称 totalRecord 总记录数 success 成功情况
var reader = new Ext.data.XmlReader({record: "item"},[
{name: 'Name', mapping: 'Name'},
{name: 'Num'},
{name: 'PassWord'}
]);
///读取JSON数据格式
var jread=new Ext.data.JsonReader({
root: 'Rows',
totalProperty: 'RecordCount',
fields: [
{name: 'Num', type: 'string'},
{name: 'PassWord', type: 'string'},
{name: 'Name', type: 'string'}
],remoteSort: true
})
///jprox.load("",jread,xym,this);
///数据存储
var store=new Ext.data.GroupingStore({
///远程数据代理
proxy:jprox,
///从数据代理中读取数据
reader:jread,
///用户分子的字段
groupField:'Name',
///是否启用分组排序
groupOnSort:true,
///分组信息的关键 Desc 倒序 Asc 正序
sortInfo:{field:'Name', direction: "Desc"}
/// 其他 remoteGroup 是否支持远程排序
});
store.load();
/// store.loadData(serJosn);
//定义列结构
var col=new Ext.grid.ColumnModel([
///自动自增的数字列 与数据列绑定也是无效的
new Ext.grid.RowNumberer({header:'序号',width:35}),
///renderer 表示填充数据时 调用的函数 达到自动调整数和格式的作用 。
///header 显示的列名 dataIndex 与reader 绑定的列
///hidden 是否隐藏本列 resizable 可调整大小
{header:'应长',dataIndex:'Num',hidden:true},
{header:'正式姓名',dataIndex:'Name',renderer:xm,editor: new Ext.form.TextField({
allowBlank: true
})},
{header:'职业',dataIndex:'PassWord',editor:new Ext.form.TextField({
allowBlank: true
})}
]);
///视图
var view=new Ext.grid.GroupingView({
///是否自动填充
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "多条" : "条"]})',
///排序描述
sortAscText:'正向排序',
///排序描述
sortDescText:'反向排序',
///菜单提示 显示 隐藏列
columnsText:'显示列/隐藏列',
//显示分组菜单
enableGroupingMenu:true,
///内容为空时 提示的文本内容
emptyGroupText:'AAAA',
///菜单中的分组描述字段
groupByText:'按此分组',
///分组显示的开关
showGroupsText:'是否显示分组',
///显示隐藏进行分徐的列
hideGroupedColumn:false,
///是否使用IFrame
frame:true
})
///分组GROD
var grid=new Ext.grid.EditorGridPanel({
height:500,
width:900,
store:store,
///是否准许收缩
collapsible: true,
///是否在收缩时 准时使用动画
animCollapse: true,
cm:col,
view:view,
///是否准许显示面板标题信息
headerAsText:true,
///面板标题消息
title: '地区信息',
collapseFirst:false,
iconCls: 'icon-grid',
loadMask:true,
///maskDisabled:true,
///loadMask: {msg:'正在加载数据，请稍侯……'},
///可编辑则不能拖动
//enableDragDrop:true,
monitorWindowResize:true,
///鼠标移到后 是否高亮显示
trackMouseOver:true,
enableColumnHide:true,
autoShow:true,
///表格行是否按照不同的样式显示
stripeRows:false,
tbar:
[{text: '提交更改',id:'ADD',tooltip:'把修改的数据保存起来',iconCls:'remove',disabled:false,handler:function (){
store.commitChanges();
}},{text:"取消更改",handler:function(){
store.rejectChanges();
}},{text:"移除所有",handler:function(){
store.removeAll();
}},{text:"重新加载",handler:function(){
store.load();
}},{text:"移除选择行",handler:function(){
var sm=grid.getSelectionModel();
if(!sm.selection)return;
var record=sm.selection.record;
store.remove(record)
}},
{text:"增加行",handler:function(){
var value={NAME:'新增加',PassWord:'新增加'};
var re=new Ext.data.Record(value);
store.add(re);
}},{text:"更新",handler:function(){
alert("asdf");
}},{text:"增加新行",handler:function(){
var value={NAME:'请编辑新行',PassWord:'请编辑新行'};
var re=new Ext.data.Record(value);
store.add(re);
///grid.startEditing(1,2);
}},{text:"修改选择行",handler:function(){
var sm=grid.getSelectionModel();
if(!sm.selection)return;
var row =sm.selection.cell[0];
var vrow=sm.selection.cell[1];
var record=sm.selection.record;
grid.startEditing(row,vrow);
}},{text:"获取信息保存",handler:function(){
alert(store.data);
}},{text:"查看所有修改",handler:function(){
///获取所有修改的数据
var records = store.getModifiedRecords();
if(records.length>0)
{
var str="";
for(var i=0;i<records.length;i++)
{
record=records[i];
if((i+1)==records.length)
{
str+=Ext.encode(record.data);
}
else
{
str+=Ext.encode(record.data) +',';
}
}
///向服务器发送数据进行保存
Ext.Ajax.request(
{
url:"../DataService.aspx?Action=SAVE",
params:str,
success:toss,
failure:toss
})
alert(str);
}
}}
],
renderTo:"ManagerGird"
});
///grid.load();
///重写