extjs5grid在线演示

① 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列里怎么显示图片

Ext.onReady(function(){
varcm=newExt.grid.ColumnModel([newExt.grid.RowNumberer(),{
header:'编号',
dataIndex:'id',
sortable:true
},{
header:'性别',
dataIndex:'sex',
renderer:function(value){
if(value=='male'){
return"<spanstyle='color:green;font-weight:bold;'>绿男</span><imgsrc='user_male.gif'/>";
}else{
return"<spanstyle='color:red;font-weight:bold;'>红女</span><imgsrc='user_female.gif'/>";
}
},
sortable:true
},{
header:'名称',
dataIndex:'name',
align:"center",
sortable:true
}]);
vardata=[['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5'],
['6','female','name6','descn6']];
vards=newExt.data.Store({
proxy:newExt.data.MemoryProxy(data),
reader:newExt.data.ArrayReader({},[
{
name:'id'
},//{name:'id',mapping:1},
{
name:'sex'
},{
name:'name'
},{
name:'descn'
}])
});
ds.load();
vargrid=newExt.grid.GridPanel({
title:'GridPanel',
id:'view_grid',
renderTo:'grid',
ds:ds,
cm:cm,
width:400,
autoHeight:true,
autoWidth:true,
enableColumnMove:false,
autoSizeColumns:true,//根据每一列内容的宽度自适应列的大小
trackMouseOver:true,//鼠标移动时高亮显示
frame:true,
selModel:newExt.grid.RowSelectionModel({
singleSelect:true
}),
iconCls:'icon-grid'
});
});

如图所示，图片是绿色和红色的人，根据值，判断显示什么颜色的。你可以改成根据0或1显示或不显示图片。

③ EXTJS中如何调整Grid的长度，根据浏览器（谷歌）自动调整

一般在EXT中 , 会把组件都放到viewport中 , viewport 是一个自动适应浏览去整个区域的一个容器...

可以把其他的组件都放到viewport中...

比如你上面的grid..可以放到viewport中 , 然后viewport设置 layout = fit 就可以...

具体可以去查看一下API.

//下面代码是直接从API的例子中复制的..可以看一下
Ext.create('Ext.container.Viewport',{
layout:'border',
items:[{
region:'north',
html:'<h1class="x-panel-header">PageTitle</h1>',
border:false,
margins:'0050'
},{
region:'west',
collapsible:true,
title:'Navigation',
width:150
//
},{
region:'south',
title:'SouthPanel',
collapsible:true,
html:'Informationgoeshere',
split:true,
height:100,
minHeight:100
},{
region:'east',
title:'EastPanel',
collapsible:true,
split:true,
width:150
},{
region:'center',
xtype:'tabpanel',//TabPanelitselfhasnotitle
activeTab:0,//Firsttabactivebydefault
items:{
title:'DefaultTab',
html:'Thefirsttab'scontent.Othersmaybeaddeddynamically'
}
}]
});

④ extjs grid报错。this.el.dom为空或不是对象。

你的写法有点奇怪。不过根据你的报错信息应该是没有渲染的对象。
错误应该出在grid.render()上，应该携程grid.render('grid'),引号的grid就是你页面上那个div的id

⑤ extjs5 定义grid 列时如何自定义一个颜色列表选择的combox

var myData = [ ['2008-08-05 12:11:11',0.03], ['2008-09-06 12:07:19',1.63] ]; store.loadData(myData); var grideast = new Ext.grid.GridPanel({ store: store, }) 重新创建myData数组，再调用内 store.loadData(myData);就行容。

⑥ 如何让Extjs4.1中的treegrid和treestore实现分页

Extjs treeGrid分页实例，项目中用到，拿出来跟大家分享一下，主要是通过两个store实现。

