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" ?

[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.

[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

[bradlymathews]

Well, after exploring the DOM and the CSS that make up a grid control I have a better appreciation for the challenge. I see why they are using an "artificial" scroller rather than the built in CSS one.

In any case I have thrown in the towel on my hacking attempt.

I am sure there are others smarter than I that may devise a pre-4.1 workaround. Just please do it before my early January launch!

Or if anyone has any clues as to the trigger for the scrollbar scafu, I may be able to work around that. They do seem to work in the demos.

- Brad

[phoenix06]

To help youn the best way is to send a quick code that we can directly paste in our page and test it. Do it as simple as possible to just past it somewhere and we'll see the result.