Ext.dataview.NestedList automatically NOT adjust its height

Question

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?

Answer 1

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]);
        }
    }
});