Ext.GridPanel 用法总结(一)—— Grid基本用法
Ext.GridPanel 用法总结(一)—— Grid基本用法
摘自:http://www.cnblogs.com/luluping/archive/2009/08/01/1536645.html
GridPanel类是基于基础列表接口具代表性的主要实现类。也是最常用的Ext组件之一。
一:首先定义grid的数据源
view plaincopy to clipboardprint?
//初始化Ext状态管理器,在Cookie中记录用户的操作状态,如果不启用,象刷新时就不会保存当前的状态,而是重新加载
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init(); //显示提示信息
var pageSize=10;//定义每页显示的行数
//定义数据字段
var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"];
//定义数据源
journal_store = new Ext.data.Store({
// 获取数据
proxy:new Ext.data.HttpProxy(
{
url:"Data/SystemManage/Journal/JournalsInfo.aspx",//获取数据的后台地址
method:"POST"
}),
//解析json
reader:new Ext.data.JsonReader(
{
fields:fields,
root:"data",
id:"roleId",
totalProperty:"totalCount" //总的数据条数
})
});
//根据参数加载数据
journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}});
//初始化Ext状态管理器,在Cookie中记录用户的操作状态,如果不启用,象刷新时就不会保存当前的状态,而是重新加载
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init(); //显示提示信息
var pageSize=10;//定义每页显示的行数
//定义数据字段
var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"];
//定义数据源
journal_store = new Ext.data.Store({
// 获取数据
proxy:new Ext.data.HttpProxy(
{
url:"Data/SystemManage/Journal/JournalsInfo.aspx",//获取数据的后台地址
method:"POST"
}),
//解析json
reader:new Ext.data.JsonReader(
{
fields:fields,
root:"data",
id:"roleId",
totalProperty:"totalCount" //总的数据条数
})
});
//根据参数加载数据
journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}});
二:定义其选择列、行号、列等
view plaincopy to clipboardprint?
//--------------------------------------------------列选择模式
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:"roleId"
});
var index= new Ext.grid.RowNumberer();//行号
//--------------------------------------------------列头
var colModel = new Ext.grid.ColumnModel
(
[
index,
sm,
{header:"序号",width:100,dataIndex:'journal_id',sortable:true},
{header:"期刊名称",width:80,dataIndex:'journal_name',sortable:true},
{header:"主办单位",width:110,dataIndex:'journal_organizer',sortable:true},
{header:"期刊级别",width:100,dataIndex:'journal_level',sortable:true},
{header:"是否核心",width:110,dataIndex:'is_core',sortable:true},
{header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun}
]
);
//--------------------------------------------------列选择模式
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:"roleId"
});
var index= new Ext.grid.RowNumberer();//行号
//--------------------------------------------------列头
var colModel = new Ext.grid.ColumnModel
(
[
index,
sm,
{header:"序号",width:100,dataIndex:'journal_id',sortable:true},
{header:"期刊名称",width:80,dataIndex:'journal_name',sortable:true},
{header:"主办单位",width:110,dataIndex:'journal_organizer',sortable:true},
{header:"期刊级别",width:100,dataIndex:'journal_level',sortable:true},
{header:"是否核心",width:110,dataIndex:'is_core',sortable:true},
{header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun}
]
);
三:定义表格grid
view plaincopy to clipboardprint?
journal_grid = new Ext.grid.GridPanel
(
{
id:'id_journal_grid', //grid的id
autoHeight:true,
autoWidth:true,
sm:sm,
cm:colModel, //行列
loadMask:true,
store:journal_store, //数据源
trackMouseOver:true, //鼠标特效
autoScroll:true,
stripeRows:true,
viewConfig:{
columnsText:"显示/隐藏列",
sortAscText:"正序排列",
sortDescText:"倒序排列",
forceFit:true
},
journal_grid = new Ext.grid.GridPanel
(
{
id:'id_journal_grid', //grid的id
autoHeight:true,
autoWidth:true,
sm:sm,
cm:colModel, //行列
loadMask:true,
store:journal_store, //数据源
trackMouseOver:true, //鼠标特效
autoScroll:true,
stripeRows:true,
viewConfig:{
columnsText:"显示/隐藏列",
sortAscText:"正序排列",
sortDescText:"倒序排列",
forceFit:true
},
四:定义工具栏
view plaincopy to clipboardprint?
tbar: //工具条
[
{
text: '刷新',
cls: 'x-btn-text-icon details',
handler: function(btn, pressed)
{//重置查询条件
Ext.getCmp("QueryForm").findById('journalName').reset();
Ext.getCmp("QueryForm").findById('journalOrganizer').reset();
Ext.getCmp("QueryForm").findById('journalLevel').reset();
Ext.getCmp("QueryForm").findById('JournalIsCore').reset();
journal_store.load({params:{start:0,limit:pageSize}});
//数据源从新加载
}
},
'-',
{
text: '添加',
handler: function(btn, pressed)
{
AddJournalInfo(); //添加新的角色信息
}
}, '-',
{
text: '编辑',
handler: function(btn, pressed)
{
var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//选择行的个数
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else if(row.length>1){
Ext.Msg.alert("提示信息","对不起只能选择一个!");
}else if(row.length==1)
{
EditJournalInfo(row[0]);//传行一行记录直接加载 编辑角色信息
}
}
}, '-',
{
text: '删除',
handler: function(btn, pressed)
{
var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections(); //获取选中的行
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else{
Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){
if(btn=="yes")
{
DeleteJournalInfo(row);//删除角色信息
}
else
{
}
})
}
}
},'-',
{
text: '综合查询',
handler: function(btn, pressed)
{
Ext.getCmp("QueryForm").toggleCollapse(true);//将formset展开
}
}, '-'
]
tbar: //工具条
[
{
text: '刷新',
cls: 'x-btn-text-icon details',
handler: function(btn, pressed)
{//重置查询条件
Ext.getCmp("QueryForm").findById('journalName').reset();
Ext.getCmp("QueryForm").findById('journalOrganizer').reset();
Ext.getCmp("QueryForm").findById('journalLevel').reset();
Ext.getCmp("QueryForm").findById('JournalIsCore').reset();
journal_store.load({params:{start:0,limit:pageSize}});
//数据源从新加载
}
},
'-',
{
text: '添加',
handler: function(btn, pressed)
{
AddJournalInfo(); //添加新的角色信息
}
}, '-',
{
text: '编辑',
handler: function(btn, pressed)
{
var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//选择行的个数
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else if(row.length>1){
Ext.Msg.alert("提示信息","对不起只能选择一个!");
}else if(row.length==1)
{
EditJournalInfo(row[0]);//传行一行记录直接加载 编辑角色信息
}
}
}, '-',
{
text: '删除',
handler: function(btn, pressed)
{
var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections(); //获取选中的行
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else{
Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){
if(btn=="yes")
{
DeleteJournalInfo(row);//删除角色信息
}
else
{
}
})
}
}
},'-',
{
text: '综合查询',
handler: function(btn, pressed)
{
Ext.getCmp("QueryForm").toggleCollapse(true);//将formset展开
}
}, '-'
]
五:设置分页
view plaincopy to clipboardprint?
//分页
bbar:new Ext.PagingToolbar({
store:journal_store, //数据源
pageSize:pageSize,
//显示右下角信息
displayInfo:true,
displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',
emptyMsg:"No results to display",
prevText:"上一页",
nextText:"下一页",
refreshText:"刷新",
lastText:"最后页",
firstText:"第一页",
beforePageText:"当前页",
afterPageText:"共{0}页"
})
});
//分页
bbar:new Ext.PagingToolbar({
store:journal_store, //数据源
pageSize:pageSize,
//显示右下角信息
displayInfo:true,
displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',
emptyMsg:"No results to display",
prevText:"上一页",
nextText:"下一页",
refreshText:"刷新",
lastText:"最后页",
firstText:"第一页",
beforePageText:"当前页",
afterPageText:"共{0}页"
})
});
六:设置右键菜单
view plaincopy to clipboardprint?
//为右键菜单添加事件监听器
journal_grid.addListener('rowcontextmenu',rightClickFn);
var rightClick = new Ext.menu.Menu
(
{
items:
[
{
id: 'rMenu1',
handler:AddJournalInfo,//点击后触发的事件
text: '增加角色'
},
{
id:'rMenu2',
text:'编辑角色',
handler:function()
{
JournalEdit();
}
},
{
id:'rMenu3',
text:'删除角色',
handler: function()
{
JournalDelete();
}
}
]
}
);
Ext.GridPanel 用法总结(一)—— Grid基本用法的更多相关文章
- extjs grid renderer用法
extjs grid renderer用法 摘自:http://www.cnblogs.com/ljian/archive/2011/10/27/2226959.html var cm = new E ...
- 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- extjs grid renderer用法【转载】
今天在做项目时,需要在列表中的某列添加一个超链接,首先要取得当前选中行的数据,判断数据类型,然后链接到不同的页面,研究下.发现ExtJs提供了一个很强的方法如下: var cm = new Ext.g ...
- 转:Ext GridPanel根据条件显示复选框
Ext GridPanel实现复选框选择框: var selectModel = new Ext.grid.CheckboxSelectionModel({ singleSelect : false ...
- 子查询。ANY三种用法。ALL两种用法。HAVING中使用子查询。SELECT中使用子查询。
子查询存在的意义是解决多表查询带来的性能问题. 子查询返回单行多列: ANY三种用法: ALL两种用法: HAVING中的子查询返回单行单列: SELECT中使用子查询:(了解就好,避免使用这种方法! ...
- entrySet用法 以及遍历map的用法
entrySet用法 以及遍历map的用法 keySet是键的集合,Set里面的类型即key的类型entrySet是 键-值 对的集合,Set里面的类型是Map.Entry 1.keySet( ...
- LOG4NET用法(个人比较喜欢的用法)
LOG4NET用法(个人比较喜欢的用法) http://fanrsh.cnblogs.com/archive/2006/06/08/420546.html
- 7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库
7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库 三种方法 rpm工具----->类型windows下的exe程序 ...
- 72. js EXTJS grid renderer用法
转自:https://blog.csdn.net/shancunxiaoyazhi/article/details/22156083 renderer : Function (可选的)该函数用于加工单 ...
随机推荐
- Android开发(二十五)——Android上传文件至七牛
设置头像: Drawable drawable = new BitmapDrawable(dBitmap); //Drawable drawable = Drawable.createFromPath ...
- 在Oracle Linux Server release 6.4下配置ocfs2文件系统
① 安装ocfs-tools-1.8 如果是使用RedHat Enterprise Linux 6.4,也可以安装ocfs-tools-1.8的,只是要插入Oracle Linux Server re ...
- wordpress自动保存远程图片插件 DX-auto-save-images
wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...
- 【Linux】——ctags
ctags的功能:扫描指定的源文件,找出其中所包含的语法元素,并将找到的相关内容记录下来. ctags 可以在官网上下载源代码,然后编译安装.最后在 ~/.vimrc 文件中写入以下配置: " ...
- 2dtoolkit获取sprite像素大小的方法
获取sprite像素的方法 Vector2 GetPixelSize(tk2dSpriteDefinition def){ ].x; ].y; // Calculate dimensions in p ...
- ux.form.field.SearchField 列表、树形菜单查询扩展
//支持bind绑定store //列表搜索扩展,支持本地查询 //支持树形菜单本地一级菜单查询 Ext.define('ux.form.field.SearchField', { extend: ' ...
- HDU 3999 The order of a Tree
The order of a Tree Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- 使用最新的“huihui中文语音库”实现文本转语音功能
最近一个web项目中,需要进行语音播报,将动态的文字转换为语音(TTS)存为WAV文件后通过web播放给用户.选择了微软所提供的SAPI (The Microsoft Speech API),只需要几 ...
- angularjs + seajs构建Web Form前端(二)
回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...
- smartjs 0.3 DataManager 发布&介绍
在0.3版加入了DataManager,基于策略的数据管理模块:是SmartJS中比较重要的一个系列.整个个DataManager模块包括有:dataManager,dataPolicyManager ...