Problems with Tree Store and Tree Panel

[lambidu]

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 ...
2012-11-05_1433.png
"

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]

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]

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...
2012-11-05_1528a.png
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...

[lambidu]

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]

bump

[vietits]

[QUOTE=lambidu;907638]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?

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...
Attachment 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.