Ext-JS GridPanel Динамическая высота, основанная на количестве строк

Question

Я сталкиваюсь с дилеммой работы с Ext-JS GridPanel: данные, используемые для загрузки его хранилища, являются динамическими, поэтому я не знаю заранее, сколько строк нужно будет отобразить в сетке.

В связи с этим у меня возникают трудности с высотой сетки: я попытался установить для autoHeight значение true, но сетка будет отображать только первую строку, скрывая остальные; когда я явно устанавливаю его высоту, в сетке появляется пробел, если количество строк не заполняет пространство, указанное высотой.

В идеале, сетка должна расширяться / уменьшаться вертикально, чтобы показать все ее ряды. Есть ли способ сделать динамическую высоту сетки, основываясь на количестве строк, которые она будет содержать?

Я мог бы подождать, пока сетка отрендерится, подсчитать количество строк и пересчитать высоту сетки, основываясь на этом, но это выглядит странно, и я ищу что-то более чистое.

Это мой код для справки:

var store = new Ext.data.ArrayStore({fields:[{name: 'sign_up_date'}, {name: 'business_name'}, {name: 'owner_name'}, {name: 'status'}]});
// buildResultsArray is a method that returns arrays of varying lengths based on some business logic. The arrays can contain no elements or up to 15
store.loadData(buildResultsArray()); 
var resultsGrid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {id: "sign_up_date", header: "Sign Up Date", dataIndex: "sign_up_date", width: 70}, 
        {id: "business_name", header: "Business Name", dataIndex: "business_name", width: 100}, 
        {id: "owner_name",header: "Owner Name", dataIndex: "owner_name", width: 100},
        {id: "status", header: "Sign Up Status", dataIndex: "status", width: 70}
    ],
    stripeRows: true,
    columnLines: true,
    enableColumnHide: false,
    enableColumnMove: false,
    enableHdMenu: false,
    id: "results_grid",
    renderTo: "results_grid_div", 
    //height: 300,
    autoHeight: true, 
    selModel: new Ext.grid.RowSelectionModel({singleSelect: false})
});

Спасибо за помощь.

Answer 1

В ExtJS 3 он не работает "из коробки", но его легко реализовать, расширив GridView:

AutoGridView = Ext.extend(
    Ext.grid.GridView,
    {
        fixOverflow: function() {
            if (this.grid.autoHeight === true || this.autoHeight === true){
                Ext.get(this.innerHd).setStyle("float", "none");
                this.scroller.setStyle("overflow-x", this.scroller.getWidth() < this.mainBody.getWidth() ? "scroll" : "auto");
            }
        },
        layout: function () {
            AutoGridView.superclass.layout.call(this);
            this.fixOverflow();
        },
        render: function(){
            AutoGridView.superclass.render.apply(this, arguments);

            this.scroller.on('resize', this.fixOverflow, this);

            if (this.grid.autoHeight === true || this.autoHeight === true){
                this.grid.getStore().on('datachanged', function(){
                    if (this.ownerCt) { this.ownerCt.doLayout(); }
                }, this.grid, { delay: 10 });
            }
        }
    }
);

Использование:

new Ext.grid.GridPanel({
    autoHeight: true,
    view: new AutoGridView()
});