ExtJS Ext.Msg causes the grid headers disappear on IE6 and IE7 when using the RTL support for ExtJS 3.0

Question

ok here is my code: I a using RTL support for ExtJS 3.0 from RTL support for ExtJS 3.0

var store = new Ext.data.JsonStore({
    root: 'results',
    baseParams: {
        actionName: 'SearchDynamicArchive',
        xmlFileName: 'Demo.xml'
    },
    totalProperty: 'totalCount',
    idProperty: 'id',
    remoteSort: false,
    fields: ['fileName', 'cbDocType', 'cbDocSubject', 'txtDocDate', 'txtDocName', 'cbInitiativeDepartment', 'cbDepartmentInitiates', 'cbBuyerDepartment', 'cbEconomist', 'txtDemandNumber', 'txtCallNumber', 'txtSupplier', 'uploadDate', 'userName'],
    url: 'DynamicActionsHandler.ashx',
    autoLoad: {
        params: {
            limit: 30,
            start: 0,
            actionName: 'SearchDynamicArchive',
            siteID: 'e60b36f9-2e62-4425-b015-5de58325aaa8',
            panelId: 'bzqSearchPanel',
            xmlFileName: 'Demo.xml'
        }
    }
});

var grid = new Ext.grid.GridPanel({
    title: '',
    store: store,
    trackMouseOver: true,
    disableSelection: true,
    loadMask: false,
    columns: [{
        id: 'srf2',
        header: '<b>שם צרופה</b>',
        dataIndex: 'fileName',
        width: 'auto',
        sortable: true
    }, {
        id: 'cbDocType',
        header: '<b>סוג מסמך</b>',
        dataIndex: 'cbDocType',
        width: 'auto',
        sortable: true
    }, {
        id: 'cbDocSubject',
        header: '<b>נושא מסמך</b>',
        dataIndex: 'cbDocSubject',
        width: 'auto',
        sortable: true
    }, {
        id: 'txtFromDocDate',
        header: '<b>תאריך מסמך</b>',
        dataIndex: 'txtDocDate',
        width: 'auto',
        sortable: true
    }, {
        id: 'txtDocName',
        header: '<b>שם מסמך</b>',
        dataIndex: 'txtDocName',
        width: 'auto',
        sortable: true
    }, {
        id: 'cbInitiativeDepartment',
        header: '<b>חטיבה יוזמת</b>',
        dataIndex: 'cbInitiativeDepartment',
        width: 'auto',
        sortable: true
    }, {
        id: 'cbDepartmentInitiates',
        header: '<b>אגף יוזם</b>',
        dataIndex: 'cbDepartmentInitiates',
        width: 'auto',
        sortable: true
    }, {
        id: 'cbBuyerDepartment',
        header: '<b>ממ&quot;ח רכש</b>',
        dataIndex: 'cbBuyerDepartment',
        width: 'auto',
        sortable: true
    }, {
        id: 'cbEconomist',
        header: '<b>כלכלן</b>',
        dataIndex: 'cbEconomist',
        width: 'auto',
        sortable: true
    }, {
        id: 'txtDemandNumber',
        header: '<b>מספר דרישה</b>',
        dataIndex: 'txtDemandNumber',
        width: 'auto',
        sortable: true
    }, {
        id: 'txtCallNumber',
        header: '<b>מספר התקשרות</b>',
        dataIndex: 'txtCallNumber',
        width: 'auto',
        sortable: true
    }, {
        id: 'txtSupplier',
        header: '<b>ספק</b>',
        dataIndex: 'txtSupplier',
        width: 'auto',
        sortable: true
    }, {
        id: 'txtFromDocUploadDate',
        header: '<b>תאריך העלאה</b>',
        dataIndex: 'uploadDate',
        width: 'auto',
        sortable: true
    }, {
        id: 'userName',
        header: '<b>שם משתמש</b>',
        dataIndex: 'userName',
        width: 'auto',
        sortable: true
    }],
    stripeRows: true,
    viewConfig: {
        forceFit: true,
        enableRowBody: true,
        showPreview: true
    },
    sm: new Ext.grid.RowSelectionModel({
        singleSelect: true
    })

    ,
    bbar: [new Ext.PagingToolbar({
        id: 'paging-bar',
        pageSize: 30,
        store: store,
        displayInfo: true,
        displayMsg: localize.displayPages,
        emptyMsg: localize.noDocsToDisplay,
        listeners: {
            beforechange: onBeforePageChange
        }
    })],
    listeners: {
        rowcontextmenu: onRowcontextmenu,
        rowdblclick: function (g, ri, e) {
            downloadFile(store.getAt(ri).id);
        },
        render: function (grid) {
            grid.getEl().on("contextmenu", Ext.emptyFn, null, {
                preventDefault: true
            });
        }
    },
    contextMenu: new Ext.menu.Menu({
        items: [{
            pressed: false,
            enableToggle: false,
            text: localize.updateRecord,
            id: 'update_attachment'
        }, {
            pressed: false,
            enableToggle: false,
            text: localize.deleteRecord,
            id: 'delete_attachment'
        }, {
            pressed: false,
            enableToggle: false,
            text: localize.downloadRecord,
            id: 'download_attachment'
        }],
        listeners: {
            itemclick: onItemclick
        }
    }),
    autoExpandColumn: 'userName',
    id: 'searchResultPanel',
    enableColumnResize: true
});

Ext.onReady(function () {
    var dynamic_grid = new Ext.Container({
        layout: 'fit',
        items: grid,
        renderTo: 'dynamic_grid'
    })
    onPageResize();
    window.onresize = onPageResize;
});

now when I pop up an Ext.Msg alert it comes with a masking layer that makes the grid header disappear. Where should I look for a remedy here?? Any help will be appropriated...

Answer 1

Are you sure that you want to use Ext.MessageBox? If you refer to the API, this component differs from the regular javascript alert() in that it does not halt execution of code because it is asynchronous.

If you are intending to stop all execution of code until the user presses "OK" on the alert box, you should just stick to plain-old alert();