1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    13
    Vote Rating
    0
    Windwalker is on a distinguished road

      0  

    Default Answered: Reload of Grid Panel's store changes width of gird panel

    Answered: Reload of Grid Panel's store changes width of gird panel


    Hello,

    I have set up a Grid Panel with an Ajax store, which I want to automatically reload, to display newly arrived data.
    I do this by I use a regularily called Refresh-Funtion which calls
    Code:
    setInterval('refreshGrid()',5000);
    where refreshGrid is:
    Code:
    refreshGrid = function() {
        Ext.getCmp('my-grid').getStore().reload();
    }
    After each call, the grid's width is reduced by quite a few pixels.

    Where does it come from?

    I advance, thanks for your help!

  2. With your supplied code, after changing all column widths from string to number, the column shrinking disappears.
    Code:
        grid = Ext.create('Ext.grid.Panel', {
            id: 'grid-locationdata',
            title: 'Location Data',
            // store: Ext.data.StoreManager.lookup('locationDataStore'),
            store: locationStore,
            columns: [
                { text: 'Datum', dataIndex: 'date', width: 205}, 
                { text: 'Straße', dataIndex: 'street', width: 150 },
                { text: 'PLZ', dataIndex: 'zip', width: 50 },
                { text: 'Stadt', dataIndex: 'city', width: 120 },
                { text: 'Land', dataIndex: 'country', width: 80 },
                { text: 'Länge', dataIndex: 'longitude', width: 60},
                { text: 'Breite', dataIndex: 'latitude', width: 60},
                { text: 'Präzision', dataIndex: 'accuracy', width: 50 },
                { text: 'Höhe', dataIndex: 'altitude', width: 50 },
                { text: 'Präzision (Höhe)', dataIndex: 'altitudeAccuracy', width: 50 },
                { text: 'Richtung', dataIndex: 'heading', width: 50 },
                { text: 'Geschw.', dataIndex: 'speed', width: 50 },
                { text: 'Browser', dataIndex: 'browser', width: 300 },
                { text: 'OS', dataIndex: 'os', width: 80 },
                { text: 'Error', dataIndex: 'error', width: 50 },
                { text: 'Error Msg.', dataIndex: 'errorMessage', width: 60 },
            ]
        });

  3. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Do you have fixed widths declared for all of your grid columns? Also, what layout is used by the parent container?

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    13
    Vote Rating
    0
    Windwalker is on a distinguished road

      0  

    Default


    Yes, each column has set its own width.

    Here is my coding (it's not so much...):
    Code:
        Ext.define('Location', {
            extend: 'Ext.data.Model',
            fields: [
                { name: 'date', type: 'date', dateFormat: 'timestamp'},
                // { name: 'date', type: 'string'},
                { name: 'latitude', type: 'float' },
                { name: 'longitude', type: 'float' },
                { name: 'accuracy', type: 'float' },
                { name: 'altidude', type: 'float' },
                { name: 'altitudeAccuracy', type: 'float' },
                { name: 'heading', type: 'float' },
                { name: 'speed', type: 'float' },
                { name: 'street', type: 'string' },
                { name: 'zip', type: 'string' },
                { name: 'city', type: 'string' },
                { name: 'country', type: 'string' },
                { name: 'browser', type: 'string' },
                { name: 'os', type: 'string' },
                { name: 'error', type: 'int' },
                { name: 'errorMessage', type: 'string' },
            ]
        });
    
        Ext.create('Ext.data.Store', {
            storeId: 'locationDataStore',
            model: 'Location',
            sorters: [{property: 'date', direction: 'DESC'}],
            fields: ['date', 'latitude', 'longitude', 'accuracy', 'altitude', 'altitudeAccuracy', 'heading', 'speed', 'street', 'zip', 'city', 'country', 'browser', 'os', 'error', 'errorMessage' ],
            proxy: {
                type: 'ajax',
                url: 'getLocationData.php'
            }
            // autoLoad: true
        });
        
        grid = Ext.create('Ext.grid.Panel', {
            id: 'grid-locationdata',
            title: 'Location Data',
            store: Ext.data.StoreManager.lookup('locationDataStore'),
            columns: [
                { text: 'Datum', dataIndex: 'date', width: '205px'},
                { text: 'Straße', dataIndex: 'street', width: '150px' },
                { text: 'PLZ', dataIndex: 'zip', width: '50px' },
                { text: 'Stadt', dataIndex: 'city', width: '120px' },
                { text: 'Land', dataIndex: 'country', width: '80px' },
                { text: 'Länge', dataIndex: 'longitude', width: '60px'},
                { text: 'Breite', dataIndex: 'latitude', width: '60px'},
                { text: 'Präzision', dataIndex: 'accuracy', width: '50px' },
                { text: 'Höhe', dataIndex: 'altitude', width: '50px' },
                { text: 'Präzision (Höhe)', dataIndex: 'altitudeAccuracy', width: '50px' },
                { text: 'Richtung', dataIndex: 'heading', width: '50px' },
                { text: 'Geschw.', dataIndex: 'speed', width: '50px' },
                { text: 'Browser', dataIndex: 'browser', width: '300px' },
                { text: 'OS', dataIndex: 'os', width: '80px' },
                { text: 'Error', dataIndex: 'error', width: '50px' },
                { text: 'Error Msg.', dataIndex: 'errorMessage', width: '60px' },
            ]
        });
        
        Ext.create(
            'Ext.container.Viewport',
            {
                layout: {
                    type: 'fit'
                },
                items: [
                    grid
                ]
            }
        );

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,636
    Answers
    613
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    width is a numeric:

    Code:
    width: 50
    Scott.

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    13
    Vote Rating
    0
    Windwalker is on a distinguished road

      0  

    Default


    Thanks, but that's not the solution to my problem.

    Meanwhile I figured out that this narrowing seems to be triggered by each DOM refresh.
    It happens not only upon Datastore reload, but also when resizing the browser window, opening/closing Firebug, ....

    See attached some screenshots for illustration. The first shows the initial width, then after the first reload, the second, third, fourth and then after the 15th time.
    Attached Images

  7. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,636
    Answers
    613
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please use store.load() instead of refresh.

    If this does not fix your problem, then we will need a small working example. You can use the example from the API since cannot use your data, or you can use it as a basis.

    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

    Scott

  8. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    13
    Vote Rating
    0
    Windwalker is on a distinguished road

      0  

    Default


    Dear Scott,

    attached you'll find a small HTML file called "showLocationData.html" and "grid.js" which encorporates the grid panel functionality, where I have one static record with custom data included.

    The HTML file calls the grid initialization and also starts
    Code:
    setInterval('refreshGrid()',5000);
    to refresh the grid every 5 seconds.
    You'll see the grid narrow itself with each step.

    In advance, thanks for your help!
    Sascha.
    Attached Files

  9. #8
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    109
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    With your supplied code, after changing all column widths from string to number, the column shrinking disappears.
    Code:
        grid = Ext.create('Ext.grid.Panel', {
            id: 'grid-locationdata',
            title: 'Location Data',
            // store: Ext.data.StoreManager.lookup('locationDataStore'),
            store: locationStore,
            columns: [
                { text: 'Datum', dataIndex: 'date', width: 205}, 
                { text: 'Straße', dataIndex: 'street', width: 150 },
                { text: 'PLZ', dataIndex: 'zip', width: 50 },
                { text: 'Stadt', dataIndex: 'city', width: 120 },
                { text: 'Land', dataIndex: 'country', width: 80 },
                { text: 'Länge', dataIndex: 'longitude', width: 60},
                { text: 'Breite', dataIndex: 'latitude', width: 60},
                { text: 'Präzision', dataIndex: 'accuracy', width: 50 },
                { text: 'Höhe', dataIndex: 'altitude', width: 50 },
                { text: 'Präzision (Höhe)', dataIndex: 'altitudeAccuracy', width: 50 },
                { text: 'Richtung', dataIndex: 'heading', width: 50 },
                { text: 'Geschw.', dataIndex: 'speed', width: 50 },
                { text: 'Browser', dataIndex: 'browser', width: 300 },
                { text: 'OS', dataIndex: 'os', width: 80 },
                { text: 'Error', dataIndex: 'error', width: 50 },
                { text: 'Error Msg.', dataIndex: 'errorMessage', width: 60 },
            ]
        });

  10. #9
    Sencha User
    Join Date
    Dec 2011
    Posts
    13
    Vote Rating
    0
    Windwalker is on a distinguished road

      0  

    Default


    Many thanks!

    Sorry, for that I didn't recognize the string delimiters to remove.
    I was quite irritated, since providing the widths the way 'xxx px' in fact was working - at least for the page's initial load....

    Again, many thanks for the great help!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar