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'这种排版方式，就不会出现宽高自适应的问题