extjsgrid圖片大小

① 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和樹以及幾種常用的插件使用詳解

Extjs的grid和樹以及幾種常用的插件使用詳解

Ext.onReady(function() {
/**
* 1. Grid
*/
/*Ext.create('Ext.grid.Panel', {
store : Ext.create('Ext.data.ArrayStore', {
fields : [{
name : 'book'
}, {
name : 'author'
}],
data : [['Extjs4:firstBook', 'joms']]
}),
columns : [{
text : 'Book',
flex : 1,
sortable : false,
dataIndex : 'book'
}, {
text : 'Author',
width : 100,
sortable : true,
dataIndex : 'author'
}],
height : 80,
width : 300,
title : 'Simple Grid',
renderTo : 'testG1'
});

// grid2
Ext.define('Book', {
extend : 'Ext.data.Model',
fields : [{
name : 'book'
}, {
name : 'topic',
type : 'string'
}, {
name : 'released',
type : 'boolean'
}, {
name : 'releasedDate',
type : 'date'
}, {
name : 'value',
type : 'number'
}]
});

var store = Ext.create('Ext.data.ArrayStore', {
model : 'Book',
data : [
['Ext JS 4: First Look', 'Ext JS', '4', false, null, 0],
['Learning Ext JS 3.2', 'Ext JS', '3.2', true, '2010/10/01',
40.49],
['Ext JS 3.0 Cookbook', 'Ext JS', '3', true, '2009/10/01',
44.99],
['Learning Ext JS', 'Ext JS', '2.x', true, '2008/11/01', 35.99]]
});
Ext.create('Ext.grid.Panel', {
store : store,
width : 550,
height : 300,
title : 'Extjs Books',
renderTo : 'grid2',
features : [{
groupHeaderTp1 : 'Publisher:{name}'

}],
selModel : Ext.create('Ext.selection.CheckboxModel'),
columns : [Ext.create('Ext.grid.RowNumberer'), {
text : 'Book',
flex : 1,
dataIndex : 'book'
}, {
text : 'Category',
xtype : 'templatecolumn',
width : 100,
tpl : '{topic}{version}'
}, {
text : 'Already Released',
xtype : 'booleancolumn',
width : 100,
dataIndex : 'released',
trueText : 'Yes',
falseText : 'No'
}, {
text : 'Released Date',
xtype : 'datecolumn',
width : 100,
dataIndex : 'releasedDate',
format : 'm-Y'
}, {
text : 'Price',
xtype : 'numbercolumn',
width : 80,
dataIndex : 'value',
renderer : Ext.util.Format.usMoney
}, {
xtype : 'actioncolumn',
width : 50,
items : [{
icon : 'script/checked.gif',
tooltip : 'Edit',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Edit', rec
.get('book'));
}
}, {
icon : 'script/scroll-left.gif',
tooltip : 'Delete',
handler : function(grid, rowIndex, colIndex) {
var recs = grid.getStore().getAt(rowIndex);
Ext.MessageBox.alert('Delete', recs
.get('book'))
}
}]
}]
});
*/
/**
* 自定義分組 Ext.grid.feature.Grouping
* 分組總結 Ext.grid.feature.GroupingSummary
*總結所有組 Ext.grid.feature.Summary
* 插件使用
*/

// 定義模型
Ext.define('Book', {
extend : 'Ext.data.Model',
fields : ['name', 'topic']
});
// 創建store
var Books = Ext.create('Ext.data.Store', {
model : 'Book',
groupField : 'topic',// 按照主題分組
data : [{
name : 'Learning Ext js',
topic : 'Ext JS'
}, {
name : 'Learning Ext js2.0',
topic : 'Ext JS'
}, {
name : 'Learning Ext js3.0',
topic : 'Ext JS'
}, {
name : 'Learning PHP5 Tools',
topic : 'PHP'
}, {
name : 'NetBeans IDE 7 Cookbook',
topic : 'java'
}, {
name : 'iReport 3.7',
topic : 'Java'
}, {
name : 'Python Multimedia',
topic : 'Python'
}, {
name : 'NHibernate 3.0 Cookbook',
topic : '.NET'
}, {
name : 'ASP.NET MVC 2 Cookbook',
topic : '.NET'
}]
});
// 填充數據給grid
/* Ext.create('Ext.grid.Panel', {
renderTo : 'div3',
frame : true,
store : Books,
width : 350,
height : 400,
title : 'Books',
features : [Ext.create('Ext.grid.feature.Grouping', {// 使用分組插件
groupHeaderTpl : 'topic:{name}({rows.length}Book{[values.rows.length>1?"s":""]})'
})],
columns : [{
text : 'Name',
flex : 1,
dataIndex : 'name'
}, {
text : 'Topic',
flex : 1,
dataIndex : 'topic'
}]
});*/

/*Ext.create('Ext.grid.Panel', {
renderTo : 'div3',
frame : true,
store : Books,
width : 350,
height : 400,
title : 'Books',
features : [{
groupHeaderTpl : 'Topic: {name}',
ftype : 'groupingsummary'//使用分組總結插件
}],www.2cto.com
columns : [{
text : 'Name',
flex : 1,
dataIndex : 'name',
summaryType : 'count',
summaryRenderer : function(value) {
return Ext.String.format('{0} book{1}', value,
value !== 1 ? 's' : '');
}
}, {
text : 'Topic',
flex : 1,
dataIndex : 'topic'
}]
});*/

Ext.create('Ext.grid.Panel', {
renderTo :'div3',
frame : true,
store : Books,
width : 350,
height : 300,
title : 'Books',
features : [{
ftype : 'summary'//使用總結插件
}],
columns : [{
text : 'Name',
flex : 1,
dataIndex : 'name',
summaryType : 'count',
summaryRenderer : function(value) {
return Ext.String.format('{0} book{1}', value, value !== 1
? 's'
: '');
}
}, {
text : 'Topic',
flex : 1,
dataIndex : 'topic'
}]
});

/**
* tree的使用
*/

Ext.create('Ext.tree.Panel', {
title : 'Simple Tree',
width : 200,
store : Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : [{
text : "Menu Option 1",
"checked": true,
leaf : true
}, {
text : "Menu Option 2",
//"checked": true,
expanded : true,
children : [{
text : "Sub Menu Option 2.1",
leaf : true,
"checked": true

}, {
text : "Sub Menu Option 2.2",
leaf : true,
"checked": true
}]
}, {
text : "Menu Option 3",
"checked": true,
leaf : true
}]
}
}),
viewConfig : {//樹葉拖拽實現
plugins : {
ptype : 'treeviewdragdrop'
}
},
folderSort: true,//排序
sorters: [{
property: 'text',
direction: 'ASC'
}],
rootVisible : false,
renderTo : 'tree1'
});
});

