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
將欄位名設置為指定的值。