PDA

View Full Version : Customizing Ext.tree.Panel



Ex_Soft
18 Oct 2012, 4:06 AM
I need to customize Ext.tree.Panel (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tree.Panel). But I can use Ext.grid.column.Template.tpl (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Template-cfg-tpl) only for one field (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Template-cfg-dataIndex). I need to use data from several fields in one column. For example:


+-------+-------+
| |Rec1.F2|
|Rec1.F1|Rec1.F3|
| |Rec1.F4|
+-------+-------+

How to can I do this?

vietits
18 Oct 2012, 5:20 AM
You can use values from multiple fields for one template column and you don't need to config dataIndex for template column.
Below is an example from Ext.grid.column.Template API:


Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['firstname', 'lastname', 'seniority', 'department'],
groupField: 'department',
data:[
{ firstname: "Michael", lastname: "Scott", seniority: 7, department: "Management" },
{ firstname: "Dwight", lastname: "Schrute", seniority: 2, department: "Sales" },
{ firstname: "Jim", lastname: "Halpert", seniority: 3, department: "Sales" },
{ firstname: "Kevin", lastname: "Malone", seniority: 4, department: "Accounting" },
{ firstname: "Angela", lastname: "Martin", seniority: 5, department: "Accounting" }
]
});


Ext.create('Ext.grid.Panel', {
title: 'Column Template Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'Full Name', xtype: 'templatecolumn', tpl: '{firstname} {lastname}', flex:1 },
{ text: 'Department (Yrs)', xtype: 'templatecolumn', tpl: '{department} ({seniority})' }
],
height: 200,
width: 300,
renderTo: Ext.getBody()
});

Ex_Soft
18 Oct 2012, 6:27 AM
you don't need to config dataIndex for template column
THNX