③ extjs GridPanel怎麼設置圖片按鈕點擊事件

你這樣的最好使用 actioncolumn , 顯示效果一樣...但是設置點擊事件要方便的多, 可以查看下API

//下面代碼是直接復制的API例子
Ext.create('Ext.data.Store',{
storeId:'employeeStore',
fields:['firstname','lastname','seniority','dep','hired'],
data:[
{firstname:"Michael",lastname:"Scott"},
{firstname:"Dwight",lastname:"Schrute"},
{firstname:"Jim",lastname:"Halpert"},
{firstname:"Kevin",lastname:"Malone"},
{firstname:"Angela",lastname:"Martin"}
]
});

Ext.create('Ext.grid.Panel',{
title:'ActionColumnDemo',
store:Ext.data.StoreManager.lookup('employeeStore'),
columns:[
{text:'FirstName',dataIndex:'firstname'},
{text:'LastName',dataIndex:'lastname'},
{
xtype:'actioncolumn',
width:50,
items:[{
//這里直接通過URL設置圖標
icon:'extjs/examples/shared/icons/fam/cog_edit.png',
tooltip:'Edit',
//這里是圖標的點擊事件
//參數中有點擊行的record,所以很方便做處理
handler:function(grid,rowIndex,colIndex){
varrec=grid.getStore().getAt(rowIndex);
alert("Edit"+rec.get('firstname'));
}
},{
icon:'extjs/examples/restful/images/delete.png',
tooltip:'Delete',
handler:function(grid,rowIndex,colIndex){
varrec=grid.getStore().getAt(rowIndex);
alert("Terminate"+rec.get('firstname'));
}
}]
}
],
width:250,
renderTo:Ext.getBody()
});

④ Extjs GridPanel構造器參數意思

api上面都有的
el是把整個grid渲染到哪個dom裡面，可以是id ，HTMLElement,EXT.Element
ds是grid的數據源，DataStore的簡稱
cm是ColumModel，就是配置列要怎麼顯示
sm是selectionModel，選擇的模式
除了el其他在API中都能找到，api中的renderTo和el作用類似

⑤ 解決extjs grid 不隨窗口大小自適應的改變問題

在使用grid的時候窗口改變了但是grid卻不能自適應，下面有個不粗的解決方法，大家可以參考下
最近遇到的問題，在使用grid的時候窗口改變了但是grid卻不能自適應的改變於是加了一條這行語句
問題就解決了，效果圖

拖大後的效果

添加的語句：

代碼如下:
Ext.EventManager.onWindowResize(function(){
grid1.getView().refresh()
})

