PDA

View Full Version : Problems with Tree Store and Tree Panel



lambidu
5 Nov 2012, 4:37 AM
Hi,

As I have written in the title I have a problem with Tree Store and Tree Panel
I'm trying to create a File Browser for my website ...

I connect to the server ...
The server returns JSON data ...
And everything seems to work fine ...
39813
"

In the Tree Panel "displayField" property does not work ... (I set the field "name" - and the text disappeared)

In Tree Store "autoLoad" property does not work ... (I set the "false" - but the data is all the same load automatically ...)

In my application I need to do on the left (west region) - Tree Panel with folders on the server and on the right (center region) - to show contents of the selected folder in the Tree Panel

Filtering does not work ... no "initComponent", no "afterRender" ...
I have tried function "filterBy" and "filters" but nothing happening
Events do not fire ... for example event "beforeinsert" - just do not react in any way ...

What am I doing wrong? Or is it a bug?

Here is my TreeStore code:


Ext.define('App.Files.Store', {
extend: 'Ext.data.TreeStore',

autoLoad: true,

folderSort: true,

model: 'App.Files.Model',

root: {
id: '',
text: 'Site root',
expanded: true
},

proxy: new App.Proxy({
module: 'Files'
})
});


Here is Tree Panel code:


...
initComponent: function() {
var me = this;


// Create tree
var tree = Ext.create('Ext.tree.Panel', {
title: 'Browse',
frame: false,
region: 'west',
collapsible: true,
floatable: false,
//displayField: 'name',
split: true,
useArrows: true,
rootVisible: true,
width: 200,
store: me.getStore()
});

// Create DataView
var view = Ext.create('Ext.Panel', {
title: 'Files',
frame: false,
region: 'center',
collapsible: false,
store: me.getStore()
});

me.tree = tree;
me.view = view;

me.items = [me.tree, me.view];

me.callParent(arguments);
},
...

vietits
5 Nov 2012, 5:13 AM
In the Tree Panel "displayField" property does not work ... (I set the field "name" - and the text disappeared)

What does App.Files.Model look like? Does it contains "name" field?



In Tree Store "autoLoad" property does not work ... (I set the "false" - but the data is all the same load automatically ...)

TreeStore will force to load on its constructing if it has a root and autoLoad set to true or root is set expanded. So though you set autoLoad to false but you set the tree root to be expanded so it will cause tree store to load data from server.



Filtering does not work ... no "initComponent", no "afterRender" ...
I have tried function "filterBy" and "filters" but nothing happening
Events do not fire ... for example event "beforeinsert" - just do not react in any way ...

What am I doing wrong? Or is it a bug?

Not sure what you mean here. Please be more specific and supply the code your code to reflect the situtations.

lambidu
5 Nov 2012, 5:44 AM
What does App.Files.Model look like? Does it contains "name" field?
Yes, here is code:


Ext.define('App.Files.Model', {
extend: 'App.Model',
fields: [
'id',
'path',
'name',
'text',
'type',
'leaf',
'expanded',
],
hasMany: {
model: 'model',
name: 'children'
}
});




TreeStore will force to load on its constructing if it has a root and autoLoad set to true or root is set expanded. So though you set autoLoad to false but you set the tree root to be expanded so it will cause tree store to load data from server.

OK, understand... Thanx ;)




Not sure what you mean here. Please be more specific and supply the code your code to reflect the situtations.

I try to get filtered records...
in "initComponent" function - nothing happen, no filter... no execution...



initComponent: function() {
var me = this;
var store = me.getStore();

store.filterBy(function(record, id) {
console.log('Record to filter in initComponent: ', record);
return true;
}, store);

// Create tree
var tree = Ext.create('Ext.tree.Panel', {
title: 'Browse',
frame: false,
region: 'west',
collapsible: true,
floatable: false,
//displayField: 'name',
split: true,
useArrows: true,
rootVisible: true,
width: 200,
store: store
});

// Create DataView
var view = Ext.create('Ext.Panel', {
title: 'Files',
frame: false,
region: 'center',
collapsible: false,
store: me.getStore()
});

me.tree = tree;
me.view = view;

me.items = [me.tree, me.view];

me.callParent(arguments);
},


in "afterRender" function - nothing happen, no filter... no execution...



afterRender: function() {
var me = this;

var store = me.getStore();

store.filterBy(function(record, id) {
console.log('Record to filter in afterRender: ', record);
return true;
}, store);

me.tree.store = store;

me.callParent(arguments);
},


you can see in the screen I posted below the console log...
39820
here is no rows like "Record to filter in afterRender: {...}"
function filterBy was not called...
and I try to do something like this:


var filter = Ext.create('Ext.util.Filter', {
filterFn: function(record) {
console.log('Record to filter in initComponent: ', record);
return true;
}
});

store.filters.filter(filter);


and again nothing... :(

P.S. Sorry for my english... :s

lambidu
5 Nov 2012, 5:54 AM
I read all posts from Google...
Tried all solutions I've found there...
but can't make this to work properly... :(

http://screencast.com/t/0cWfHSJu

lambidu
5 Nov 2012, 6:49 AM
bump

vietits
5 Nov 2012, 4:30 PM
Yes, here is code:


Ext.define('App.Files.Model', {
extend: 'App.Model',
fields: [
'id',
'path',
'name',
'text',
'type',
'leaf',
'expanded',
],
hasMany: {
model: 'model',
name: 'children'
}
});

App.Files.Model looks OK. What does the json data look like?

[QUOTE]
I try to get filtered records...
in "initComponent" function - nothing happen, no filter... no execution...



initComponent: function() {
var me = this;
var store = me.getStore();

store.filterBy(function(record, id) {
console.log('Record to filter in initComponent: ', record);
return true;
}, store);

// Create tree
var tree = Ext.create('Ext.tree.Panel', {
title: 'Browse',
frame: false,
region: 'west',
collapsible: true,
floatable: false,
//displayField: 'name',
split: true,
useArrows: true,
rootVisible: true,
width: 200,
store: store
});

// Create DataView
var view = Ext.create('Ext.Panel', {
title: 'Files',
frame: false,
region: 'center',
collapsible: false,
store: me.getStore()
});

me.tree = tree;
me.view = view;

me.items = [me.tree, me.view];

me.callParent(arguments);
},


in "afterRender" function - nothing happen, no filter... no execution...



afterRender: function() {
var me = this;

var store = me.getStore();

store.filterBy(function(record, id) {
console.log('Record to filter in afterRender: ', record);
return true;
}, store);

me.tree.store = store;

me.callParent(arguments);
},


you can see in the screen I posted below the console log...
39820
here is no rows like "Record to filter in afterRender: {...}"
function filterBy was not called...
and I try to do something like this:


var filter = Ext.create('Ext.util.Filter', {
filterFn: function(record) {
console.log('Record to filter in initComponent: ', record);
return true;
}
});

store.filters.filter(filter);

and again nothing... :(

There is no implementation of filterBy() method with Ext.data.TreeStore. It's just an empty method that is inherited from Ext.data.AbstractStore.