1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    10
    Vote Rating
    1
    invisibled is on a distinguished road

      0  

    Default Unanswered: Grid results loading on top of each other

    Unanswered: Grid results loading on top of each other


    Hey All,


    I'm trying to implement a grid (https://github.com/mitchellsimoens/Ext.ux.touch.grid) that loads data from a rest server I have setup. When first building the app, I used inline data in json format to load some test data into my grid. Now I have the rest server up an running and the results are loading in... but they are all loading over top of each other in the first row. One thing I noticed, was that the app.css has the list items with position:absolute; top:0; left:0; and when I commented that out it shows the results properly... but I assume there is a good reason for that.. so I don't want to rely on that. Here is my code, please let me know if you need anything else from me and i'll check often to answer any questions. Thanks!

    app.js ... just the launch function
    Code:
    launch: function() {
        
            //
            Ext.Ajax.useDefaultXhrHeader = false;
        
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('qaApp.view.Main'));
    
    
        },
    the main view, the overview view contains the grid
    Code:
    Ext.define('qaApp.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        
        config: {
            tabBarPosition: 'bottom',
            defaults: {
                scrollable: true,
                styleHtmlContent: true
            },
            items: [
                {
                    xtype: 'overview',
                    iconCls: 'home'
                },
                {
                    xtype: 'orderdetails',
                    iconCls: 'bookmarks'
                },
                {
                    xtype: 'checklist',
                    iconCls: 'compose'
                }
            ]
        }
    });
    the overview, contains the grid view
    Code:
    Ext.define('qaApp.view.Overview', {
        extend: 'Ext.Panel',
        xtype: 'overview',
    
    
        config:{
            title: 'Overview',
            layout: 'fit',
            
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    items: [
                        {
                            xtype: 'panel',
                            html: 'Orders',
                            style: 'color:#ffffff;',
                            flex: 3
                        },
                        {
                            xtype: 'button',
                            ui: 'action',
                            iconCls: 'settings',
                            iconMask: true,
                            flex: 1,
                            action: 'showPopupSw'
                        },
                        {
                            xtype: 'button',
                            text: 'Load Selected',
                            ui: 'action',
                            iconCls: 'organize',
                            iconMask: true,
                            flex: 2,
                            disabled: true,
                            id: 'loadSelectedOrders',
                            handler: function(button){
                                button.up('tabpanel').setActiveItem(1);
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'Scan QR Code',
                            ui: 'action',
                            iconCls: 'search',
                            iconMask: true,
                            flex: 2
                        },
                    ]
                },
                {
                    xtype: 'grid-orders',
                    title: 'Orders'
                } //item
            ] //items
        } //config    
    }); //define
    the grid view
    Code:
    Ext.define('qaApp.view.OrdersGrid', {
        extend : 'Ext.ux.touch.grid.List',
        xtype  : 'grid-orders',
        
        requires : [
            'Ext.ux.touch.grid.feature.CheckboxSelection',
            'Ext.ux.touch.grid.feature.Sorter',
            'Ext.ux.touch.grid.feature.Feature'
        ],
    
    
        config : {
            title     : 'Orders',
            store     : true,
            id          : 'ordersGrid',
            columns  : [
                {
                    header      : 'ID',
                    dataIndex : 'id',
                    width      : '15%'
                },
                {
                    header      : 'Order Date',
                    dataIndex : 'order_date',
                    width      : '15%'
                },
                {
                    header    : 'Product ID',
                    dataIndex : 'product_id',
                    width     : '15%'
                },
                {
                    header    : 'Quantity',
                    dataIndex : 'quantity',
                    width     : '15%'
                },
                {
                    header    : 'Is Rush',
                    dataIndex : 'is_rush',
                    width     : '15%'
                },
                {
                    header      : 'Version',
                    dataIndex : 'version',
                    width      : '15%'
                }
            ],
            features : [
                {
                    ftype    : 'Ext.ux.touch.grid.feature.Sorter',
                    launchFn : 'initialize'
                },
                {
                    ftype    : 'Ext.ux.touch.grid.feature.CheckboxSelection',
                    launchFn : 'constructor'
                }
            ],
            listeners: {
                selectionchange: function() {
                    var selectedCount = Ext.getCmp('ordersGrid').getSelectionCount();
                    var btn    = Ext.getCmp('loadSelectedOrders');
                    
                    if(selectedCount == 0){
                        btn.disable();
                    } else {
                        btn.enable();
                    }
                }
            }
        },
    
    
        applyStore : function() {
            return new qaApp.store.OrdersGrid();
        }
    });
    the grid store
    Code:
    Ext.define('qaApp.store.OrdersGrid', {
        extend : 'Ext.data.Store',
        
        config : {
            model : 'qaApp.model.OrdersGrid',
            autoLoad: true    
        }
    });
    the grid model
    Code:
    Ext.define('qaApp.model.OrdersGrid', {
        extend : 'Ext.data.Model',
    
    
        config : {
            fields : [
                'id',
                'order_date',
                'product_id',
                'quantity',
                'is_rush',
                'version'
            ],
            proxy: {
                type: 'rest',
                url: 'http://localhost:8080/tirani/workorders',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        }
    });

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Posts
    10
    Vote Rating
    1
    invisibled is on a distinguished road

      0  

    Default


    Any suggestions would be greatly appreciated!

Tags for this Thread