參看完整代碼；
代碼如下:
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=gb2312">
<title>grid</title>
<link
href="../ext/resources/css/ext-all.css"
rel="stylesheet"
type="text/css"
/>
<script
src="../ext/adapter/ext/ext-base.js"
type="text/javascript"></script>
<script
src="../ext/ext-all.js"
type="text/javascript"></script>
<script
type="text/javascript">
Ext.onReady(function()
{
function
renderAdmin()
{
return
"
<span
style='cursor:pointer;'
onclick='alert();'><img
src='../IMAGES/icons/email.jpg'/>
</a></span>";
}
var
sm=
new
Ext.grid.CheckboxSelectionModel();
//
var
sm1=
new
Ext.grid.RowSelectionModel({singleSelect:true}),
var
cm=new
Ext.grid.ColumnModel([
new
Ext.grid.RowNumberer(),
sm,
//
sm1,
{header:'<span
style="cursor:pointer;"><img
src="../IMAGES/icons/email.jpg"/>
</a></span>',dataIndex:'admin',width:30,renderer:renderAdmin,sortable:false},
{header:'ID',dataIndex:'id'},
{id:'name',header:'名稱',dataIndex:'name'},
{header:'發送人',dataIndex:'from'},
{header:'收件人',dataIndex:'to'}
]);
var
data=[
['','001','收件單一','張三','李四'],
['','002','收件單二','張四','李五'],
['','003','收件單三','張六','李七']
];
var
store=
new
Ext.data.Store({
proxy:new
Ext.data.MemoryProxy(data),
reader:new
Ext.data.ArrayReader({},[
{name:'admin'},
{name:'id'},
{name:'name'}
,
{name:'from'},
{name:'to'}
])
});
store.load();
var
grid1=
new
Ext.grid.GridPanel({
renderTo:'grid1',
name:'grid1',
layout:'fit'
,
title:'收件單',
autoHeight:true,
autoWidth:true,
bodyStyle:'width:100%',
loadMask
:true,
//autoExpandColumn:'name',
autoWidth:true,
//
tbar:[{text:'發送',
//
icon:
'../Images/icons/application_edit.jpg',
//
cls:
'x-btn-text-icon'},
//
{text:'刪除',
//
icon:
'../Images/icons/application_edit.jpg',
//
cls:
'x-btn-text-icon'}],
store:store,
frame:true,
cm:cm,
sm:sm,
viewConfig:{
forceFit:true},
listeners
:
{
rowdblclick
:
function(n)
{
//獲取當前選中行，
輸向
//
debugger;
var
iid=
grid.getSelectionModel().getSelected().data.id
;
window.location.href="SubFrame.html?id="+iid;
}
}
});
Ext.EventManager.onWindowResize(function(){
grid1.getView().refresh()
})
});
</script>
</head>
<body>
<div
id="grid1"
style="width:
100%;
height:
100%;">
</div>
</body>
</html>

⑥ extjs的grid列寬調整問題

簡單點：在column中加上
,
renderer: function (value, meta, record) {
meta.style = 'overflow:visible;white-space:normal;';
return value;
}
可以自動換行，如果要加版Tip
前面加上：
Ext.tip.QuickTipManager.init();
column中加權上：
renderer: function (value, meta, record) {
meta.tdAttr = 'data-qtip="' + value + '"';
return value;
}

⑦ 如何設置EXTJS GridPande行內字體大小

var cm = new Ext.grid.ColumnModel([
{
header:'播放類型',
dataIndex:'type',
id : 0,
renderer:function(value){
return "<span style="font-size:14px;">" + value + "</span>";
}
}]);

⑧ ExtJs3.4關於在Viewport中添加grid

grid屬性里加region:'center'了嗎？雖然grid單獨顯示沒問題，但不一定保證放在viewport里就沒問題，經常會遇到布局沖突而無法正常顯示的問題

⑨ Extjs中grid 怎樣雙擊某一行出現相對應的圖片

你添加grid的itemdbclick事件，然後再裡面把要彈出的圖片對應寫進去就可以了啊。

⑩ ExtJs 中的tabPanel中如何加入gridPanel並且讓它的寬高自適應求高手解答......

首先 你可能頁面布局還是沒弄懂
Viewport 可以放很多東西，包括panel
然後你再往panel裡面放東西，你要放的是tabpanel
tabpanel裡面可以放grid 還有其他的東西
但不管你怎麼放，他們的布局方式都是border。
Viewport 裡面放一個panel 例如在中間，那麼他的panel裡面就應該有region : 'center'，並且Viewport 裡面layout : 'border'必不可少。
再往下推：
panel裡面放一個tabpanel，這個tabpanel上面有一個grid下面有一個tool工具欄，
那麼panel裡面也必不可少layout : 'border'。那麼裡面的grid，還有tool工具欄指定他們的region就可以了
自適應問題你不用管，你只需要指定他們的位置，他們會自動適應。
如果你弄懂了layout:'border'這種排版方式，就不會出現寬高自適應的問題