Question

i’m working on an attendance program and i have this requirement to be able to delete the user, so i decided to use the ext js grid for that.

Im my application i have mostly used jquery, and i am using the fading methods to navigate to different links. i.e. my application runs on single url.
Now when i do that on ext js grid, the scroll bar does not show.
But normally, without the fading navigation the scroll bar is shown
Here is the code for the grid:

editableGrid = new Ext.grid.GridPanel({
            frame: true,
            id: "employeesGrid",
            renderTo: "emps",
            cm: colModel,
            sm: sm,
            store: store,
            height: 270,
            // inline toolbars
            tbar: [{
                text: 'Delete',
                tooltip: 'Click here to delete schedule billing entries',
                iconCls: 'remove',
                id: 'btnRemoveRow',
                handler: DeleteSelectedRows
            }]

        });

and yeah one more thing, im loading the store as soon as the application starts. The grid is there but the div is hidden, when i use the following code:

 $("#empDetails").fadeOut("slow", function () {
    $("#reportsLink").fadeOut();
    $("#timeInAndOutLink").fadeOut();
    $("#employeeInfoLink").fadeOut();
    $("#employeesLink").fadeOut();

    $("#allEmpsDetails").fadeIn();
});

the scroll bar is not shown

Answer 1

I was facing a similar problem.
By reading your question I’ve figured out how to solve my problem. It might work with your code.

My code shows a grid inside a popup (div). The content of the popup is loaded by jQuery.
I was loading the content to the hidden div and then showing the popup.

To solve the problem, I’ve inverted the order: Show the popup and then load its contents (the grid).