[javascript] view plain
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
_baseParam : {
process : '项目立项',
isShow : 'true',
start : 1
},
constructor : function(_config) {
if (_config == null)
_config = {};
Ext.apply(this, _config);

this.store1 = Ext.create('Ext.data.JsonStore', {
autoLoad : true,
pageSize : basicConstant.LIMIT,
proxy : {
type : 'ajax',
url : "xmgl/pro-info-manage!page.action",
extraParams : this._baseParam,
reader : {
type : 'json',
root : 'rows',
totalProperty : "totalCount"
}
},
model : 'ProInfo'
});

this.store = Ext.create('Ext.data.TreeStore', {
model : 'ProInfo',
proxy : {
type : 'ajax',
url : 'xmgl/pro-info-manage.action'
},
folderSort : true,
listeners : {
'beforeload' : {
fn : function(_s, _op, _e) {
this._baseParam.limit = basicConstant.LIMIT;
_s.proxy.extraParams = this._baseParam;
},
scope : this
}
}
});

this['selModel'] = Ext.create('Ext.selection.TreeModel', {
mode : 'SINGLE',
listeners : {
'selectionchange' : {
fn : this.selectionChangeHandler,
scope : this
}
}
});
this['columns'] = [ {
xtype : 'treecolumn',
text : '项目性质',
flex : 1,
sortable : true,
dataIndex : 'proClass'
}, {
text : '项目名称',
flex : 2.5,
dataIndex : 'proName',
sortable : true
}, {
text : '流程状态',
flex : .75,
dataIndex : 'process',
sortable : true
}, {
text : '项目时间',
xtype : 'datecolumn',
format : 'Y-m-d',
dataIndex : 'crTime',
sortable : true,
flex : .85
}, {
text : '项目编号',
flex : 1,
dataIndex : 'proNo',
sortable : true
}, {
text : '项目单位',
flex : 1,
dataIndex : 'unit',
sortable : true
}, {
text : '优先级',
flex : .6,
dataIndex : 'priority',
sortable : true
}, {
text : '项目类型',
flex : .75,
dataIndex : 'proType',
sortable : true
}, {
text : '项目内容',
flex : 2,
dataIndex : 'proContent',
sortable : true
}, {
text : '附件数',
flex : .6,
dataIndex : 'fileCount',
sortable : true
} ]
ProTreeGrid.superclass.constructor.call(this, {
useArrows : true,
height : this._height,
width : this._width,
autoScroll : true,
rootVisible : false,
dockedItems : [ {
_treeGrid : this,
xtype : 'pagingtoolbar',
id : 'PROTREEGRID_PAGEBAR',
store : this.store1,
dock : 'bottom',
displayInfo : true,
listeners : {
change : function(obj, pdata, options) {
if(this._treeGrid._baseParam.start==pdata.currentPage)
return;
this._treeGrid._baseParam.start = pdata.fromRecord;
this._treeGrid._baseParam.limit = basicConstant.LIMIT;
this._treeGrid.store.load( {
params : this._treeGrid._baseParam
});
}
}
} ],
viewConfig : {
stripeRows : true,
enableTextSelection : true,
getRowClass : function(record) {
if (record.get("proClass") == '收入项目') {
return 'srcss';
} else if (record.get("proClass") == '支出项目') {
return 'zccss';
}
}
},
tbar : new Ext.toolbar.Toolbar( {
id : 'TBAR_PROTREEGRID',
items : [ new ProClassQueryCombo( {
width : 140,
labelWidth : 60
}), '-', '项目名称：', {
xtype : 'textfield',
width : 70
}, '无分项总体项目显示：', {
xtype : 'checkbox',
checked : true,
width : 70
}, {
text : "查询",
icon : 'images/icons/search.gif',
handler : this.onSearch,
scope : this
}, {
text : "重置",
icon : 'images/icons/del.gif',
handler : this.onReset,
scope : this
}, {
text : "高级查询",
icon : 'images/icons/search.gif',
handler : this.onAdvSearch,
scope : this
} ]
})
});
},
selectionChangeHandler : function() {
},
reLoadData : function() {
this.store.load( {
params : this._baseParam
});
this.store1.load( {
params : this._baseParam
});
},
onSearch : function() {
var _param = {};
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_param.process = _tbar.items.items[0].value;
_param.proClass = _tbar.items.items[2].value;
_param.proName = _tbar.items.items[5].value;
_param.isShow = _tbar.items.items[7].value;
// this.store1.load(1);
this._baseParam = _param
this.reLoadData();
},
onReset : function() {
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_tbar.items.items[0].setValue('项目立项');
_tbar.items.items[2].setValue('');
_tbar.items.items[5].setValue('');
this._baseParam = {
process : '项目立项',
isShow : 'false'
};
},
onAdvSearch : function() {
new ProQueryWin( {
_grid : this,
_process : '项目立项'
}).show();
}

});

⑦ 关于extjs grid复制粘贴功能

editor:newExt.form.DateField({id:"id1"}),
renderer:function(value,metadata,record,rowIndex,colIndex,store){
//这里有，有stroe，你想要的值不都有了么
//比如，这个加在第三列，然后你肯定知道行数，用store定位到某行的record，那么所有的值不都有了么，然后想怎么赋值不就怎么赋值（复制）了么
}

详细的你可以查api

Ext.grid.Column中：

renderer
:Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
value:Object
该单元格的数据值。
metadata:Object
一个对象，您可以在其中设置以下属性:

css:String
一个添加到该单元格的TD元素上的CSS样式名。
attr:String
一个定义HTML属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。
record:Ext.data.record
从数据中提取的Ext.data.Record。
rowIndex:Number
Rowindex
colIndex:Number
Columnindex
store:Ext.data.Store
从该Ext.data.Store对象中提取记录。

另外几个你会用到的方法

Ext.data.Store中：

getAt(Numberindex):Ext.data.Record
获取指定位置的记录。
参数:
index:Number
需要查找的记录的索引位置。
返回值:
Ext.data.Record
所传递的索引位置的Record。如果没有找到，返回undefined

Ext.data.Record中：

get(Stringname):Object
获取指定名称字段的值。
参数:
name:String
需要获取值的字段名称
返回值:
Object
字段的值。

set(Stringname,String/Object/Arrayvalue):void
将字段名设置为指定的值。