Extjs的grid和树以及几种常用的插件使用详解

Posted 2023-04-16

参考技术A 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 : 'topicversion'
,
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.lengthBook[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 book1', 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 book1', 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 Grid Tooltip提示 鼠标悬停

本文总结了ExtJS Grid Tooltip的几种实现方法。ExtJS Grid Tooltip可以通过表头提示，单元格提示，行提示以及自己手动添加等方式完成。本文参考了官方FAQ上提供的描述。
ExtJS Grid Tooltip实现之一：表头提示
在2.2里面是设置ColumnModel.tooltip ,3.0则是Column. tooltip 如下:

var grid = new Ext.grid.GridPanel(

columns:[

header:名称,dataIndex:name,tooltip:对象名称,    




header:开始时间 - 结束时间 < br/>成功/失败/成功率, dataIndex:sucRate,tooltip:成功/失败/成功率

]

);

ExtJS Grid Tooltip实现之二：单元格提示
1)使用Ext.QuickTips
在开始的时候就执行Ext.QuickTips.init();
然后对需要提示的单元格,重写renderer函数,添加ext:qtitle , ext:qtip这2个属性即可。
这个在官方的FAQ上有详细描述: ​​​http://extjs.com/learn/Ext_FAQ_Grid#Add_ToolTip_or_Qtip​​​
//option 1
//========
renderer = function (data, metadata, record, rowIndex, columnIndex, store)

//build the qtip:    
var title = Details for  + value + - + record.get(month) +    
    - + record.get(year);    
var tip = record.get(sunday_events);    

metadata.attr = ext:qtitle=" + title + " +  ext:qtip=" + tip + ";    

//return the display text:    
var displayText = < span style="color: #000;"> + value + < /span>< br /> +    
    record.get(sunday_events_short);    
return displayText;

;

//option 2
//========
renderer = function (data, metadata, record, rowIndex, columnIndex, store)
var qtip = ‘>’;
if(data >= 0)
qtip = ” qtip=’yeah’/>”;
return ‘< span style=”color:green;”’ + qtip + data + ‘%< /span>’;
else if(data < 0)
qtip = ” qtip=’woops’/>”;
return ‘< span style=”color:red;”’ + qtip + data + ‘%< /span>’;

return data;
;

//option 3
//========
var qtipTpl = new Ext.XTemplate(
‘< h3>Phones:< /h3>’,
‘< tpl for=”.”>’,
‘< div>< i>phoneType:< /i> phoneNumber< /div>’,
‘< /tpl>’
);

renderer = function (data, metadata, record, rowIndex, columnIndex, store)

// get data     
var data = record.data;    

// convert phones to array (only once)     
data.phones = Ext.isArray(data.phones) ?    
    data.phones :     
    this.getPhones(data.phones);    

// create tooltip     
var qtip = qtipTpl.apply(data.phones);    

metadata.attr = ext:qtitle=" + title + " +  ext:qtip=" + tip + ";    

//return the display text:    
return data;

;
2)使用ToolTip
官方也已经给出方法:
​​​http://extjs.com/forum/showthread.php?p=112125#post112125​​​
​​​http://extjs.com/forum/showthread.php?t=55690​​​
以上给出的方法是可以让一个grid里面的元素共享一个tooltip对象。一般用来做rowtip
不过3.0有更好的方式,如下:
ExtJS Grid Tooltip实现之三：行提示 RowTip
ExtJS3.0新增的方法,设置tooltip的delegate
var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on(‘render’, function(grid)
var store = grid.getStore(); // Capture the Store.

var view = grid.getView();    // Capture the GridView.    


myGrid.tip = new Ext.ToolTip(    
    target: view.mainBody,    // The overall target element.    

    delegate: .x-grid3-row, // Each grid row causes its own seperate show and hide.    

    trackMouse: true,         // Moving within the row should not hide the tip.    

    renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.    

    listeners:               // Change content dynamically depending on which element triggered the show.    

        beforeshow: function updateTipBody(tip)     
               var rowIndex = view.findRowIndex(tip.triggerElement);

                if(!Ext.isEmpty(content))
                    tip.body.dom.innerHTML = "提示信息";
                else
                    return false; //停止执行，从而禁止显示Tip
                    tip.destroy();
                

            
        
);

);