extjs双层表头

① extjs中有一个多栏表头的GRID，第一栏是学院，第二栏分别是专业。如何可以获取到第一栏表头的内容

$(document).ready(function(){

var _data = [
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' },
{'name': 'a','id': 'b1','sex': 'b', 'age': '1'},
{'name': 'f','id': 'b2','sex': 'g','age': '2'},
{'name': 'h','id': 'b3','sex': 'g','age': '3'},
{'name': 'k','id': 'b4','sex': 'b','age': '4' }
]

var UI = {};
UI.Grid = {};
//className
function createTable(current,o){
var div = document.createElement('div');
div.style.width = '90%';
div.style.padding = '0';
for(var i = 0; i < o.data.length ; i++){

var div1 = document.createElement('div');
div1.style.width = '250px';
div1.style.height = '300px';
div1.style.cssFloat = 'left';
div1.style.padding = '0';
var ul = document.createElement('ul');
var li1 = document.createElement('li');
var li2 = document.createElement('li');
var li3 = document.createElement('li');
var div2 = document.createElement('div');
div2.style.width = '220px';
div2.style.height = '200px';
div2.style.backgroundColor = '#f6f6f6';
li1.appendChild(div2);
var div3 = document.createElement('div');
div3.style.width = '220px';
div3.style.height = '35px';
div3.style.backgroundColor = '#dddddd';
div3.innerHTML = '<p>'+o.data[i].name+'</p>';
li2.appendChild(div3);

var div4 = document.createElement('div');
div4.style.width = '220px';
div4.style.height = '35px';
div4.style.backgroundColor = '#f6f6f6';
div4.innerHTML = '<p>'+o.data[i].sex+'</p>';
li3.appendChild(div4);
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
div1.appendChild(ul);
div.appendChild(div1);
}
current.appendChild(div);
}

$.fn.creatSth = function(o){
UI.Grid[o.id] = o ;
var current = this[0];
var table = document.createElement('table');
table.style.cssText = 'width:100%;border-collapse:collapse;border: 1px solid #DDDDDD;';

//line 1
var tr1 = document.createElement('tr');
tr1.style.height = '8px';
var td11 = document.createElement('td');
td11.style.width = '8px';
var td12 = document.createElement('td');
var td13 = document.createElement('td');
td13.style.width = '8px';
tr1.appendChild(td11);
tr1.appendChild(td12);
tr1.appendChild(td13);

// toolbar - line
var trbar = document.createElement('tr');
trbar.style.height = '15px';
var tdbar1 = document.createElement('td');
var tdbar2 = document.createElement('td');
var tdbar3 = document.createElement('td');
tdbar2.innerHTML = '123123';
trbar.appendChild(tdbar1);
trbar.appendChild(tdbar2);
trbar.appendChild(tdbar3);

//line 2
var tr2 = document.createElement('tr');
var td21 = document.createElement('td');
td21.style.width = '8px';
var td22 = document.createElement('td');
createTable(td22,o);
var td23 = document.createElement('td');
td23.style.width = '8px';
tr2.appendChild(td21);
tr2.appendChild(td22);
tr2.appendChild(td23);

//line 3
var tr3 = document.createElement('tr');
tr3.style.height = '8px';
var td31 = document.createElement('td');
td31.style.width = '8px';
var td32 = document.createElement('td');
var td33 = document.createElement('td');
td33.style.width = '8px';
tr3.appendChild(td31);
tr3.appendChild(td32);
tr3.appendChild(td33);

table.appendChild(tr1);
if(o.tbar){
table.appendChild(trbar);
}
table.appendChild(tr2);
table.appendChild(tr3);
current.appendChild(table);
};

$('#test').creatSth({
id:'tb1',
cloum:[
{head:'name',datafield:'name'},
{head:'id',datafield:'id'},
{head:'sex',datafield:'sex'},
{head:'age',datafield:'age'}
],
data:_data
});

});

② ExtJS grid表头如何增加下拉项

extjs自己提供复选框列

//checkbox列

varfilecheckbox=newExt.grid.CheckboxSelectionModel();

//GridPanel

