var grid = new Ext.grid.GridPanel({
store //数据源
cm //Ext.grid.columnModel
columns //功能和Ext.grid.columnModel一样。与cm有一个就行
autoWidth:true
width
title
border:false
columnLines: true,
renderTo //显示div标签的id
animCollapse:false //True 表示为面板闭合过程附有动画效果 (默认为true,在类 Ext.Fx 可用的情况下).
collapsible: true, //true 表示面板可以闭合
columnLines:true, //true 表示有格边框
loadMask:true //获取数据里时有等待界面
stripeRows: true, //双色表格
plugins:true,
bbar:new Ext.PagingToolbar({
pageSize:10,
store:store, //数据源
displayInfo:true, //为true时下面的才显示
displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg:'没有记录'
}),
tbar:[{
text:'查询',
icon:'/trade/images/delete.gif',
cls:'x-btn-text-icon',
handler:function(){win.show();}
}
})
//**********************************************
//PagingToolbar分页
//传到服务器数据 start开始查询位置, limit要查询多少条
//排序
//服务器 sort,dir
//**********************************************
var com = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "客户ID", width: 50, sortable: true, dataIndex: 'memid'},
{header: "客户姓名", width: 75, sortable: true, dataIndex: 'memName'},
{header:'姓别', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}}
{header: '跟踪号',width:150,dataIndex:'code'},
{header: '日期', width:150, dataIndex: 'kd_time'}
]);
/***********************************************
grid tbar
样式
cls:'x-btn-text-icon' 添加
**************************************************/
EditorGridPanel
chickToEdit:1 //点击次数
ColumnModel 中要加editor editor:new Ext.form.TextField({
})
//获取修改后的数据
var storeEdit = grid.getStore(); //
var modified = storeEdit.modified.slice(0); //
Ext.each(modified,function(m){
alert(m.data.id); //数据就在m.data中 id 为字段名
})
////////////////////////////////////////////////////////////////////////////////////////
//获取grid数据
var selModel = grid.getSelectionModel(); 获取选择模式
var record;
if(!selModel.hasSelection()){
Ext.Msg.alert('警告','请选择要修改的行!');
return;
}
selModel.getSelections().length; //选择的行数
record = selModel.getSelected(); //获取选择行的数据
获取数据
单行
id = record.get('id');
或者
id = record.data.id;
多行
record[i].get('ddd')
删除数据
var obj = grid.getSelectionModel().getSelected();
store.remove(obj);
grid.getView().refresh();
//////////////////////////////////////////
查询
store.baseParams['memid'] = fb.form.findField('memid').getValue();
store.baseParams['start'] = 0;
store.load();
/////////////////////////////////
添加一行列
Ext自己带的一个插件
需要文件 RowExpander.js
var expand = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p>{address}</p>'
)
});
在grid的columns中加 expand,
并在grid属性中加 plugins: expand
分享到:
相关推荐
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Ext.grid.GridPanel 删除线 放到example文件夹下运行
Ext.grid.ColumnModel显示不正常
右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便,下面是从网上搜到的解决方案。
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
EXT GridPanel获取某一单元格的值
Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 代码如下: selectedRow....
// not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display: // none? ...
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store...
目录 前 言 第一部分 Ext Core 第1章 Ext Core重要概念 2 1.1 Ext.Element 2 1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 ...14.14 本章小结 483
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而...