滚动和展开无法正常工作

Question

Ext.Window 中有一个网格面板。 gridpanel 的滚动条在滚动时会自动向上移动，它不能正常工作，当 Ext.Window 展开时，网格面板没有展开。我想必须设置一些属性？在gridpanel中使用autoExpandColumn会解决问题吗？

extWin=new Ext.Window({
    title:"Locate Managed Object",items:[new Ext.grid.GridPanel({
        title: "Managed Elements",
        region: "center",
        height:250,
        width:500, renderTo:"tree-id",
        viewConfig: {forceFit: true},
        store: store,
        sm: new GeoExt.grid.FeatureSelectionModel({selectControlelect}),
        cm: new Ext.grid.ColumnModel({
            defaults: {
                sortable: true
            },
            columns: [
                {header:"Managed Elements",dataIndex:"fid"}
            ]
        })
    })]
});
extWin.show();

我已在其中添加了layout:'fit'，并且扩展工作正常，但滚动不起作用。如有错误请指正。

Answer 1

这是一个工作示例。如果您遇到任何问题，请告诉我。

诀窍是，layout 属性。只需设置容器的布局属性fit（在本例中容器为窗口）并且不要为网格提供任何大小属性，如宽度、高度。

Sencha Fiddle - GridPanel in Window

Ext.onReady(function(){
function createFakeData(count) {
        var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
            lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
            ratings      = [1, 2, 3, 4, 5],
            salaries     = [100, 400, 900, 1500, 1000000];

        var data = [];
        for (var i = 0; i < (count || 25); i++) {
            var ratingId    = Math.floor(Math.random() * ratings.length),
                salaryId    = Math.floor(Math.random() * salaries.length),
                firstNameId = Math.floor(Math.random() * firstNames.length),
                lastNameId  = Math.floor(Math.random() * lastNames.length),

                rating      = ratings[ratingId],
                salary      = salaries[salaryId],
                name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);

            data.push({
                rating: rating,
                salary: salary,
                name: name
            });
        }
        return data;
    }

    Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'rating', type: 'int'},
           {name: 'salary', type: 'float'},
           {name: 'name'}
        ]
    });


    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        id: 'store',
        pageSize: 50,
        buffered: true,
        purgePageCount: 0,
        model: 'Employee',
        proxy: {
            type: 'memory'
        }
    });


Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 500,
    width: 400,
    closable: false,
    collapsible: true,
    layout: {
        type: 'fit'
    },
    items: {  
        xtype: 'grid',
        border: false,
        store: store,
        loadMask: true,
        disableSelection: true,
        invalidateScrollerOnRefresh: false,
        viewConfig: {
            trackOver: false
        },
        columns: [
            {xtype:'rownumberer',width:40,sortable:false},
            {text: 'Name',flex:1,sortable:true,dataIndex:'name'},
            {text: 'Rating',width:125,sortable:true,dataIndex:'rating'},
            {text: 'Salary',width:125,sortable:true,dataIndex:'salary',align:'right',renderer:Ext.util.Format.usMoney}
        ]}        
}).show();

    var data = createFakeData(500),
        ln = data.length,
        records = [],
        i = 0;
    for (; i < ln; i++) {
        records.push(Ext.ModelManager.create(data[i], 'Employee'));
    }

    store.loadData(records);
});