varfileGrid=newExt.grid.GridPanel({

store:fileStore,

columns:[

newExt.grid.RowNumberer(),//显示列数

filecheckbox,//显示复选框列

{//其他显示列}]

//省略其他属性

});

这样你就可以而得到一个复选框，可以进行单选、全选了

如果你想自己定义的话，也可以

//定义filters

varfilters=newExt.ux.grid.GridFilters({

//

encode:encode,//jsonencodethefilterquery

local:local,//defaultstofalse(remotefiltering)

filters:[{

type:'numeric',

dataIndex:'id'

},{

type:'string',

dataIndex:'company',

disabled:true

},{

type:'numeric',

dataIndex:'price'

},{

type:'date',

dataIndex:'date'

},{

type:'list',

dataIndex:'size',

options:['small','medium','large','extralarge'],

phpMode:true

},{

type:'boolean',

dataIndex:'visible'

}]

});

//

//

//thefiltertypes(

varcreateColModel=function(finish,start){

varcolumns=[{

dataIndex:'id',

header:'Id',

//=true

//tousestore'sfield'stypeproperty(iftypepropertynot

//'auto'which

//GridFilterswillassumetobe'StringFilter'

filterable:true

//,filter:{type:'numeric'}

},{

dataIndex:'company',

header:'Company',

id:'company',

filter:{

type:'string'

//

//,disabled:true

}

},{

dataIndex:'price',

header:'Price',

filter:{

//type:'numeric'//

}

},{

dataIndex:'size',

header:'Size',

filter:{

type:'list',

options:['small','medium','large','extralarge']

//,phpMode:true

}

},{

dataIndex:'date',

header:'Date',

renderer:Ext.util.Format.dateRenderer('m/d/Y'),

filter:{

//type:'date'//

}

},{

dataIndex:'visible',

header:'Visible',

filter:{

//type:'boolean'//

}

}];

returnnewExt.grid.ColumnModel({

columns:columns.slice(start||0,finish),

defaults:{

sortable:true

}

});

};

然后

vargrid=newExt.grid.GridPanel({

colModel:createColModel(4),

plugins:[filters],

//这两个属性是重点，加上去就可以了

});

效果看图片。

建议你去下载官方的源代码，然后看其中的例子。

里面有一个就是如何自定义这个的

③ Extjs报表是用多表头做的，单纯的grid可以导，多表头如何导出到Execl

复制好，然后在EXCEL里面使用选择性粘贴--数值
试试

④ extjs grid 列头分行

/**

* 表格综合示例

*

* @author XiongChun

* @since 2010-10-20

*/

Ext.onReady(function() {

group1 = [{}, {

header : '分组1-1a',

colspan : 4,

align : 'center'

}, {}, {

header : '分组1-3',

colspan : 5,

align : 'center'

}];

var group2 = [{}, {

header : '分组2-1',

colspan : 2,

align : 'center'

}, {

header : '分组2-2',

colspan : 2,

align : 'center'

}, {

header : '单位',

rowmerge:true,

domid:'group_dw',

align : 'center'

}, {

header : '分组2-3',

colspan : 2,

align : 'center'

}, {

header : '分组2-4',

colspan : 3,

align : 'center'

}];

/*

var group = new Ext.ux.grid.ColumnHeaderGroup({

rows : [group1, group2]

});

*/

var group = new Ext.ux.plugins.GroupHeaderGrid({

rows : [group1, group2]

});

// 定义自动当前页行号

var rownum = new Ext.grid.RowNumberer({

header : 'NO',

width : 28

});

// 复选框

var sm = new Ext.grid.CheckboxSelectionModel();

// 定义列模型

var cm = new Ext.grid.ColumnModel([rownum, {

header : '项目ID', // 列标题

dataIndex : 'xmid', // 数据索引:和Store模型对应

sortable : true

// 是否可排序

}, {

header : '项目名称',

dataIndex : 'xmmc',

sortable : true,

width : 200

}, {

header : '项目热键',

dataIndex : 'xmrj'

}, {

header : '规格',

dataIndex : 'gg'

}, {

dataIndex : 'dw',

align:'center',

fixed:true,

width : 60

}, {

header : '启用状态',

dataIndex : 'qybz',

// 演示render的用法(代码转换,该render由<G4Studio:ext.codeRender/>标签生成)

renderer : QYBZRender,

width : 60

}, {

header : '剂型',

dataIndex : 'jx',

width : 60

}, {

header : '产地',

dataIndex : 'cd',

width : 200

}, {

header : '医院编码',

dataIndex : 'yybm'

}, {

header : '更改时间',

dataIndex : 'ggsj'

}]);

/**

* 数据存储

*/

var store = new Ext.data.Store({

// 获取数据的方式

proxy : new Ext.data.HttpProxy({

url : 'gridDemo.do?reqCode=querySfxmDatas'

}),

// 数据读取器

reader : new Ext.data.JsonReader({

totalProperty : 'TOTALCOUNT', // 记录总数

root : 'ROOT' // Json中的列表数据根节点

}, [{

name : 'xmid' // Json中的属性Key值

}, {

name : 'sfdlbm'

}, {

name : 'xmmc'

}, {

name : 'xmrj'

}, {

name : 'gg'

}, {

name : 'dw'

}, {

name : 'qybz'

}, {

name : 'jx'

}, {

name : 'cd'

}, {

name : 'yybm'

}, {

name : 'ggsj'

}])

});

/**

* 翻页排序时候的参数传递

*/

// 翻页排序时带上查询条件

store.on('beforeload', function() {

this.baseParams = {

xmmc : Ext.getCmp('xmmc').getValue()

};

});

// 每页显示条数下拉选择框

var pagesize_combo = new Ext.form.ComboBox({

name : 'pagesize',

triggerAction : 'all',

mode : 'local',

store : new Ext.data.ArrayStore({

fields : ['value', 'text'],

data : [[10, '10条/页'], [20, '20条/页'],

[50, '50条/页'], [100, '100条/页'],

[250, '250条/页'], [500, '500条/页']]

}),

valueField : 'value',

displayField : 'text',

value : '20',

editable : false,

width : 85

});

var number = parseInt(pagesize_combo.getValue());

// 改变每页显示条数reload数据

pagesize_combo.on("select", function(comboBox) {

bbar.pageSize = parseInt(comboBox.getValue());

number = parseInt(comboBox.getValue());

store.reload({

params : {

start : 0,

limit : bbar.pageSize

}

});

});

// 分页工具栏

var bbar = new Ext.PagingToolbar({

pageSize : number,

store : store,

displayInfo : true,

displayMsg : '显示{0}条到{1}条,共{2}条',

plugins : new Ext.ux.ProgressBarPager(), // 分页进度条

emptyMsg : "没有符合条件的记录",

items : ['-', '&nbsp;&nbsp;', pagesize_combo]

});

// 表格工具栏

var tbar = new Ext.Toolbar({

items : [{

xtype : 'textfield',

id : 'xmmc',

name : 'xmmc',

emptyText : '请输入项目名称',

width : 150,

enableKeyEvents : true,

// 响应回车键

listeners : {

specialkey : function(field, e) {

if (e.getKey() == Ext.EventObject.ENTER) {

queryCatalogItem();

}

}

}

}, {

text : '查询',

iconCls : 'page_findIcon',

handler : function() {

queryCatalogItem();

}

}, {

text : '刷新',

iconCls : 'page_refreshIcon',

handler : function() {

store.reload();

}

},'->' ,{

text : '重设列标题',

iconCls : 'acceptIcon',

handler : function() {

cm.setColumnHeader('2','开天辟地');

}

}, {

text : '重设分组列标题',

iconCls : 'acceptIcon',

handler : function() {

Ext.getDom('group_dw').innerHTML = '开天辟地';

}

}]

});

// 表格实例

var grid = new Ext.grid.GridPanel({

// 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体

title : '<span class="commoncss">表格综合演示七(表头分组支持)</span>',

height : 500,

frame : true,

autoScroll : true,

region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局

margins : '3 3 3 3',

store : store, // 数据存储

stripeRows : true, // 斑马线

cm : cm, // 列模型

tbar : tbar, // 表格工具栏

bbar : bbar,// 分页工具栏

plugins : group,

viewConfig : {

// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况

// forceFit : true

},

loadMask : {

msg : '正在加载表格数据,请稍等...'

}

});

// 页面初始自动查询数据

// store.load({params : {start : 0,limit : bbar.pageSize}});

// 布局模型

var viewport = new Ext.Viewport({

layout : 'border',

items : [grid]

});

// 查询表格数据

function queryCatalogItem() {

store.load({

params : {

start : 0,

limit : bbar.pageSize,

xmmc : Ext.getCmp('xmmc').getValue()

}

});

}

});

⑤ extjs grid 怎样合并单元格

具体步骤如下：
/*
这个方法四个参数分别是
row:合并起始行
col:合并起始列.这两个参数是为了定位,要从哪个单元格开始合并.
type:是要合并行或者列.
num:是要合并的数量

//==>监听load , 执行合并单元格
grid.getStore().on('load', function () {
span(grid, 0, 0, 'row', 5);
});
*/
var span = function (grid, row, col, type, num) {
switch (type) {
case 'row':
tds = Ext.get(grid.view.getNode(row)).query('td');
Ext.get(tds[col]).set({ rowspan: num });
Ext.get(Ext.get(tds[col])).setStyle({ 'vertical-align': 'middle' });
for (i = row + 1; i < row + num; i++) {
Ext.get(Ext.get(grid.view.getNode(i)).query('td')[col]).destroy();
}
break;
case 'col':
tds = Ext.get(grid.view.lockedView.getNode(row)).query('td');
Ext.get(tds[col]).set({ colspan: num });
break;
}
};

⑥ ExtJs中gridpanel表头加复选框。数据列中已是复选框，可表头却没有复选框

定义一个CheckboxSelectionModel啊~内~容~
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([sm,{.....}]);
var grid=new Ext.grid.GridPanel({
sm:sm,
cm : cm,
store:store,
.......