ExtJs中一个完整GridPanel实例
博客地址http://blog.csdn.net/ws_hgo/archive/2010/08/26/5839449.aspx
最后效果如图：
<script type="text/javascript">
Ext.onReady(function(){
//初始化Extjs
Ext.QuickTips.init();
//从本地加载图片,如果不定义默认从Exj官方网站加载
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: '../../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('../../WebUI/RoleManage/RoleManege.aspx',jsonData);
//重新加载store信息
store.reload();
grid.store.reload();
}
},{
text: '重置', handler:function(){Edit_Panel.getForm().reset();}
}]
});
</script>
如果对你有用请点击对我有用
谢谢
[解决办法]
不错，现在还用不到，先mark
顶……
[解决办法]
支持。
[解决办法]
好贴。。。
[解决办法]
帮顶 我用的是Coolite
[解决办法]
[解决办法]
ext是好，但是我感觉体积好大啊，我还是喜欢jquery多一点，呵呵，顺便接分了
[解决办法]
这个不错 先帮顶 ，然后研究一下。
[解决办法]
学习。。。。。
[解决办法]
收藏...
[解决办法]
感谢分享 帮顶 收藏之[解决办法]
EXT还真是麻烦……想要好看的界面也需要为此付出代价……而JS也是麻烦的东西OTL
[解决办法]
没用过
[解决办法]
先收着。。
[解决办法]
同分享
[解决办法]
我也写过一个 简单的grid增删改查
[解决办法]
顶，不错，学习了
[解决办法]
不错，学习了，研究研究了。。
[解决办法]
前段时间做的就是这个，不过处理数据是JAVA的。。。
[解决办法]
EXT界面满漂亮的~~~可惜以前就学了点皮毛
[解决办法]
恩，很不错。一直也用ext，只是由于ext的效率的确是个问题，所以仅仅用ext的viewport做页面框架，不再使用更多的控件了。
还有ext从2.0.2后更改了开源协议也是一个很大的打击。
[解决办法]
不错，就是有点麻烦。