<script type="text/javascript">
Ext.onReady(function(){
var ds = new Ext.data.Store({//这是数据源
proxy : new Ext.data.HttpProxy({url:'index.php?model=user&action=list&'}),
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'user_id'
},[
'user_id','username','real_name','telephone','station_status','headship'
])
});
var colModel = new Ext.grid.ColumnModel([//定义列
{header:'ID',width:50,sortable:true,dataIndex:'user_id'},
{id:'title',header:'用户名', width:100,sortable:true,dataIndex:'username'},
{header:'真实姓名',width:100,sortable:true,dataIndex:'real_name'},
{header:'电话',width:100,sortable:true,dataIndex:'telephone'},
{header:'岗位状态',width:100,sortable:true,dataIndex:'station_status'},
{header:'职务',width:100,sortable:true,dataIndex:'headship'}
]);
var tb = new Ext.Toolbar('north-div');//创建一个工具条
tb.add({
text: '添加',
handler: newUser
},{
text: '编辑',
handler: editUser
},{
text: '删除',
handler: delUser
});
var grid = new Ext.grid.GridPanel({//列表
border:false,
region:'south',
height:500,
loadMask: true,
el:'center',
title:'条目列表',
store: ds,
cm: colModel,
autoScroll: true,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: ds,
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据 共{2}条',
emptyMsg: "没有数据"
})
});
var top = new Ext.FormPanel({//这里是搜索表单
buttonAlign:'right',
labelWidth:70,
region:'center',
frame:true,
title: '搜索',
items: [{
layout:'column',
items:[{
columnWidth:.33,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '用户名',
id: 'username',
name: 'username',
anchor:'90%'
}]
},{
columnWidth:.33,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: '姓名',
name: 'real_name',
id: 'real_name',
anchor:'90%'
}]
},{
columnWidth:.33,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
id: 'email',
vtype:'email',
anchor:'90%'
}]
}]
}
],
buttons: [{
text: '保存',
handler:function(){
// 这里是关键,重新载入数据源,并把搜索表单值提交
ds.load({params:{start:0, limit:20,
username:Ext.get('username').dom.value,
real_name:Ext.get('real_name').dom.value,
email:Ext.get('email').dom.value}});
}
},{
text: '重置',
handler:function(){top.form.reset();}
}]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[{
border:false,
region:'north',
contentEl:'north-div',
tbar:tb,
height:26
},top,
grid
]}
);
ds.load({params:{start:0, limit:20}});
// 这里很关键,如果不加,翻页后搜索条件就变没了,这里的意思是每次数据载入前先把搜索表单值加上去,这样就做到了翻页保留搜索条件了
ds.on('beforeload',function(){
Ext.apply(
this.baseParams,
{
username:Ext.get('username').dom.value,
real_name:Ext.get('real_name').dom.value,
email:Ext.get('email').dom.value
});
});
function newUser() {
parent.newTab('400012','添加用户','index.php?model=user&action=add');
}
function editUser() {
var s = grid.getSelectionModel().getSelections();
if (s.length==0) {
Ext.Msg.alert('出错啦','你还没有选择要操作的记录!');
}
for (i=0;i<s.length;i++) {
var id = s[i].id;
parent.newTab('400012'+id,'编辑用户','index.php?model=user&action=add&user_id='+id);
}
}
function delUser() {
var ids = getId(grid);
if (ids) {
Ext.Msg.confirm('确认', '真的要删除吗?', function(btn){
if (btn == 'yes'){
Ext.Ajax.request({
url: 'index.php?model=user&action=delete&ids='+ids,
success: function(result){
json = Ext.util.JSON.decode(result.responseText);
ds.reload();
}
});
}
});
} else {
Ext.Msg.alert('出错啦','你还没有选择要操作的记录!');
}
}
loadend();
});
</script>
<div id="north-div"></div>
<div id="center"></div>
分享到:
相关推荐
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
一个用JSP后台读取数据放到 grid里显示的实例,网上找到的大部分不能运行,修改了很久。。。
ExtJs Grid导出Excel实例源码,后台C#。有分页功能,却仍可实现导出后台所有记录的功能
学习ext, guice 的好程序 学习ext4 extjs4, guice 的好程序 mybatis的好程序,可以借鉴很多东西的好程序
这是一个extjs与.net结合开发的实例,主要实现了grid的分页显示,数据的添删改查,以及动态添加数据字段的功能,对于学习extjs的人有非常好的帮助
这是本人在学习ExtJS 4.2 过程中做的一个小实例,包含了一些基础的功能: Tree/Grid/分页查询,滚动查询等. 与数据库的连接以及表结构在附件中的说明文档中有写.
ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传...
ASP.NET结合ExtJs+WCF+LINQ实现的分页Grid列表,一个很不错的学习ASP.NET/AJAX的参考实例,而且如果你的程序用了此分页代码,也会增色不少。
所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括分页,grid,tree,显示树信息的TreePanel、...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
17、ExtJS之Grid组件* w/ o8 _- \. Q! [* R6 s& u0 V 18、ExtJS之ComboBox获取远程数据、网页计算器5 W& ]. W7 ?, V/ Q 19、ExtJS之组件面向对象编程(一) 20、ExtJS之组件面向对象编程(一) 21、项目实战-需求...
再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...
《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。 《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为...
《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。 《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为...
看看extjs那些美丽的例子。 1.1. 一切从extjs发布包开始 1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总...
7.5.7 store的分页 / 359 7.5.8 store的排序:ext.util.sorter与ext.util.sortable / 360 7.5.9 store的过滤:ext.util.filter / 363 7.5.10 store的分组:ext.util.grouper / 363 7.5.11 树节点:ext.data....
+修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语...
-Grid中TemplateField生成到页面中控件具有唯一ID,例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...