PDA

View Full Version : ExtJS 4 - How to use 'tree panel' and 'accordion' controls



gireesh
22 Feb 2011, 10:23 AM
Hi,

I am new to ExtJs4 and and working on creating a new HTML5 application using ExtJs4, I couldn't figure-out how to use 'treepanel' and 'accordion' controls. Can some one help me with this ?

I tried giving 'xtype:'treepanel', I am getting error like "Uncaught Error: [Ext.ClassManager] Cannot create an instance of unrecognized alias: widget.treepanel"

Thanks
Gireesh

gelleneu
22 Feb 2011, 1:27 PM
There is no Treepanel and Accordion in the current Developer-Preview. It will be included in the first beta (next week / wednesday, i think)...

aconran
25 Feb 2011, 1:39 PM
Accordion went into PR2 released this week.
http://www.sencha.com/forum/showthread.php?125072-Ext-JS-4-Releases-and-Notes-(4.0PR2)

Tree is getting a bit of a refactor before getting checked in.

gireesh
26 Feb 2011, 4:46 AM
Is it possible to use ExtJs3 Tree with ExtJs4 ? Once you release ExtJs4 Tree, I can move completely to ExtJs4. Can you help me on integrating ExtJs 3 Tree

mdavis6890
26 Feb 2011, 8:47 AM
I think you'll find that you're better off waiting until the beta next week.

LesJ
26 Feb 2011, 4:58 PM
Tree is getting a bit of a refactor before getting checked in.

The Ext Tree code is already excellent. I'm curious what was improved?

deemonas
28 Feb 2011, 5:56 AM
I see no Accordion in PR2.

Waiting for beta...

gireesh
14 Mar 2011, 7:36 PM
Any idea when the "Tree" component will get released. We are just waiting for this component. Our development is frozen because of this.

gelleneu
15 Mar 2011, 1:59 AM
No answer, no beta yet, releasedate was february 28th, no message from Sencha-Team....

Stanback
15 Mar 2011, 5:08 PM
Looks like TreePanel is now included in preview release 4. B)

jlg
16 Mar 2011, 1:11 AM
Did anyone manage to get the treepanel to work in PR4?

I've tried the examples in the API without any luck. I would greatly appreciate a working example code.

gelleneu
16 Mar 2011, 1:42 AM
I understand that so, that there is a Grid-Component, and you can use different views, like gridview and "flattreeview" for showing data.

I think, that for "flattreeview" a Ext.data.TreeStore is needed as "GridStore". Am I right?

So, now i have problem with instantiating such a Treestore.

The following Code produces an Error like this:

Uncaught TypeError: Object [object Object] has no method 'isLoading'



Ext.regModel('Test', {
fields: ['id', 'parent_id', 'name']
});


var str = new Ext.data.TreeStore({
model: 'Test',
autoLoad: true,
data: [{ root: [
{ id: '1', parent_id: '0', name: 'Tst' },
{ id: '2', parent_id: '1', name: 'Tst3' },
{ id: '3', parent_id: '1', name: 'Tst3' }]
}]
});


What I'm doing wrong?

Stanback
16 Mar 2011, 10:28 AM
The Ext.data.TreeStore takes all of the tree data as a nested set rather than an adjacency list. It would be super nice if it could also support closure tables - one root for the data and one root for the closures. I think this is closer but I'm having issues with it too, 'records is undefined', maybe I'm not defining the root node correctly.

I'm curious to know whether TreeLoader has been deprecated and, if so, how we can do asynchronous loading if desired. I'll keep hacking on it and see what I can discover. There might be a reason it's not included on the examples page yet. ;)



