How could I populate a custom Tree (PersistentFilterPicker)?

[mishoboss]

How could I populate a custom Tree (PersistentFilterPicker) from database?
Maybe it's dumb question, but I didin't find a way. You extend the ExtJS TreePanel in PersistentFilterPicker and hardcode different functionality which I would like to modify.

Code: Select all

Tine.Invoices.TreePanel = Ext.extend(Tine.widgets.grid.PersistentFilterPicker, {
   
    // quick hack to get filter saving grid working
    //recordClass: Tine.Invoices.Model.Invoice,
   
    initComponent: function() {
        this.filterMountId = 'Invoice';
       
        this.root = {
            id: 'root',
            leaf: false,
            expanded: true,
    loader: new Ext.tree.TreeLoader({
                    preloadChildren: true,
                    dataUrl:'index.php?method=Invoices.getTreeCompanies'
            })...

From index.php?method=Invoices.getTreeCompanies I get:

[{"text":"test","id":"id","leaf":false,"cls":"folder"}]

However this creates an error:

Event thread: click
Error:
name: TypeError
message: Statement on line 84: Cannot convert undefined or null to Object
Backtrace:
Line 84 of linked script http://localhost/tine200/Tinebase/js/wi ... 1240745238
this.getNodeById(this.filterMountId).appendChild(this.filterNode);
... Line 70 of linked script http://localhost/tine200/Invoices/js/In ... 1240907397
Tine.Invoices.TreePanel.superclass.afterRender.call(this);
Line 12863 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
this.afterRender(this.container);
... Line 14511 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
Ext.Container.superclass.render.apply(this, arguments);
Line 14819 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
c.render(target, position);
Line 14811 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
this.renderItem(c, i, target);
... Line 14944 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target);
Line 14796 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
this.renderAll(ct, target);
... Line 14904 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
Line 14790 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
this.onLayout(this.container, target);
Line 14935 of linked script http://localhost/tine200/library/ExtJS/ext-all-debug.js
this.layout();
Line 287 of linked script http://localhost/tine200/Tinebase/js/Ma ... 1240745236
cardPanel.layout.setActiveItem(panel.id);
Line 113 of linked script http://localhost/tine200/Tinebase/js/wi ... 1240745238
Tine.Tinebase.MainScreen.setActiveTreePanel(this.treePanel, true);
Line 59 of linked script http://localhost/tine200/Tinebase/js/wi ... 1240745238
this.setTreePanel();
Line 72 of linked script http://localhost/tine200/Tinebase/js/Ap ... 1240745223
app.getMainScreen().show();
...

This is the way I used to populate a regular TreePanel, but it doesn't work with Tine.widgets.grid.PersistentFilterPicker. Please, tell me a way to populate the tree from a database records.

Thanks in advance

[nelius]

Hi,

one common pitfall with the Ext.Tree, is that it expects valid JSON data for the tree ONLY. This is the reason you will find the following php code in our tree service php methods.

Code: Select all

echo Zend_Json::encode($treeData);
exit();


cause the Zend_Json_Server would add a sucess property to the data.

Dealing with the Ext.Tree is always a bit tricky, as this component always behaves a bit different as expectet. But there are a number of examples in the Ext docu which should help on this.

An other thing is, that we useally overwrite the tree loader for a clean speration of view/backend code. If you don't use them, make shure to send the json key and requestmethod to the server.
cu
cornelius

[mishoboss]

Well, I can't make it work
What's the exact data structure I need? I see you output this in the Addressbook app:

Code: Select all

[{"id":"5","name":"Tine 2.0 Admin Account's \u043b\u0438\u0447\u043d\u0438 \u0430\u0434\u0440\u0435\u0441\u0438","type":"personal","backend":"Sql","application_id":"b41e5c8ce658b9b53439806245743d3c7e18edc1","account_grants":"{\"account_id\":1,\"account_type\":\"account\",\"readGrant\":true,\"addGrant\":true,\"editGrant\":true,\"deleteGrant\":true,\"adminGrant\":true}"}]

Also I saw you work with your own loader (Tine.widgets.container.TreeLoader), so I changed my code to this:

Code: Select all

Tine.Invoices.TreePanel = Ext.extend(Tine.widgets.grid.PersistentFilterPicker, {
   
    // quick hack to get filter saving grid working
    //recordClass: Tine.Invoices.Model.Invoice,
   
    initComponent: function() {
        this.filterMountId = 'Invoice';
       
        this.root = {
            id: 'root',
            leaf: false,
            expanded: true,
             loader: new Tine.widgets.container.TreeLoader({
             dataUrl:'index.php',
             baseParams: {
               jsonKey: Tine.Tinebase.registry.get('jsonKey'),
            method: 'Invoices.getTreeCompanies'
             }
           })

[nelius]

Looks a bit strage, you are extending the persistenFilterPanel with a loader from the ContainerTree.

persistentFilters and containers are completle seperate trees. if you don't deal with containers and don't deal with persistentFilters, it would be the best to create your own treePanel.

ps: additionally to the json key, you also need to add a requestType, to work around some buggy browsers. Take a look into initAjax (tineInit) or containerTree to see the exact name

[mishoboss]

Well, I just can't make it work. I would like to use the Tine.widgets.grid.PersistentFilterPicker, because of the saved filters option. Changing the loader doesn't help. It still get method: Invoices.searchInvoices, not method: Invoices.getTreeCompanies. I tried to overwrite Tine.widgets.grid.PersistentFilterLoader, but still get method: Invoices.searchInvoices.

Any help or hint? Also a source code, couse maybe I'm wrong with something general

[nelius]

hi,

this is the way filters an grid work per default. it seems the picker is working and after picking it wants to trigger the grid to load data with the chosen filter. per default (and convetion) i tries to access the search<modelname> method of your app

cu cornelius