1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    7
    Vote Rating
    0
    LarsG is on a distinguished road

      0  

    Question MVC hasMany associations with nested treestore data

    MVC hasMany associations with nested treestore data


    Hi,

    I have some problems to populate a treestore if the tree-data is returned as nested data
    inside the master model.

    I have following models with a hasMany association between them:

    An user model:

    Code:
    Ext.define('app.model.User', {
        extend: 'Ext.data.Model',
        fields: ['id','first_name','last_name'],
    
        proxy: {
            type: 'rest',
            url : '/users',
    	reader: {
    		        type: 'json',
    			root: 'users'
    	}
        },
    		
        hasMany: {model: 'app.model.Team', name: 'teams'}
    		
    });
    A team model:

    Code:
    Ext.define('app.model.Team', {
        extend: 'Ext.data.Model',
        fields: [
            'id',
    	{name: 'name', type: 'string'},
    	{name: 'description', type: 'string'}
        ],
    		
        belongsTo: 'app.model.User'
    		
    });
    and I have following stores:

    Code:
    Ext.define('app.store.User', {
        extend: 'Ext.data.Store',
        model: 'User',
        autoLoad: true
    });
    
    Ext.define('app.store.Team', {
        extend: 'Ext.data.TreeStore',
        model: 'Team',
    		
        root: {
            expanded: true,
    	loaded:true
        }		
    		
    });
    One team can only exist with one user or one parent team.

    The "/users" path returns following JSON-formated data:

    Code:
    {
    	"success":true,
    	"users":[
    		{
    			"first_name":"Claudia",
    			"last_name":"User",
    			"id":60,
    			"teams":[
    				{	
    				"name":"Claudias Teams",
    				"id":117,
    				"expanded":true,
    				"description":null,
    				"children":[
    						{
    						"name":"Team A",
    						"expanded":true,
    						"id":119,
    						"description":null,
    						"children":[
    							{
    								"name":"Team A1",
    								"id":122,
    								"expanded":true,
    								"description":null,
    								"children":[
    										{
    										"name":"Team AA1",
    										"expanded":true,"id":129,
    										"description":null,
    										"children":[]
    										},
    										{
    										"name":"Team AA2",
    										"expanded":true,
    										"id":130,
    										"description":null,
    										"children":[],
    										}
    									]
    								},
    								{
    								"name":"Team A2",
    								"id":123,"expanded":true,
    								"description":null,
    								"children":[]
    								}
    						},
    						{
    						"name":"Team B",
    						"expanded":true,
    						"id":120,
    						"description":null,
    						"children":[],
    						"iconCls":null
    						}
    					]
    		}
    ]}
    The users are displayed with a grid panel:

    Code:
    Ext.define('app.view.user.List' ,{
        extend: 'Ext.grid.Panel',
        alias : 'widget.userlist',
        store : 'Users',
        title : 'User List',
    
        columns: [
    	{header: 'Name',  xtype:'templatecolumn', tpl:'{last_name}, {first_name}', flex: 1}
        ],
    
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Add',
    	    action: 'new'
            }, {
                text: 'Remove',
    	    action: 'delete'
            }]
        }]
    
    });
    The teams are displayed with a tree-grid:

    Code:
    Ext.define('app.view.team.Tree' ,{
        extend: 'Ext.tree.Panel',
        alias : 'widget.fleettree',
        title : 'Geräte',
        width : 540,
    
        store: 'Teams',
    		
        rootVisible: false,
        collapsible: true,		
    		
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop'
            }
        },
    				
        columns : [
            { xtype: 'treecolumn', text: 'Teams / Members', dataIndex: 'name',flex: 1 },
    	{ text: 'Beschreibung', dataIndex: 'description',flex:1}
        ],
    		
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Neu',
    	    action: 'new'
            }, {
                text: 'Löschen',
    	    action: 'delete'
            }]
        }]
    		
    });

    I use an app.controller.Users controller with following code:

    Code:
    Ext.define('app.controller.Users', {
        extend: 'Ext.app.Controller',
    		
    		...
    		
        init: function() {
    			
          this.control({
              'userlist': {
                itemclick: this.displayUser
              }
    					...
          });
    
        },
    		
        ...
    		
        displayUser: function (grid,record) {
            var user_id = record.get('id');
    	... ??? ...
        }		
    });
    If I click on one item inside the user grid I would like to display the nested tree-data of this user
    inside the tree grid. The standard master-detail data relationship. How to do this using the nested data of the users proxy request?

    Best regards,
    Lars

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    2
    Vote Rating
    0
    jpochat is on a distinguished road

      0  

    Default


    Hi

    Looking for same requirements (TreePanel with multiple models/associations). Master data is read correctly, but detail data does not seem to be read or mapped :-(

    Did you find answer to you own question since June?

    Thanks in advance.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    7
    Vote Rating
    0
    LarsG is on a distinguished road

      0  

    Default


    Hi,

    I found a solution for my own problem, but it's a workaround.

    Code:
    displayUser: function (grid,record) {        
    var me = this;        
    var user_id = record.get('id');    
    var store = me.getTeamsStore();        
    store.getProxy().url = "/users/"+user_id+"/teams";        
    store.load();    
    }
    I moved the association handling to my server backend and change the store url with a custom path. It's not a clean solution, but it works for me.

    Kind regards,
    Lars

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi