PDA

View Full Version : URGENT!!! TreePanel



sebas2515
8 Mar 2012, 8:49 AM
Iīm ext4 version 4.07. Iīm trying to do a static and dinamic treepanel. but i got some problems.When i run my aplicattion looks like this:32511But when i do click over the folder categorias like is shown in the image, the nodes of this are duplicatedand the firebug show me an error like this:32512Iīm really worried because all aplication that i made in ext3 have an similar treepanel, and I didnīt have this prblems.I need some help whit this, I trust on you. thanks!

incutonez
8 Mar 2012, 8:58 AM
It's a problem with the copy function. See this thread http://www.sencha.com/forum/showthread.php?134844-tree-node-copy%28deep%29-not-working-%284.0.1

sebas2515
8 Mar 2012, 11:41 AM
It's a problem with the copy function. See this thread http://www.sencha.com/forum/showthread.php?134844-tree-node-copy(deep)-not-working-(4.0.1


I replaced the functio copy and it doesnīt work. who havae another solutions for me.

incutonez
8 Mar 2012, 12:05 PM
Well that thread replaces it in ext-all-debug, so you're including that in your project or you replaced the copy function with whatever ext-all file you're using, right?

Otherwise, providing some code would be helpful.

sebas2515
8 Mar 2012, 6:58 PM
Well that thread replaces it in ext-all-debug, so you're including that in your project or you replaced the copy function with whatever ext-all file you're using, right?

Otherwise, providing some code would be helpful.

I replaced it in ext-all-debug file Only. its that rigth or not?

incutonez
8 Mar 2012, 7:02 PM
As long as you're actually including ext-all-debug (and not ext-all or ext-all-dev), then yes, that's fine, and it should work... otherwise, let's see your code.

sebas2515
9 Mar 2012, 5:54 AM
this is tree Panel code
Ext.define('RecursosEducativos.modulos.recursos.view.busqueda.ArbolBusquedaVista', { extend: 'Ext.tree.Panel',
autoShow: true,
id: 'id-arbolbusquedavista',
store: null,
title: 'Buscador',
region: 'center',
rootVisible: false,


initComponent: function() {
var me = this;

var store = Ext.create('Ext.data.TreeStore', {


root: {
id: 'idroot',
leaf: false,
expanded: true,
children:[
{
text: "Buscador",
leaf: false,
id: 'carpBuscador',
children:[{

text: "Buscador General",
leaf: true,
id: 'buscarGeneral',
icon: Extidi.Constantes.URL_ICONO_EXAMINAR_IMPORTE
}]
}

]
}
});
me.store = store;
var stoDinamico = Ext.create('RecursosEducativos.modulos.recursos.store.busqueda.ArbolBusquedaStore');

var load = me.store.getRootNode().appendChild(stoDinamico.getRootNode()).expand();

me.store = store;
me.callParent(arguments);
}


});


And this is my store for load the tree dynamically


Ext.define('RecursosEducativos.modulos.recursos.store.busqueda.ArbolBusquedaStore',{ extend: 'Ext.data.TreeStore',

model: 'RecursosEducativos.modulos.busqueda.model.CategoriasModelo',

proxy: {
type: 'ajax',
url: Extidi.Constantes.URL_CATEGORIAS_LISTAR_ARBOL,

reader: {
type: 'json',
root: 'data'
}
},

root: {
text: 'Categorias',
id:'carpCategorias',
expanded: false

},
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'
}]


});


this is the code php:

public function listarCategoriasArbol() { $this->load->model("categorias"); $id = $this->input->post("node");
$categoria = $this->categorias->listar(); $nodes = array(); for ($i = 0; $i < count($categoria); $i++) {
$nodes[$i] = array('text' => $categoria[$i]['NombreCategoria'], 'id' => $categoria[$i]['IdCategoria'], 'leaf' => true, 'cls' => 'folder'); }
$this->respuesta(true, $nodes, "data");
}

incutonez
9 Mar 2012, 7:35 AM
In your tree Panel code, change


var load = me.store.getRootNode().appendChild(stoDinamico.getRootNode()).expand();

to (in red are the additions)


me.store.getRootNode().appendChild(stoDinamico.getRootNode().copy(null, true)).expand();


And why are you doing the second "me.store = store"? Also, you're not using the load variable, so that's why I got rid of it in the modified code.

sebas2515
9 Mar 2012, 12:47 PM
In your tree Panel code, change


var load = me.store.getRootNode().appendChild(stoDinamico.getRootNode()).expand();

to (in red are the additions)


me.store.getRootNode().appendChild(stoDinamico.getRootNode().copy(null, true)).expand();


And why are you doing the second "me.store = store"? Also, you're not using the load variable, so that's why I got rid of it in the modified code.

I removed the the line repeated and the variable load.


Also I put the code that you gave me, but now the nodes donīt appear.

here is the new code

