add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / test / specs / grid / header / Container.js

describe('Ext.grid.header.Container', function () {\r
    var createGrid = function (storeCfg, gridCfg) {\r
        store = Ext.create('Ext.data.Store', Ext.apply({\r
            storeId:'simpsonsStore',\r
            fields:['name', 'email', 'phone'],\r
            data:{'items':[\r
                { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },\r
                { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234"  },\r
                { 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244"  },\r
                { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }\r
            ]},\r
            proxy: {\r
                type: 'memory',\r
                reader: {\r
                    type: 'json',\r
                    rootProperty: 'items'\r
                }\r
            }\r
        }, storeCfg));\r
\r
        grid = Ext.create('Ext.grid.Panel', Ext.apply({\r
            title: 'Simpsons',\r
            store: store,\r
            columns: [\r
                { header: 'Name',  dataIndex: 'name', width: 100 },\r
                { header: 'Email', dataIndex: 'email', flex: 1 },\r
                { header: 'Phone', dataIndex: 'phone', flex: 1, hidden: true }\r
            ],\r
            height: 200,\r
            width: 400,\r
            renderTo: Ext.getBody()\r
        }, gridCfg));\r
    },\r
    store, grid;\r
\r
    afterEach(function(){\r
        store.destroy();\r
        grid = store = Ext.destroy(grid);\r
        Ext.state.Manager.clear('foo');\r
    });\r
\r
    describe('column menu showing', function() {\r
        it('should show the menu on trigger click', function() {\r
            var col,\r
                menu;\r
\r
            runs(function() {\r
                createGrid({}, {\r
                    renderTo: Ext.getBody()\r
                });\r
\r
                col = grid.columns[0];\r
                col.triggerEl.show();\r
                jasmine.fireMouseEvent(col.triggerEl.dom, 'click');\r
\r
                menu = col.activeMenu;\r
                expect(menu.isVisible()).toBe(true);\r
                expect(menu.containsFocus).toBeFalsy();\r
\r
                jasmine.fireMouseEvent(col.triggerEl.dom, 'mousedown');\r
                expect(menu.isVisible()).toBe(false);\r
\r
                // Opening the menu with down arrow focuses it\r
                col.el.focus();\r
                jasmine.fireKeyEvent(col.el.dom, 'keydown', Ext.event.Event.DOWN);\r
            });\r
            waitsFor(function() {\r
                return menu.isVisible() && menu.containsFocus;\r
            });\r
        });\r
    });\r
\r
    describe('columnManager delegations', function () {\r
        it('should allow columns to call methods on the ColumnManager', function () {\r
            var col;\r
\r
            createGrid({}, {\r
                renderTo: Ext.getBody()\r
            });\r
\r
            col = grid.columns[0];\r
\r
            expect(col.getHeaderIndex(col)).toBe(0);\r
            expect(col.getHeaderAtIndex(0)).toBe(col);\r
            expect(col.getVisibleHeaderClosestToIndex(0)).toBe(col);\r
        });\r
    });\r
\r
    describe('gridVisibleColumns', function () {\r
        it('should keep track of state information for visible grid columns', function () {\r
            var columns = [\r
                // It's necessary to pass in columns with a headerId property for this test.\r
                { header: 'Name',  headerId: 'a', dataIndex: 'name', width: 100 },\r
                { header: 'Email', headerId: 'b', dataIndex: 'email', flex: 1 },\r
                { header: 'Phone', headerId: 'c', dataIndex: 'phone', flex: 1, hidden: true }\r
            ];\r
\r
            new Ext.state.Provider();\r
\r
            createGrid({}, {\r
                columns: columns,\r
                stateful: true,\r
                stateId: 'foo'\r
            });\r
\r
            // Update state information.\r
            grid.columns[2].show();\r
\r
            grid.saveState();\r
\r
            Ext.destroy(grid);\r
\r
            createGrid({}, {\r
                columns: columns,\r
                stateful: true,\r
                stateId: 'foo'\r
            });\r
\r
            expect(grid.headerCt.gridVisibleColumns.length).toBe(3);\r
        });\r
\r
        it('should keep track of state information for visible grid columns when moved', function () {\r
            // This spec simulates a stateful bug: EXTJSIV-10262. This bug occurs when a previously hidden\r
            // header is shown and then moved. The bug occurs because the gridVisibleColumns cache is created\r
            // from stale information. This happens when the visible grid columns are retrieved before applying\r
            // the updated state info.\r
            var columns = [\r
                // It's necessary to pass in columns with a headerId property for this test.\r
                { header: 'Name',  headerId: 'a', dataIndex: 'name', width: 100 },\r
                { header: 'Email', headerId: 'b', dataIndex: 'email', flex: 1 },\r
                { header: 'Phone', headerId: 'c', dataIndex: 'phone', flex: 1, hidden: true }\r
            ];\r
\r
            new Ext.state.Provider();\r
\r
            createGrid({}, {\r
                columns: columns,\r
                stateful: true,\r
                stateId: 'foo'\r
            });\r
\r
            // Update state information.\r
            grid.columns[2].show();\r
            grid.headerCt.move(2, 0);\r
\r
            grid.saveState();\r
\r
            Ext.destroy(grid);\r
\r
            createGrid({}, {\r
                columns: columns,\r
                stateful: true,\r
                stateId: 'foo'\r
            });\r
\r
            expect(grid.headerCt.gridVisibleColumns.length).toBe(3);\r
            expect(grid.headerCt.gridVisibleColumns[0].dataIndex).toBe('phone');\r
        });\r
\r
        it('should insert new columns into their correct new ordinal position after state restoration', function () {\r
            // Test ticket EXTJS-15690.\r
            var initialColumns = [\r
                    // It's necessary to pass in columns with a headerId property for this test.\r
                    { header: 'Email', headerId: 'b', dataIndex: 'email', flex: 1 },\r
                    { header: 'Phone', headerId: 'c', dataIndex: 'phone', flex: 1 }\r
                ],\r
                newColumns = [\r
                    // It's necessary to pass in columns with a headerId property for this test.\r
                    { header: 'Name',  headerId: 'a', dataIndex: 'name', width: 100 },\r
                    { header: 'Email', headerId: 'b', dataIndex: 'email', flex: 1 },\r
                    { header: 'Phone', headerId: 'c', dataIndex: 'phone', flex: 1 }\r
                ];\r
\r
            new Ext.state.Provider();\r
\r
            createGrid({}, {\r
                columns: initialColumns,\r
                stateful: true,\r
                stateId: 'foo'\r
            });\r
\r
            // Update state information.\r
            // Should now be Phone,Email\r
            grid.headerCt.move(1, 0);\r
\r
            grid.saveState();\r
\r
            Ext.destroy(grid);\r
\r
            // Create the grids with a new column in at index 0\r
            // The stateful columns should be in their stateful *order*\r
            // But the insertion point of the new column must be honoured.\r
            createGrid({}, {\r
                columns: newColumns,\r
                stateful: true,\r
                stateId: 'foo'\r
            });\r
\r
            // The order of the two initial stateful columns should be restored.\r
            // And the new, previously unknown column "name" which was configured\r
            // At index 0 should have been inserted at index 0\r
            expect(grid.headerCt.gridVisibleColumns[0].dataIndex).toBe('name');\r
            expect(grid.headerCt.gridVisibleColumns[1].dataIndex).toBe('phone');\r
            expect(grid.headerCt.gridVisibleColumns[2].dataIndex).toBe('email');\r
        });\r
    });\r
\r
    describe('non-column descendants of headerCt', function () {\r
        describe('headerCt events', function () {\r
            var headerCt, field;\r
\r
            beforeEach(function () {\r
                createGrid(null, {\r
                    columns: [\r
                        { header: 'Name',  dataIndex: 'name', width: 100 },\r
                        { header: 'Email', dataIndex: 'email', flex: 1,\r
                            items: [{\r
                                xtype: 'textfield'\r
                            }]\r
                        }\r
                    ]\r
                });\r
\r
                headerCt = grid.headerCt;\r
                field = headerCt.down('textfield');\r
            });\r
\r
            afterEach(function () {\r
                headerCt = field = null;\r
            });\r
\r
            it('should not throw in reaction to a delegated keydown event', function () {\r
                // Note that unfortunately we're testing a private method since that's where it throws.\r
                jasmine.fireKeyEvent(field.inputEl, 'keydown', 13);\r
\r
                expect(function () {\r
                    var e = {\r
                        getTarget: function () {\r
                            return field.inputEl.dom;\r
                        }\r
                    };\r
\r
                    headerCt.onHeaderActivate(e);\r
                }).not.toThrow();\r
            });\r
\r
            it('should not react to keydown events delegated from the headerCt', function () {\r
                // For this test, we'll know that the event was short-circuited b/c the sortable column\r
                // wasn't sorted.\r
                var wasCalled = false,\r
                    fn = function () {\r
                        wasCalled = true;\r
                    };\r
\r
                headerCt.on('sortchange', fn);\r
                jasmine.fireKeyEvent(field.inputEl, 'keydown', 13);\r
\r
                expect(wasCalled).toBe(false);\r
            });\r
        });\r
    });\r
    \r
    describe("keyboard events", function() {\r
        beforeEach(function() {\r
            createGrid();\r
        });\r
        \r
        it("should focus first column header on Home key", function() {\r
            jasmine.syncPressKey(grid.headerCt.el, 'home');\r
            jasmine.expectFocused(grid.headerCt.gridVisibleColumns[0]);\r
        });\r
        \r
        it("should focus last column header on End key", function() {\r
            jasmine.syncPressKey(grid.headerCt.el, 'end');\r
            jasmine.expectFocused(grid.headerCt.gridVisibleColumns[1]);\r
        });\r
    });\r
\r
    describe('Disabling column hiding', function() {\r
        beforeEach(function() {\r
            createGrid();\r
        });\r
        \r
        it('should disable hiding the last visible column', function() {\r
            var menu,\r
                col = grid.columns[0],\r
                colItem,\r
                colMenu,\r
                nameItem,\r
                emailItem;\r
\r
            // Open the header menu and mouseover the "Columns" item.\r
            col.triggerEl.show();\r
            jasmine.fireMouseEvent(col.triggerEl.dom, 'click');\r
            menu = col.activeMenu;\r
            colItem = menu.child('#columnItem');\r
            jasmine.fireMouseEvent(colItem.el.dom, 'mouseover');\r
\r
            // Wait for the column show/hide menu to appear\r
            waitsFor(function() {\r
                colMenu = colItem.menu;\r
                return colMenu && colMenu.isVisible();\r
            });\r
            \r
            // Hide the "Name" column, leaving only the "Email" column visible\r
            runs(function() {\r
                nameItem = colMenu.child('[text=Name]');\r
                emailItem = colMenu.child('[text=Email]');\r
                jasmine.fireMouseEvent(nameItem.el.dom, 'click');\r
            });\r
\r
            // The "Email" column is the last visible column, so its\r
            // hide menu check item must be disabled.\r
            waitsFor(function() {\r
                return emailItem.disabled;\r
            });\r
        });\r
    });\r
});\r