ExtJs GridPanel 完整实例
页面效果如下
view plaincopy to clipboardprint?
<mce:script type="text/javascript"><!--
Ext.onReady(function(){
//初始化Extjs
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL ='./resources/images/default/s.gif';
//首先读取数据，Json格式
var store = new Ext.data.Store
({
//读取数据源用json方法(三种方法1.读取json用JsonReader,2读取数组使用ArrayReader3.读取XML用XmlReader)
reader:new Ext.data.JsonReader
({
root:"Table",
//从数据库中读取的总记录数
totalProperty: 'totalCount',
//要读取出来的字段
fields:
[
'ID','RoleName','Remark'
]
}),
//获取数据源(该方法返回一个json格式的数据源)
proxy: new Ext.data.HttpProxy
({
url: 'http://www.cnblogs.com/BackGround/RoleManage/Role.ashx?AutoLoad=true'
})
});
//定义GridPanel的列名称
var cms=new Ext.grid.ColumnModel
(
[
new Ext.grid.RowNumberer({header:"编号",width:30,align:"center"}),//添加一个编号
new Ext.grid.CheckboxSelectionModel(),//增加 CheckBox多选框列
//header列名称，dateIndex对应数据库字段名称,sortable支持排序
{header:"角色名称",dataIndex:"RoleName",sortable:true},
{header:"角色备注",dataIndex:"Remark",sortable:true}
]
);
//编辑panel，用于添加，修改
var Edit_Panel=new Ext.FormPanel({
labelWidth: 75,
labelAlign:'right',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 380,
defaults: {width: 150},
defaultType: 'textfield',
items:
[
{
fieldLabel: '角色编号',
name: 'ID',
xtype:'hidden'
},
{
//label名称
fieldLabel: '角色名称',
//textfield名称
name: 'RoleName',
//textfield正则
allowBlank:false,//是否允许为空！false不允许
blankText:"不允许为空",//提示信息
minLength :2 ,
minLengthText : "姓名最少2个字符",
maxLength : 4 ,
maxLengthText :"姓名至多4个字符",
regex:/[\u4e00-\u9fa5]/,//正则表达式
regexText:"只能为中文"
},
{
fieldLabel: '角色编码',
name: 'RoleCode',
allowBlank:false,
blankText:"不允许为空",
xtype:'hidden'
},
{
fieldLabel: '说明',
name: 'Remark'
}
]
});
//弹出层
var Edit_Window = new Ext.Window({
collapsible: true,
maximizable: true,
minWidth: 300,
height :180 ,
minHeight: 200,
width:378,
modal:true,
closeAction:"hide",
//所谓布局就是指容器组件中子元素的分布，排列组合方式
layout: 'form',//layout布局方式为form
plain: true,
title:'编辑对话框',
bodyStyle: 'padding:5px;',
buttonAlign: 'center',
items: Edit_Panel,
buttons: [{
text: '保存',
//点击保存按钮后触发事件
handler:function(){
//得到编辑模板中id为ID的控件名称的值
var ID=Edit_Panel.getForm().findField('ID').getValue();
//得到编辑模板中id为RoleName的控件名称的值
var RoleName=Edit_Panel.getForm().findField('RoleName').getValue();
//var RoleCode=Edit_Panel.getForm().findField('RoleCode').getValue();
var Remark=Edit_Panel.getForm().findField('Remark').getValue();
var jsonData='';
if(ID=='')
//如果ID为空的话说明是添加操作，否则是修改操作,将ID,角色名称(RoleName),角色编码(RoleCode),说明(Remark),操作类型(添加操作:AddUser,更新操作:UpdateUser)写成json的形式作为参数传到后台
jsonData= {operatype:'AddRole',ID:ID,RoleName:RoleName,Remark:Remark};
else
jsonData= {operatype:'UpdateRole',ID:ID,RoleName:RoleName,Remark:Remark};
Edit_Window.hide();
CodeOperaMethod('http://www.cnblogs.com/WebUI/RoleManage/RoleManege.aspx',jsonData);
//重新加载store信息
store.reload();
grid.store.reload();
}
},{
text: '重置', handler:function(){Edit_Panel.getForm().reset();}
}]
});
//后台数据交互方法
var CodeOperaMethod=function(u,p){
var conn=new Ext.data.Connection();
conn.request({
//请求的 Url
http://www.cnblogs.com/hannover/admin/u,
// 传递的参数
params:p,
method:'post',
scope:this,
//回调函数，根据执行结果作不同的操作，如果成功提示操作成功的信息，如果失败提示失败的信息
callback:function(options,success,response){
if(success){ Ext.MessageBox.alert("提示","操作成功！");
store.reload();
grid.store.reload();
}
else{ Ext.MessageBox.alert("提示","所提交的操作失败！");}
}});};
//删除方法
function delRecord(btn,pressed)
{
//获取ID为MenuGridPanel的控件名称得到当前选中项
rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
if(rows.length==0)
{
Ext.Msg.alert("","请至少选择一行你要删除的数据！");
return;
}
Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?',showResult);}
function showResult(btn)
{
//确定要删除你选定项的信息
if(btn=='yes')
{
var row=Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
var jsonData="";
for(var i=0,len=row.length;i<len;i++)
{
//得到当前选中项的ID集合
var ss =row[i].get("ID");
if(i==0)
jsonData = jsonData + ss;
else
jsonData = jsonData + ","+ ss;
}
//将要删除的信息传递到后台处理,然后重新加载grid
var conn = new Ext.data.Connection();
conn.request({
http://www.cnblogs.com/hannover/admin/WebUI/RoleManage/RoleManege.aspx?DelRecode=",
params:{strProjects:jsonData},
method: 'post',
scope: this,
callback:function(options,success, response){
if(success){
Ext.MessageBox.alert("提示","所选记录成功删除！");
store.reload();
grid.store.reload();
}
else
{ Ext.MessageBox.alert("提示","所选记录删除失败！");}
}
})
}
};
//定义一个智能感应的ComboBox
var cmbox=new Ext.form.ComboBox
(
{
id:'cmbox',
title:'角色名称',
//加载数据源
store:store,
//从本地加载数据（智能感应效果）
mode:"local",
//显示字段类似DropDownlist中的DataTextField
displayField:'RoleName',
//类似DropDownlist中的DataValueField
valueField:'ID',
width:160,
//不允许为空
allowBlank:false,
//默认值
emptyText:'请输入角色名称进行搜索...',
//当为空的时候提示
blankText:'请输入角色名称...'
}
);
//构建GridPanel
var grid = new Ext.grid.GridPanel
({
id:'MenuGridPanel',
renderTo:"gridpanel",//将GridPanel添加到id为gridpanel的区域
title: '角色管理',//网格标题
width:'100%',
height: 500,
store: store,//grid数据源
loadMask: {msg:'加载数据中,请等待......'},//显示等待数据加载（loading）图标
cm:cms,//列名称
sm: new Ext.grid.CheckboxSelectionModel(),//要显示多选框列必加此项
//定义一个toolbar
tbar:
[
{
text:"编辑",
cls: 'x-btn-text-icon details',
icon:"../ext-3.1.0/blue16_042.png",
handler:function()
{
//重置编辑模板
Edit_Panel.getForm().reset();
rows = Ext.getCmp("MenuGridPanel").getSelectionModel().getSelections();
if(rows.length!=1)
{
Ext.Msg.alert("","请你选择一行数据进行操作！");
return;
}
//打开窗体
Edit_Window.show();
//将选中项的信息绑定到TextField中
Edit_Panel.getForm().findField('ID').setValue(rows[0].get('ID'));
//Edit_Panel.getForm().findField('RoleCode').setValue(rows[0].get('RoleCode'));
Edit_Panel.getForm().findField('RoleName').setValue(rows[0].get('RoleName'));
Edit_Panel.getForm().findField('Remark').setValue(rows[0].get('Remark'));
}
},
{
text:"添加",
cls: 'x-btn-text-icon details',
icon:"../ext-3.1.0/add_16.png",
handler:function()
{
Edit_Panel.getForm().reset();
Edit_Window.show();
}
},
{
text:"删除",
cls: 'x-btn-text-icon details',
icon:"../ext-3.1.0/blue16_016.png",
handler:delRecord
},'-',
//定义一个搜索框
cmbox,
'-',
{
xtype:'button',
cls: 'x-btn-text-icon details',
icon:"../ext-3.1.0/blue16_068.png",
text:"查找",
handler:function()
{
//Ext.getCmp("searchfield").getValue()得到Textfield的值
//过滤条件为角色名称(RoleName)来搜索匹配的信息,
//filter方法第一个参数:过滤的字段名称,第二个参数要匹配的信息,
//第三个参数true表示从开始位置开始搜索,第四个参数false表示不区分大小写
store.filter('RoleName',Ext.getCmp("cmbox").getValue(),false,false);
}
}
],
bbar: new Ext.PagingToolbar
({//自带分页工具条
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '当前为第[{0}]</span>条至第[{1}]条数据，共[{2}]条数据',
emptyMsg: "没有数据"
})
});
//从Json中加载数据start为0表示显示默认第一页，limit表示每页显示的数量为10
store.load({params:{start:0, limit:10}});
});
/ --></mce:script>