Ext.define('RecursosEducativos.modulos.recursos.view.busqueda.ArbolBusquedaVista', { extend: 'Ext.tree.Panel',
alias: 'widget.arbolbusquedavista',
autoShow: true,
id: 'id-arbolbusquedavista',
store: null,
title: 'My Tree Panel',
region: 'center',
rootVisible: false,
toggleOnDblClick:false,

initComponent: function() {
var me = this;

var store = Ext.create('Ext.data.TreeStore', {


root: {
id: 'idroot',
leaf: false,
expanded: true,
children:[
{
text: "Buscador",
leaf: false,
id: 'carpBuscador',
children:[{

text: "Buscador General",
leaf: true,
id: 'buscarGeneral',
icon: Extidi.Constantes.URL_ICONO_EXAMINAR_IMPORTE
}]
}

]
}
});
me.store = store;
var stoDinamico = Ext.create('RecursosEducativos.modulos.recursos.store.busqueda.ArbolBusquedaStore');


me.store.getRootNode().appendChild(stoDinamico.getRootNode().copy(null, true)).expand();


me.callParent(arguments);
}


});

incutonez
9 Mar 2012, 1:02 PM
Can you supply the code for your model "RecursosEducativos.modulos.busqueda.model.CategoriasModelo" and the JSON that you're generating for the tree? I know you posted the PHP code, but if I could get the JSON, that would help out a lot more...

incutonez
9 Mar 2012, 1:23 PM
Here's an example that works for me. Unzip the file to your Ext JS folder (you may have to update the location of the Ext JS files in the HTML headers) and run it.

sebas2515
9 Mar 2012, 2:18 PM
Can you supply the code for your model "RecursosEducativos.modulos.busqueda.model.CategoriasModelo" and the JSON that you're generating for the tree? I know you posted the PHP code, but if I could get the JSON, that would help out a lot more...

this is my model

Ext.define("RecursosEducativos.modulos.busqueda.model.CategoriasModelo", { extend : "Ext.data.Model",
fields : [
"text",
"files",
"internalId",
"leaf",
"cls",
"id"

]
});

and this the json generated


{"data":[{"text":"Firme","id":"1","leaf":true,"cls":"folder"},{"text":"Firme 2","id":"2","leaf":true,"cls":"folder"},{"text":"hijo de firme 2","id":"10","leaf":true,"cls":"folder"}],"success":true}

when i put your code

copy(null, true)

the json isnīt generated

sebas2515
9 Mar 2012, 2:33 PM
I like your example and thanks, but i did one similar, but i need one that hava a dynamic store. because i need to create the tree with the data of DB

incutonez
9 Mar 2012, 4:25 PM
I think it's a problem with your JSON and how the tree reads it... try returning this as your JSON:



{children: [{"text":"Firme","id":"1","leaf":true,"cls":"folder"},{"text":"Firme 2","id":"2","leaf":true,"cls":"folder"},{"text":"hijo de firme 2","id":"10","leaf":true,"cls":"folder"}]}


I was getting a 'record is null' error from my AJAX call because after the store was instantiated, the data wasn't loaded, so I added a load call (in red). Also, I took out .expand() because the root node was already expanded and I was experiencing an infinitely loading node. So the ending part of my treepanel initComponent looked like this:



me.store = store;
var store2 = Ext.create('myStore');
store2.load(null);
me.store.getRootNode().appendChild(store2.getRootNode());
me.callParent(arguments);

incutonez
9 Mar 2012, 7:26 PM
Hmm, so that didn't seem to work because the second root node isn't loading fast enough... So! The thing is, when you create your 2nd store, make sure the information loads quick enough... Using the JSON above, I did:



Ext.define('myStore', {
extend: 'Ext.data.TreeStore',
storeId: 'sor',
model: 'mod',
proxy: {
type: 'ajax',
url: 'blah',
reader: {
type: 'json'
}
}
});
var store2 = Ext.create('myStore').load();


Define tree


Ext.define('myTree', {
...,
initComponent: function() {
...
me.store = store;
me.store.getRootNode().appendChild(store2.getRootNode());
me.callParent(arguments);
}
});


Then called the tree after the page loaded. So what I was experiencing was the store loading asynchronously but wasn't ready when I was creating the tree... and here's what my final tree looks like after everything's done.

32588

sebas2515
10 Mar 2012, 7:37 AM
i have one question, if you close the root folder and open it again,

do not the nodes duplicate?

I obtain this

32595

When the aplication start,

but after i do click to open the categorias folder looks like this

32596

incutonez
10 Mar 2012, 10:26 AM
I think I could recreate that problem. Try doing this. In your store, make sure your base root looks similar to this.



...store2 definition...
root: {
text: 'blah',
expanded: false,
id: 'blah',
children: [] // not having this part really messed things up for me.
}




me.store.getRootNode().appendChild(store2.getRootNode().copy(null, true));


And make sure you add the .copy(null, true) back in. With all of that, the tree worked just fine. Let me know if that helps you out.