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