nestedlist

[yeimy]

Hola:
como puedo enlazar a cada nodo de una lista anidada y nueva vista (.js) . Este es el código que tengo

Ext.define('Mtp.store.Demos', {
	 	 extend: 'Ext.data.TreeStore',
        requires: ['Mtp.model.Demo', 'Mtp.view.Agilidad'],
		config: {
            model: 'Mtp.model.Demo',
			defaultRootProperty: 'items' ,
			root:{
			items: [
            	{
               		text: 'Agilidad',
				items: [
                    {
                        text: 'Agilidad505',
			view: 'Agilidad',// Lo he intentado así , pero no sale
						
					},
                    {
						text: 'Agilidad Illinois',
						id: 'agilidadillinois',
					},
					{
						text: 'Cambio de dirección lateral',
                        id: 'direclateral'
						
					},
					{
						text: 'Prueba rapida de pies',
                        id: 'rapidadepies'
						
					},
					{
						text: 'Zig-Zag',
                        id: 'zigzag'
           			}]
            }],
        }
  }
});

Gracias por su ayuda.

[mitchellsimoens]

So you want when you tap on Agilidad505 to display a view based on the view data?

[yeimy]

I wish that when you click on Agillidad505 show a view .js a calculator is not a Data View

[mitchellsimoens]

If it is a leaf it will go to the detailCard you can specify in the detailCard config of the nestedlist. You can use leafitemtap event on the nestedlist to apply data to the detailCard.

[yeimy]

I triedlike this:

Ext.define('Mtp.view.Calculadora', {extend: 'Ext.NavigationView',
//requires: ['Mtp.view.Agilidad505'],
xtype: 'calculadora',



config:
{

title: 'Calculadoras',
iconCls: 'bookmarks',
//autoDestroy: false,

items:[{
xtype:'nestedlist',
//itemTpl: '{title}',
title:'Caculadoras',
store:'Demos',
detailCard: {
xtype:'panel',
scrollable: true,
styleHtmlContent: true,

},
listeners: {
leafitemtap: function(nestedList, list, index, element, post, view) {
this.getDetailCard().setHtml(post.get('view'));
}
}

}]
}

});

but I write takes its name from the view (examle if the view is view: 'Agilidad505' from the end of the road I get only "Agilidad505") and does not lead me to the view that name is (Mtp. view.Agilidad505), saved as Agilidad505.js

[mitchellsimoens]

You can use add() to add a component to the detail card based on selection or setDetailCard to replace the detail card within the leafitemtap event listener.

[yeimy]

I did like this:

Ext.define('Mtp.view.Calculadora', {extend: 'Ext.NavigationView',
xtype: 'calculadora',
    config: 
    {
        tab: {
        title: 'Calculadoras',
        iconCls: 'bookmarks',
        scrollable: true,
        //text:'Calculadoras'
        },
        
               
            items:[{
                title:'Categorias',
                xtype:'nestedlist',                
                store:'Demos',
                
            
    
    listeners: {
        leafitemtap: function(nestedList, list, index, element, post, view) {
            
            var me = list.getParent(),
            store = list.getStore(),
            record  = store.getAt(index);
            byXtype = record.get('xtype');
            title: record.get('title');
            var name = record.get('view'),
                ns   = 'Mtp.view.';
            // BUILD THE VIEW
             view = Ext.create(ns + name, { 
                title: record.get('text'),                                
             });
            console.log(ns + name); 
            // ATTACH THE VIEW AS A PANEL to the Tabbed View
            var calculadorPanel = Ext.getCmp(byXtype) || view
                            calculadorPanel.setRecord(list.getStore().getAt(index));
                            if (!calculadorPanel.getParent()) {
                                // Go to the newly created panel with our custom view
                                this.parent.setActiveItem(calculadorPanel, 'slide');//Ext.NavigationView.add(editorPanel);                    
                            }
                            calculadorPanel.show();
            }
        }
                }]
        
        
    },
    getViewName: function(item) {
        var name = item.get('name') || item.get('text'),
            ns   = 'Mtp.view.';
            return ns + name;        
    },
});

Now I want the title of the nestedlist not repeat, I have this:
pantallaapp.jpg

I want a different top or the bottom

[yeimy]

please help!!!!!!!!!!!!!!!!!!!!

[mitchellsimoens]

One is for the navigation view and the other is for the nestedlist. If you don't want the one for nestedlist then use the toolbar config

[yeimy]

I could not do it, I want the title"Calculadoras" in the navigation view and the title "Categorias" in the nestedlist