http://codigo.extjs.mx/extjs4/tabs/tabs.rar
En el siguiente tutorial vamos a crear un contenedor tipo Viewport, se configura de tal modo que en la región este tenemos un árbol y en la región centro un tabpanel, el árbol nos dará la opción de agregar más tabs al tabpanel principal, por lo que en casa clic de cada nodo del árbol veremos un nuevo tab.
<pre name="code" class="javascript">
items:[{
region: 'west',
title: 'Navigación',
width: 150,
items:[{
xtype:'treepanel',
rootVisible: false,
border:false,
root: rootTreePanel,
}]
},{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'Default Tab',
html:'Selecciona una opcion del menu'
}
}]
</pre>
Agregamos un listeners al treepanel, quien estará escuchando el evento itemclick para cada uno de los nodos del árbol, cada vez que se dispara dicho evento buscamos el padre viewport y a su vez el hijo del viewport tipo tabpanel, una vez obtenido el tabpanel buscamos dentro de sus componentes algún tab con el índice ‘tab’+index, este índice lo ocuparemos de referencia para saber si ya tenemos o no el tab del nodo 1, el tab del nodo 2, y así sucesivamente, en caso de no obtenerlo lo insertamos, con tabpanel.add(object), insertamos un nuevo tabpanel con identificador ‘tab’+index, y al final únicamente ponemos como activo el nuevo tan insertado o el ya existente.
Veamos el código para la descripción dada:
<pre name="code" class="javascript">
itemclick: function(t,record,item,index){
var vport = t.up('viewport'),
tabpanel = vport.down('tabpanel');
if(!tabpanel.getChildByElement('tab'+index)){
tabpanel.add({
title: 'Tab ' + record.get('text'),
html:'Opcion seleccionada: ' + record.get('text'),
id:'tab'+index,
closable:true
});
}
tabpanel.setActiveTab('tab'+index);
}
</pre>
Ahora veamos el cuerpo del ejemplo
<pre name="code" class="javascript">
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var rootTreePanel = {
text: 'Root',
expanded: true,
children: [{
id:'child1',
iconCls:'users',
text: 'Corte de Caja',
leaf: true
}, {
id:'child2',
iconCls:'gastos',
text: 'Gastos Diversos',
leaf: true
}, {
id:'child3',
text: 'Configurar',
expanded: true,
children: [{
id:'child4',
iconCls:'users',
text: 'Usuarios',
leaf: true
},{
id:'child5',
text: 'Productos',
leaf: true
},{
id:'child9',
iconCls:'cart',
text: 'Promociones',
leaf: true
},{
id:'child6',
iconCls:'categorias',
text: 'Categorias',
leaf: true
},{
id:'child7',
iconCls:'medidas',
text: 'Medidas',
leaf: true
},{
id:'child8',
iconCls:'mesas',
text: 'Mesas',
leaf: true
}]
}]
};
Ext.create("Ext.container.Viewport",{
renderTo: Ext.getBody(),
layout:'border',
scope:this,
items:[{
region: 'west',
title: 'Navigación',
width: 150,
items:[{
xtype:'treepanel',
rootVisible: false,
border:false,
root: rootTreePanel,
listeners:{
itemclick: function(t,record,item,index){
var vport = t.up('viewport'),
tabpanel = vport.down('tabpanel');
if(!tabpanel.getChildByElement('tab'+index)){
tabpanel.add({
title: 'Tab ' + record.get('text'),
html:'Opcion seleccionada: ' + record.get('text'),
id:'tab'+index,
closable:true
});
}
tabpanel.setActiveTab('tab'+index);
}
}
}]
},{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'Default Tab',
html:'Selecciona una opcion del menu'
}
}]
});
});
</pre>
Danos tus comentarios
Por favor, requiero que el tree se cargue desde mySql, tengo lo siguiente, pero no funciona.
Jueves 11 de julio, 2013Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
// actionMethods: 'POST',
url: BASE_URL + 'comunes/menu/getMenuBy'
},
root: {
text: 'Root',
id: 'Root',
expanded: true
}
});
Ext.create("Ext.container.Viewport",{
renderTo: Ext.getBody(),
layout:'border',
scope:this,
items:[{
region: 'west',
title: 'Navigación',
width: 150,
items:[{
xtype:'treepanel',
rootVisible: false,
border:false,
store: store,
listeners:{
itemclick: function(t,record,item,index){
var vport = t.up('viewport'),
tabpanel = vport.down('tabpanel');
if(!tabpanel.getChildByElement('tab'+index)){
tabpanel.add({
title: 'Tab ' + record.get('text'),
html:'Opcion seleccionada: ' + record.get('text'),
id:'tab'+index,
closable:true
});
}
tabpanel.setActiveTab('tab'+index);
}
}
}]
},{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: {
title: 'Default Tab',
html:'Selecciona una opcion del menu'
}
}]
});
});
Mi controlador es:
function getMenuBy() {
$nodo = $_GET['node'];
$query = $this->menu_model->get($nodo);
$con = 0;
foreach ($query as $row) {
$items[] = $row;
++$con;
}
$data = array(
'success' => true,
'total' => $con,
'Root' => $items
);
echo json_encode($data);
}
y mi modelo es:
function get($nodo) {
if ($nodo = 'root'){
$nodo = 0;
}
$data = array();
$query = $this->db->query("SELECT id, text, leaf from mytree WHERE parent_id = '".$nodo."'");
if ($query->num_rows > 0) {
foreach ($query->result() as $row) {
$data[] = $row;
}
}
return $data;
}
Uso codeigniter y extjs.
Muchas Gracias
Muy buenas!, me gustaria saber si se puede abrir una pagina en php dentro de un tag, si es asi tambien me gustaria saber como llamo a la pagina desde el menu. Desde ya gracias por la ayuda.
Jueves 27 de junio, 2013