extjsextjs6-modernextjs7

Ext.dataview.NestedList automatically NOT adjust its height


I use mobile Modern interface ExtJs 7

Need a list without scrolling. Can you please tell me how to make Ext.dataview.NestedList automatically adjust its height when the number of items in it changes?


Solution

  • I have a grid class (grid extends dataview) that will grow and shrink as rows are added to it. When it gets to 7 rows it stops growing and starts scrolling. This works because I can predict the height of the row if the grid.

    // this is jsut so we can resize the grid on the screen.
    // this functionality should be moved to a plugin or a mixin... i think.
    // it is a bit comlicated because I am using a viewmodel in the grid and 
    // i don't know if you can do that with a mixin or plugin.
    
    // so i just exteded the grid and created its own xtype.  this is used 
    // in both the customer and item eligiability panels... 
    
    Ext.define("Common.ui.grid.Resize", {
        extend: 'Ext.grid.Grid',
        xtype: 'grid-resize',
        loadingText: null,
        striped: true,
        viewModel: {
            formulas: {
                countChange: {
                    // checking to see if the count has changed for the store that this grid is using.
                    // if the count changes we resize the grid but only to a max of hold 7 rows then
                    // it is scrolling.
                    // bind: {
                    //  items: '{activeStore.count}'
                    //  // collections: '{collections.count}'
                    //  // bindTo: '{items.count}',
                    // },
                    bind: {
                        bindTo: '{__store.count}',
                    },
                    get: function (rows) {
                        // resizing a hidden grid will return a zero hiehght for the 
                        // header.  so if the grid is hidden we do a single show event
                        // and reize the grid after it is shown. 
                        // also if the grid has never been rendered then  the rowHeight is null
                        var grid = this.getView();
                        if (grid.isHidden()) {
                            grid.onShowEvent = grid.on("show", grid.resizeGrid, this, {
                                single: true
                            });
                        } else {
                            grid.resizeGrid(grid);
                        }
                    }
                },
            },
        },
        onShowEvent: null,
        resizeGrid: function (grid) {
            // this method is either called directly when the
            // count on the store has changed.... or
            // is called via a "show" event on the grid. 
    
            // the scope does not really matter because
            // we are passing all needed stuff... 
    
            if (grid.getStore() != null) {
    
                var rows = grid.getStore().getCount();
                // console.log('getting items count %o %o', rows, arguments);
                // console.log("GRID? %o ", grid);
                // console.log("GRID? hidden %o ", grid.getHidden());
                // console.log("GRID? hidden(is) %o ", grid.isHidden());
                // console.log("ROWS %o", rows);
                if (rows > 7) {
                    rows = 7;
                }
                var rowHeight = grid.rowHeight;
                // console.log("row height pos 1 %o", rowHeight);
                if (rowHeight == null || rowHeight == 0) rowHeight = 41;
                // console.log("row height pos 2 %o", rowHeight);
                var newHeight = (rowHeight * rows)
                // console.log("newHeight pos 1 %o", newHeight);
                newHeight = newHeight + grid.getHeaderContainer().element.getHeight();
                // console.log("newHeight pos 2 %o", newHeight);
                grid.updateHeight(newHeight);
                Ext.defer(function () {
                    this.refresh();
                }, 1000, grid);
            }
    
        },
        selectable: {
            rows: true
        },
        listeners: {
            storechange: function (grid) {
                // switching between the item and the collection grid...will be different number of items
                // so need to resize.
                grid.resizeGrid(grid);
            }
        },
        // this makes the columns menu on the header.... where you show/hide columns..... 
        // scrollable so if it extends beyond the screen you can still get to the items.
        // still need to intellegently figure out the maxHeight.
        columnsMenuItem: {
            menu: {
                scrollable: true,
                maxHeight: '500px'
            }
        },
        height: '300px',
        width: '100%',
        privates: {
            applyStore: function (store, oldStore) {
                console.log("RESIZE GRID APPLY STORE IN REIZE GGRID MIXIN");
                this.getViewModel().set("__store", store);
                return this.callParent([store, oldStore]);
            }
        }
    });