Ext.define('MyApp.TestTreePanel', {
extend: 'Ext.tree.TreePanel',
requires: [
'Ext.tree.*',
'Ext.data.*'
],
hideHeaders: true,
initComponent: function() {
Ext.regModel('User', {
fields: [
{name: 'id', type: 'int'},
{name: 'parentId', type: 'int'},
{name: 'left', type: 'int'},
{name: 'right', type: 'int'},
{name: 'first', type: 'string'},
{name: 'last', type: 'string'}
]
});

this.store = Ext.create('Ext.data.TreeStore', {
model: 'User',
nodeParam: 'id',
parentField: 'parentId',
leftField: 'left',
rightField: 'right',
proxy: {
type: 'memory',
reader: {
type: 'json'
// root: 'data'
}
},
data: [
{id: 1, first: 'Ed', last: 'Spencer', left: 1, right: 16},
{id: 2, first: 'Abe', last: 'Elias', left: 2, right: 11, parentId: 1},
{id: 3, first: 'Tommy', last: 'Maintz', left: 12, right: 15, parentId: 1},
{id: 4, first: 'Aaron', last: 'Conran', left: 3, right: 4, parentId: 2},
{id: 5, first: 'Dave', last: 'Kaneda', left: 5, right: 6, parentId: 2},
{id: 6, first: 'Jamie', last: 'Avins', left: 13, right: 14, parentId: 3},
{id: 7, first: 'Jay', last: 'Robinson', left: 7, right: 10, parentId: 5},
{id: 8, first: 'Arne', last: 'Bech', left: 8, right: 9, parentId: 7}
],
autoLoad: true
});

this.headers = [
{xtype: 'treeheader', text: 'First', flex: 1, dataIndex: 'first'}
//{xtype: 'treeheader', text: 'Last', flex: 1, dataIndex: 'last'}
];

this.callParent(arguments);
}
});


Any feedback or working examples would be greatly appreciated.

Stanback
16 Mar 2011, 4:54 PM
Actually, an example is included in PR4 but not linked from the examples page yet:

http://dev.sencha.com/deploy/ext-4.0-pr4/examples/tree/tree.html
http://dev.sencha.com/deploy/ext-4.0-pr4/examples/tree/treegrid.html

How can we emulate Ext 3's iconCls functionality? Right now I'm using the following, which works fine with the correct CSS selector, but I'd like to apply the class directly to the actual x-tree-icon element to avoid having to create a bunch of duplicate icon definitions. Not a huge issue but seems like there might be a better way.



this.headers = [
{xtype: 'treeheader', text: 'Name', flex: 1, dataIndex: 'name', renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
metaData.tdCls += ' ' + record.get('iconCls');
return value;
}}
];
My main problem now is that each node's 'expanded' property seems to be ignored. It seems to be correctly passed to each Ext.data.TreeNode but I'm not quite sure how/if Ext.tree.FlatTreeView is handling it. The 'leaf' property definitely works.

elwhiz
17 Mar 2011, 11:22 AM
Hi,

I created a TreePanel using ExtJS 4 PR4.

I get an error running the code below: records is undefined





Ext.regModel('TreeCategory', {
idProperty: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'categoryName', type: 'string'}
]
});

var treeStore = new Ext.data.TreeStore({
model: 'TreeCategory',
proxy: {
type: 'memory',
reader: {
type: 'tree',
root: 'children'

}
},
data : {
children : [
{id: 1, categoryName: 'Category 1', leaf: true},
{id: 2, categoryName: 'Category 2', leaf: true}]
}
});


// create the Tree
var tree = new Ext.tree.TreePanel({
renderTo: 'div-treepanel',
width: 200,
height: 300,
store: treeStore,
hideHeaders: true,
headers: [{
xtype : 'treeheader',
text : 'Category',
flex : 1,
dataIndex: 'categoryIndex'
}],
collapsible: true
});


What could I've done wrong?

Thanks for the help.

Stanback
17 Mar 2011, 11:25 AM
@elwhiz Not sure if this is the problem but your dataIndex is set to categoryIndex, should probably be categoryName.

elwhiz
17 Mar 2011, 11:40 AM
@Stanback: Thanks for the quick reply. I tried your suggestion but I still get the same error.

Stanback
17 Mar 2011, 11:52 AM
@Stanback: Thanks for the quick reply. I tried your suggestion but I still get the same error.

No problem, I don't see any other issues with your code - you're receiving the same error as I was getting. The only difference between yours and the working example is the memory store vs. ajax. I've been implementing it with ajax and haven't had any problems. I assume you'll be using ajax anyway in a production environment? Regardless, it should be working with a local store - I can take a closer look after work.

elwhiz
18 Mar 2011, 5:28 AM
No problem, I don't see any other issues with your code - you're receiving the same error as I was getting. The only difference between yours and the working example is the memory store vs. ajax. I've been implementing it with ajax and haven't had any problems. I assume you'll be using ajax anyway in a production environment? Regardless, it should be working with a local store - I can take a closer look after work.

@Stanback. Thanks. It would be good if it will work using memory store. There are some scenarios that it may come helpful.