Results 1 to 8 of 8

Thread: Modern toolkit EXTJS 6.2 - Grid does not show the store data at app start time.

  1. #1
    Sencha User
    Join Date
    Feb 2016
    Posts
    9
    Answers
    1

    Default Modern toolkit EXTJS 6.2 - Grid does not show the store data at app start time.

    Modern Toolkit After user login into the app, i need to put a grid at "home page" of my app, this is the main app panel(NavigationView), with user related data. The NavigationView has 2 items(hbox layout), a treelist menu on the left, and a grid panel on the right.
    When I press the menu option to show the same grid with NavigationView.push(grid); its works fine. Then why not at starting?
    I tryed deleting the treelist menu.... same problem. I tryed put the grid into a panel, and from the panel init controller method load data to the global store for that grid. No errors, but same problem...
    I dont know why it works fine when selecting from menu, but not at home page. I debug it and not errors are thrown.....
    Have the code at home, but I remeber it:


    Code:
    Ext.define('MyNavView', {//My Main called from app launch.
    extend: 'Ext.NavigationView',
    
    controller:'mainController',
    viewModel:'main',//has the store for the treelist menu
    
        items: [{
            xtype:'treelist',//my menu
            title: '...',
        },{
            xtype:'myPanelGrid'
        }]
    });
    
    Ext.define('MyPanelGrid', {
    extend : 'Ext.Panel',
    xtype: 'myPanelGrid',
    controller:'myPanelGridController',
    ..
       items:[{
            xtype: 'myGrid'
       }]
    });
    
    Ext.define('MyGrid', {
    extend : 'Ext.grid.Grid',
    xtype: 'myGrid',
    
    store: Ext.data.StoreManager.lookup('myStore');
    itemId: 'gridItemId',
    ..
    columns:[...]
    });
    
    Ext.define('MyPanelGridConreoller', {
    extend : 'Ext.Panel',
    
    alias: 'myPanelGridController',
    ..
       init:function(){
    
            //Perform ajax call whith userId, getting JSON data here. OK
            var MyPanelGridView = this.getView();
            var grid = MyPanelGridView.queryById('gridItemId');
            var myStore = Ext.data.StoreManager.lookup('myStore');
            myStore.load(JSON ,false);
            grid.setStore(myStore);
    
    //Here it arrive whitout errors in chrome console, but grid its empty
    console.log(JSON);//has correct data
    console.log(myStore);//has correct data
    
       }
    });

    -But when clicking the Menu item i do the next and it works fine:

    MyNavView.push({
    xtype: 'myPanelGrid'
    });

    -Errors messages: 0 Actual
    -Results: empty grid
    -Expected results: grid with data when displaying the Navigation view at app start.

    Any ideas?
    Thanks!!



    Last edited by forestgunp9; 25 Jul 2019 at 8:38 PM. Reason: indent code

  2. #2
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    150
    Answers
    15

    Default

    Where and how is your store defined? Inside the viewModel? A separate store file? What does the network tab look like after the page is loaded?

    Seems like a timing issue is happening. Possible Fiddle?

    Suggestion, wrap code in the code tags for easier reading..
    Andy Allord
    Sencha MVP/Software Engineer

  3. #3
    Sencha User
    Join Date
    Feb 2016
    Posts
    9
    Answers
    1

    Default

    Thank you for suggestion allord.

    The store its in a file:

    Code:
    Ext.define('MyApp.store.MyStore', {
        extend: 'Ext.data.Store',
    
    
        alias: 'store.myStore',    
        requires: [
                   'Insports.model.Partido'
        ], 
        model: 'Insports.model.Partido'	
    });
    The Model in a file too:

    Code:
    Ext.define('Insports.model.Partido', {
        extend: 'Ext.data.Model',
    
    
        fields: [....]
    
    
    });
    I get the global store like:
    Code:
    var partidosStore = Ext.getStore('MyStore');
    I load store with JSON from an Ajax GET call at user login time, just before creating the main app view.
    The data its OK and console.log(myStore); show me the store with data. And console.log(JSON ); too, the data its there.

    Next:
    Code:
    var main = Ext.create({
            		xtype: 'app-main'  //NavigationView
                      });
    This NavigationView has a main viewModel and the grid as second item:
    Code:
    {
    	xtype: 'listarPartidos',
            title:'Partidos'
    }
    The grid:
    Code:
    Ext.define('MyApp.view.client.listarPartidos.ListarPartidos', {
        extend: 'Ext.grid.Grid',
        xtype: 'listarpartidos',
        alias: 'widget.listarPartidos',
    
    
        requires: [
            'MyApp.store.Partidos',
            'MyApp.model.Partido',
            'MyAppUtils'
        ],
    
    
        title: 'Partidos',
        cls: 'normalGrid',
        itemId: 'listarPartidosGridId',
        hideHeaders : true,
    
    
        store: Ext.StoreManager.lookup('Partidos'),
        
        columns: [.....]
    });

    The first item of the NavigationView its a treelist menu. When tapping menu "Partidos" who do:
    1-Ajax Call getting JSON data
    2-Get and load de global Store partidosStore.
    3- next:
    Code:
    var grid = Ext.create({
    				xtype : 'listarPartidos',
    				store : partidosStore
    			});
    var navigationView = this.getView();
    navigationView.push(grid); //this works fine.
    This time it works fine. But not at start time.

    Note: Here, if I instead put the grid into a panel, and then push this panel into de NavigationView , it doesn´t works too :
    3- next:
    Code:
    var myPanel = Ext.create({
                                       xtype: 'panel',
                                       items:[{
    				            xtype : 'listarPartidos',
    				            store : partidosStore
    			            }]
    ]);
    var navigationView = this.getView();
    navigationView.push(myPanel ); //THIS FAIL!!!
    Same problem here. Same reason?
    I am lost.
    I am not a expert with EXTJS 6.2 Modern.
    I have worked about 3 years with EXTJS 5.1.3, still not a expert, but have not this problems....

  4. #4
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    150
    Answers
    15

    Default

    Quote Originally Posted by forestgunp9 View Post
    Thank you for suggestion allord.

    The store its in a file:

    Code:
    Ext.define('MyApp.store.MyStore', {
        extend: 'Ext.data.Store',
    
    
        alias: 'store.myStore',    
        requires: [
                   'Insports.model.Partido'
        ], 
        model: 'Insports.model.Partido'    
    });
    My next question is, where is your reader and proxy defined?

    Example
    Code:
    Ext.define('MyApp.store.MyStore', {
        extend: 'Ext.data.Store',
    
        alias: 'store.myStore',    
        requires: [
                   'Insports.model.Partido'
        ], 
        model: 'Insports.model.Partido',
       proxy: {
         type: 'ajax',
         url: 'blah'
       },
       reader: {
         type: 'json',
         rootProperty: 'data'
       }
    });
    I'm trying to see how Ext JS knows what type of data is being returned and how to read it?

    I never create stores without proxy and reader configurations, as though without them data does return from the server correctly Ext JS has no clue how to handle that data. I also stopped defining proxy and reader in my stores and do it in the model where I can also set an
    Code:
      api: {
        create: 'url',
        read: 'url',
        update: 'url',
        destroy: 'url'
      }
    Andy Allord
    Sencha MVP/Software Engineer

  5. #5
    Sencha User
    Join Date
    Feb 2016
    Posts
    9
    Answers
    1

    Default

    It works without CRUD store in this project, don´t know why....

    We define stores as:
    Ext.define('sistradocext.store.MyStore', {
    extend: 'Ext.data.Store',


    requires: [
    'sistradocext.model.MyModel'
    ],
    model: 'sistradocext.model.MyModel',
    proxy: {
    type: 'memory',
    reader: {
    type: 'json'
    }
    }


    });

    Or simply as;
    Ext.define('sistradocext.store.MyStore', {
    extend: 'Ext.data.Store',


    requires: [
    'sistradocext.model.MyModel'
    ],
    model: 'sistradocext.model.MyModel',

    });


    we get JSON data and load the store. It works for us...
    In only a case I did it with a Rest CRUD proxy for another grid. May be I should try this.....
    Yes I will try it when returning to my job on moday!

  6. #6
    Sencha User
    Join Date
    Feb 2016
    Posts
    9
    Answers
    1

    Default

    Hi aallord!
    I am new to Fiddle.
    I am trying this as a sample of my problem:

    https://fiddle.sencha.com/#fiddle/2u7p&view/editor

    As you can see in the Fiddle, after logging in, I try to put a NavigationView(main) containing a treelist and a grid, into de ViewPort. But nothing going on...

  7. #7
    Sencha User
    Join Date
    Feb 2016
    Posts
    9
    Answers
    1

    Default

    Another test.
    I put de grid directly inline into de NavigationView items, with inline store and inline static data.
    It can see the grid but without data rows.... I feel grids doesnt work into NavigationView components......
    But, if same created grid instance I do NavigationView.push(sameGrid); it works.

  8. #8
    Sencha User
    Join Date
    Feb 2016
    Posts
    9
    Answers
    1

    Default

    Well, I left go my idea of putting a grid into the NavigationView at start time....
    In the Fiddle it can see an empty grid when data its there, hardcoded into the store.
    Editing app.view.Main, and changing the last item, xtype: 'listarpartidos' by xtype: 'cargarpartido' and re-run the Fiddle again, will make a form into the grid place, and when pressing the only button there, it will show/open/navigate to the same grid, this time with data...
    https://fiddle.sencha.com/#fiddle/2u7p&view/editor

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •