1. #181
    Sencha User
    Join Date
    Aug 2011
    Posts
    68
    Vote Rating
    2
    MaciejZabielski is on a distinguished road

      0  

    Default


    Hi!

    I have been working with your grid in ST1 and it worked really good. Now I'm trying to migrate to ST2. I have updated to new grid component, my grid was dynamically generated, so:
    1) Based on received XML I create a data model.
    2) Link the model to Store (XML/AJAX)
    3) Link the store to grid, inside grid use a function to create column model (.setColumns(this.getColModel())

    When I look under debugger, I can see that myGrid.getColModel() returns two columns as expected. They have proper dataIndex mapping and header. When I get Store from grid,, it also has expected number of records with the same fields configured in dataIndex.

    The problem is that only headers are displayed, and grid itself is not.
    1) I don't think this is layout problem, grid has height (one can see a scroll bar)
    2) Grid is not rendered in HTML (no x-grid-cell elements etc) - only headers

    what else can I check? I'm loosing my mind here after half a day of going through the code. What am I doing wrong...?

    Screen shot from debugger:
    Ext.ux.touch.grid.png

  2. #182
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I just added an example to load the columns from the response you may want to look at and always update your grid source files.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #183
    Sencha User
    Join Date
    Aug 2011
    Posts
    68
    Vote Rating
    2
    MaciejZabielski is on a distinguished road

      0  

    Default


    Ok, anyway, I can't see any problems and my col model is returned from a function.
    I have checked what is going on inside _buildTpl and the only strange thing is the first "undefined" run (EDIT: it is made before "setColumns"), followed by two that looks ok (after applying setColumns)

    Code:
    "<div class="x-grid-cell" dataindex="undefined">{[this.undefined_renderer(values.undefined, values)]}</div>"
    "<div class="x-grid-cell x-grid-cell-hd" dataindex="undefined">&nbsp;</div>"
    
    
    "<div class="x-grid-cell" dataindex="DOCUMENT_ID" style="width: 50%;">{[this.DOCUMENT_ID_renderer(values.DOCUMENT_ID, values)]}</div>"
    "<div class="x-grid-cell" dataindex="DOCUMENT_TYPE_ID" style="width: 50%;">{[this.DOCUMENT_TYPE_ID_renderer(values.DOCUMENT_TYPE_ID, values)]}</div>"
    
    
    "<div class="x-grid-cell x-grid-cell-hd" dataindex="DOCUMENT_ID" style="width: 50%;">ID</div>"
    "<div class="x-grid-cell x-grid-cell-hd" dataindex="DOCUMENT_TYPE_ID" style="width: 50%;">Type</div>"
    So it looks good, but why nothing is rendered?
    The nasty thing about it, is that I'm not sure if this is a problem with the grid, or some otehr ST1/ST2 compatibility problems.


    EDIT / ANSWER: Now I finally have found very basic problem.... I have missed the callParent call...
    Code:
    	initialize: function(){
    		this.setColumns(this.getColumns());
    		this.callParent();
    	},

  4. #184
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default data not showing in grid

    data not showing in grid


    touchgrid.pngI've spent many hours on the forum trying to find answer to my problem.
    I can not show data on the grid, just shows headers in proper format.

    I've used the MVC example given by mitchellsimoens.
    When the grid is rendered initially, it does not fire load.
    It fires only when I click on Header column, then gets requested JSON
    from server.
    however, if I use inline store with some sample data then it works.

    here are the codes.

    Code:
    Ext.define('macc.model.Customer', {
        extend : 'Ext.data.Model',
    
        config : {
            fields : [
                {name: 'id', type: 'int'},
                {name: 'custname', type: 'string'},
                {name: 'phone', type: 'string'}
            ]
            
            ,proxy: {
                type: 'ajax',
                url: 'customer/list'
                ,reader:{
                    type: 'json',
                    rootProperty: 'data',
                    successProperty : 'success',
                    totalProperty   : 'totalCount'
                }
            }
        }
    });
    
    Ext.define('macc.store.Customer', {
        extend : 'Ext.data.Store',
        
        requires : [
            'macc.model.Customer'
        ],
    
        config : {
            model : 'macc.model.Customer'
            ,storeId: 'customerStore'
            ,pageSize: 3
            ,autoLoad: false
            ,remoteSort: true
            ,remoteFilter: true
            
            ,sorters: [{
                property: 'phone',
                direction: 'ASC'
            }]
          
        }
    });
    
    Ext.define('macc.view.CustomerGrid', {
        extend : 'Ext.ux.touch.grid.View',
        xtype  : 'CustomerGrid',
    
        requires : [
            'Ext.ux.touch.grid.feature.Feature',
            'Ext.ux.touch.grid.feature.Paging',
            //'Ext.ux.touch.grid.feature.Editable',
            'Ext.ux.touch.grid.feature.Sorter',
            //'Ext.field.Number',
            'macc.store.Customer' 
        ],
    
        layout: 'fit',
        config : {
            store    : true, 
            columns  : [
                {   dataIndex: 'id', hidden: true},
                {
                    header    : 'Customer',
                    dataIndex : 'custname',
                    width     : '50%'
                },
                {
                    header    : 'Phone',
                    dataIndex : 'phone',
                    width     : '50%'
                }
            ],
            features : [
                {
                    ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                    launchFn : 'initialize'
                },
                {
                    ftype    : 'Ext.ux.touch.grid.feature.Paging',
                    launchFn : 'initialize'
                }
            ]
        }
    
        ,applyStore : function() {
            return new macc.store.Customer();
        }
    });
    
    Ext.define('macc.view.Customerlist',{
        extend: 'Ext.Panel',
        xtype: 'customerlist',
        requires: [
            'macc.view.CustomerGrid'
        ],
        
        config: {
            iconCls: 'user',
            title: 'Customers',
            layout: 'vbox',
            items:[
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Customer List',
                    items:[
                        {
                            xtype: 'textfield'
                            ,label: 'Search'
                            ,action: 'search'
                        },
                        {
                            xtype: 'button'
                            ,text: 'New Customer'
                            ,align: 'right'
                            ,action: 'pay'
                        }
                    ]
                },
                {
                    xtype: 'CustomerGrid'
                    ,id: 'customergrid'
                    ,height: 500
                }
            ]
        }
    });
    I am getting the requested json from server correctly.
    Checking through debugger, the store has data.
    Everything looks good, the sorting is working, firing needed request to server.
    If I set autoLoad: true in store, I get Loading... message and does not go forward.
    Can someone please help?

  5. #185
    Sencha User
    Join Date
    May 2012
    Posts
    23
    Vote Rating
    0
    Abhi_aec is on a distinguished road

      0  

    Default How to send the data of selected rows, back to server in a grid.

    How to send the data of selected rows, back to server in a grid.


    Hi,

    I m using Ext.ux.touvh.grid in ST2 and my requirement is to provide select option with each row in a grid, and whatever row will select, the data of selected rows need to send back to server while click on submit button which will be placed at the end of the Grid.

    Kindly help to resolve it...

  6. #186
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default data not showing in grid

    data not showing in grid


    Can someone please help on post #184?
    My problem is very similar to post #181. I've done what MaciejZabielski did.
    I've spent 2 days going through debugger, api docs, and forum but couldn't get it to work. I've learned a lot along the way on ST2.
    I'm desperate on this issue.

  7. #187
    Sencha User
    Join Date
    Jan 2008
    Posts
    72
    Vote Rating
    0
    csextjs is on a distinguished road

      0  

    Default Solved. data not showing in grid post#184

    Solved. data not showing in grid post#184


    Michell's MVC example he had this:

    Code:
        applyStore : function() {
            return new Grid.store.Grid();
        }
    I replaced with:
    Code:
    initialize: function(){
        this.setStore(new Grid.store.Grid())
        this.setColumns(this.getColumns());
        this.callParent();
        this.getStore().load();
    }
    and it worked.

    Michell, perhaps this is an error on you part?
    Is this the proper way to do it?

  8. #188
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Default


    On #184

    You have your store set to autoload:false. and then never load it. So you can either do what you showed in 187 or you can load the store in the apply method.

    Pretty sure this will work.


    applyStore : function() { var store = new Grid.store.Grid(); store.load(); return store; }

  9. #189
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    instead of store.load, new Grid.store.Grid({autoLoad : true});
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #190
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    126
    Vote Rating
    4
    badgerb1 is on a distinguished road

      0  

    Default


    Oh good one, I like it.

    Thanks
    Bob