PDA

View Full Version : TreeGrid column data isn't rendered



talha06
21 Aug 2012, 10:38 PM
Hello everyone,

In my tree grid, the column which is just a normal gridColumn isn't rendered. But I see treecolumn data properly.

Here's my treegrid definition:

Ext.define('MyApp.view.department.DepartmentTreeGrid', {
extend : appName + '.view.base.BaseTree',
alias : 'widget.departmenttreegrid',
title : 'Departments',
iconCls : 'icon-department',
forceFit : true,
rootVisible : false,
animate : true,
autoScroll : true,
useArrows : true,
border : true,
singleExpand: true,
height : 400,
width : 450,
viewConfig : {
stripeRows : true,
emptyText : '<span class="x-grid-empty">No department found.</span>',
enableTextSelection: false
},
initComponent: function() {

var me = this;


Ext.define(appName + '.model.DepartmentTreeGridModel', {
extend : 'Ext.data.Model',
fields : [
{ name : 'facultyId', type : 'int' },
{ name : 'departmentId', type : 'int' },
{ name : 'parentId', type : 'int' },
{ name : 'name', type : 'string' },
{ name : 'text', type : 'string' },
{ name : 'code', type : 'string' },
{ name : 'iconCls', type : 'string' },
{ name : 'children', type : 'auto' },
{ name : 'expanded', type : 'boolean' },
{ name : 'leaf', type : 'boolean' }
]
});


var store = Ext.create('Ext.data.TreeStore', {
model : 'DepartmentTreeGridModel',
defaultRootId: 0,
proxy : {
type : 'ajax',
api : {
read : 'department/loadDepartmentsGroupByFaculty.ajax'
},
reader : {
type : 'json',
root : 'data',
successProperty : 'success',
totalProperty : 'totalCount'
}
}
});


this.store = store;

this.selType = 'rowmodel';

this.columns = [{
xtype : 'treecolumn',
header : 'Department',
dataIndex : 'text',
width : 450
}, {
header : 'Code',
dataIndex : 'code',
width : 150
}];

this.callParent(arguments);
}
});


Here's sample data comes from server:

{ "success": true,
"totalCount": 52,
"data": [{
"code": "00",
"facultyId": 59,
"name": "Rektörlük",
"type": 2,
"text": "Rektörlük",
"iconCls": "icon-faculty",
"leaf": true,
"parentId": 0
}]
}

I'll be so happy if someone can help me.
Thanks in advance.
With regards...

vietits
21 Aug 2012, 11:41 PM
1. Try to move and define appName + '.model.DepartmentTreeGridModel' outside of initComponent() to avoid re-define model each time an instance of MyApp.view.department.DepartmentTreeGrid is created.

2. Try to use full classname for model instead of shortname when creating tree store:


var store = Ext.create('Ext.data.TreeStore', {
//model : 'DepartmentTreeGridModel',
model: appName + '.model.DepartmentTreeGridModel',
defaultRootId: 0,
proxy : {
type : 'ajax',
api : {
read : 'department/loadDepartmentsGroupByFaculty.ajax'
},
reader : {
type : 'json',
root : 'data',
successProperty : 'success',
totalProperty : 'totalCount'
}
}
});

talha06
21 Aug 2012, 11:47 PM
1. Try to move and define appName + '.model.DepartmentTreeGridModel' outside of initComponent() to avoid re-define model each time an instance of MyApp.view.department.DepartmentTreeGrid is created.

2. Try to use full classname for model instead of shortname when creating tree store:


var store = Ext.create('Ext.data.TreeStore', {
//model : 'DepartmentTreeGridModel',
model: appName + '.model.DepartmentTreeGridModel',
defaultRootId: 0,
proxy : {
type : 'ajax',
api : {
read : 'department/loadDepartmentsGroupByFaculty.ajax'
},
reader : {
type : 'json',
root : 'data',
successProperty : 'success',
totalProperty : 'totalCount'
}
}
});

OK, thanks a lot vietits for your quick reply, it worked.. But I'd like to learn how did I see the other column data properly?

vietits
21 Aug 2012, 11:52 PM
I am not sure to understand your question. Do you mean to add some other columns to the tree panel? If so, just define as what you did with 'Code' column.

talha06
22 Aug 2012, 3:23 AM
I am not sure to understand your question. Do you mean to add some other columns to the tree panel? If so, just define as what you did with 'Code' column.
no I mean that before I hadn't done the changes you said, I was able to see first column 'text'. So why was its data rendered?

vietits
22 Aug 2012, 4:51 AM
It's because 'text' is one of default fields of decorated tree node. The others are 'leaf', 'expanded', etc while 'code' is not.

talha06
22 Aug 2012, 4:52 AM
Got it! Thanks again vietits ;)