Scroll bars missing from Grid Panel

[bradlymathews]

I am porting over to v4. Fun! (not.)

My scrollbars are disappearing from my grid panel after reloading it.

Here is the code the creates the grid:

        var sitesData = { "records": [{
            id: "12893", 
            lat: "47.3004", 
            lng: "-122.225",
            type: "2~8",
            listTypes: "LUST~UST",
            siteName: "CENEX HARVEST STATES COOPERATIVES",
            riskLevel: "2",
            street: "238 8TH SE",
            city: "AUBURN",
            state: "WA",
            ZIP: "98002",
            siteids: "WALUSTIS-2487~WAUSTLIS-2487"
        }],
        success: true,
        totalCount: 1
        };


        Ext.define('Record', {
            extend: 'Ext.data.Model',
            fields: [
                    {name: "id", type: 'string'}, 
                    {name: "lat", type: 'float'}, 
                    {name: "lng", type: 'float'}, 
                    {name: "type", type: 'string'}, 
                    {name: "listTypes", type: 'string'}, 
                    {name: "siteName", type: 'string'}, 
                    {name: "riskLevel", type: 'string'}, 
                    {name: "street", type: 'string'}, 
                    {name: "city", type: 'string'}, 
                    {name: "state", type: 'string'}, 
                    {name: "ZIP", type: 'string'}, 
                    {name: "siteids", type: 'string'}
            ]
        });
        
        var gridStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            model: 'Record',
            data: sitesData,
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'records',
                    totalProperty: 'totalCount'
                }
            }
        });
        
        this.activeDetailsGrid = {
            xtype: 'grid',
            store: gridStore,
            selType: 'rowmodel',
            autoScroll: true,
            id: 'grid-panel',
            columns: [
                  { id: 'subjectHit', header: "S", width: 25, sortable: true, renderer: Layout.subjectHit, dataIndex: 'subjectHit' },
                  { id: 'id', header: "Site ID", width: 50, sortable: true, dataIndex: 'id' },
                  { text: "Site Name", width: 150, sortable: true, dataIndex: 'siteName' },
                  { text: "Street", width: 150, sortable: true, dataIndex: 'street' },
                  { text: "City", width: 75, sortable: true, dataIndex: 'city' },
                  { text: "ST", width: 30, sortable: true, dataIndex: 'state' },
                  { text: "ZIP", width: 50, sortable: true, dataIndex: 'ZIP' },
                  { text: "Risk", width: 50, sortable: true, dataIndex: 'riskLevel', renderer: Layout.checkRiskLevel},
                  { text: "Site Types", width: 125, sortable: true, dataIndex: 'listTypes' },
            ]
        };

I am using the sitesData var is used to provide some data to create the grid. This is a holdover from v3.x - may not be needed in v4?

I have a horizontal scrollbar as expected.

Then I create my real data in a new sitesData variable and call this:

Layout.activeDetailsGrid.store.loadRawData(sitesData);

My data in loaded into the grid as expected, but the scrollbars disappear. I should have both scrollbars.

Any clues why this is happening? I am using 4.0.7.

Thanks!
Brad

[crysfel]

Scrolls are really buggy in Ext4

Try to add this fix to your code https://gist.github.com/1373631 probably works for you too.

Some times the scroll stop working the above code fix that, maybe works for you too

Cheers

[vadimv]

Scrolls are really buggy in Ext4

Cheers

Very probably, I have a grid panel in a card layout, and if I set the viewConfig with autoScroll true, then I get 2 scrollbars, one of the "gridview" and one of the "x-panel". Wanted and still want only for "gridview" but haven't found yet how to disable panel's one. So I had to set autoscroll to false in viewConfig in order to have only one scroll bar, which is for panel. And more than this, using rowexpander sometimes the scroller is buggy too. I'm not 100% sure, that these are bugs, but just complaining on what I get.

[vadimv]

there's way how to disable the "gridscroller" ?

[vadimv]

ouch, found it, "scroll" property.

there's way how to disable the "gridscroller" ?

[bradlymathews]

@crysfel and @phoenix06

That did not work for me. When my grid is first initialized with the test data, I now get two horizontal scrollbars, but when I reload with new data, all scrollbars disappear.

I am going to see if I can hack the grid by injecting the right overflow tags into the grid's CSS. Also, maybe if I wrap the grid in another panel and make that scrollable. Wish me luck. I will report back.

Edit: I was just looking at the DOM and the CSS and it shows my grid-panel to be 2042px tall which explains the lack of vertical scrollbar. The width is showing at 291px which appears correct. overflow is set to hidden.

- Brad

[phoenix06]

I have the same problem in two project. I'll test your fix and come back with results.

http://www.sencha.com/forum/showthre...032#post681032

Thanks

[phoenix06]

This problem seems to have disappear, thanks a lot!

I'll come back there in case of it reappear again.

It's kind of a shame that I begin to have many workaround about the Ext4 release, I hope the 4.1 release will be better.

[crysfel]

It's kind of a shame that I begin to have many workaround about the Ext4 release, I hope the 4.1 release will be better.

Yeah it's a shame, I've spent a lot of time fixing bugs for grids, editors, combos, etc... I have a lot of fixes and workarounds in my project the bright side is that I'm learning a lot XD

[paipai]

Thanks for sharing. There should be a release 4.0.8 including this fix (and all ohters) for users stuck in this version. Even after several days fixing my app I can't have something to work with 4.1b1
Many application will be never updated in 4.1, there is too lot of work.