本教程改自官方实例!通俗易懂、老少皆宜!---叨、校长
直接上代码!代码注释的很详细了!大家使用的时候注意引入官方的插件ColumnHeaderGroup.js
代码示例:
Ext.onReady(function(){
fields = [], //Grid数据字段
columns = [],//Grid列模型
data = [],//Grid数据
FisrtHeaderGroupRow=[],//双行表头--第一行表头
SecondHeaderGroupRow=[],//双行表头--第二行表头
//。。。更多的表头
//动态数据
var firstRow=["First","Second","Third"],
var secondRow=["AAA","BBB"]
//。。。更多的表头数据
//初始化Grid配置
function initGirdonfig(){
var array;
//第一行表头的列数
var num_first=firstRow.length;
//第二行表头的列数
var num_second=firstRow.length;
//循环给表头,字段,列模型初始化数据
for(var i=0;i<num_first;i++){
FisrtHeaderGroupRow.push({
header: firstRow[i],
align: 'center',
colspan: num_second
})
for(var j=0;j<num_second;j++){
fields.push({//初始化Grid字段
type: 'int',
name: firstRow[i]+ secondRow[j]
})
columns.push({//初始化Grid ColumnModel
header:secondRow[j],
dataIndex:firstRow[i]+ secondRow[j],
renderer: Ext.util.Format.usMoney //数据格式成$
})
}
}
//获取Grid数据
for(var k=0;k<num_first*num_second;k++){
array=[];//一个array是一行记录
array.push((Math.floor(Math.random()*11) + 1) * 100000); //随机产生数据
data.push(array);
}
}
//执行配置
initGirdonfig();
//初始化双表头插件 需要引用ColumnHeaderGroup.js,官方实例中有!
var group = new Ext.ux.grid.ColumnHeaderGroup({
rows: [FisrtHeaderGroupRow]
});
//声明一个Grid
var grid = new Ext.grid.GridPanel({
renderTo: 'mydiv',
title: '双表头测试',
width: 1000,
height: 400,
store: new Ext.data.ArrayStore({
fields: fields,
data: data
}),
columns: columns,
viewConfig: {
forceFit: true
},
plugins: group
});
})
分享到:
相关推荐
extjs grid 多表头 插件 extjs grid 多表头 插件
extjs 双表头问题,示例代码,根据自己的项目稍微修改一下就可以使用
使用extjs生成双层表头,父表头包括子表头
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
NULL 博文链接:https://newlethe.iteye.com/blog/1146469
extjs4动态添加表头字段、删除、增加记录!
Extjs动态Grid的生成 htm
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
csdn里有个兄弟类似的东西要10分,而且收录的不全,这个代码本是一个外国朋友的然后国人加了些修改,这里把两个版本同时献上
extjs动态表头,当初做项目急需,没有解决问题,偶尔在一个论坛中发现了 ,好东西大家分享。
extjs3多表头;表头合并;绝对可以用
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
extjs4打印grid插件,官网上的一个例子程序,有需要的人可以下载来看看。
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
自己写的一个Extjs Grid2Grid拖拽
下载后将HeaderColumn.js和HeaderColumn.css引入...查看DataReport.js里面事例
title的header表头名、width宽度、dataIndex映射名都可以根据外部定义的xml进行读取,便于将ExtJs的Grid封装
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^