如何适应gridPanels列？ [英] How to fit gridPanels columns?

问题描述

我有使用ExtJs 3.4的应用程序。

我有这样的结构：

westPanel-TabPanel：

  var westPanel = new Ext.TabPanel（{
 id：west，
 // xtype：tabpanel，
 // layout：'fit'，
 activeTab：0，
 region：west，
 border：false，
 width：278，
 split： 
 collapseMode：mini，
 items：[mapList，structure，cadastr，search] 
}）; 
  

搜索 - FormPanel：

  var search = new Ext.FormPanel（{
 labelAlign：'top'，
 frame：true，
 title：'Поиск'，
 bodyStyle： 'padding：5px 5px 0'，
 // width：600，
 // layout：'fit'，
 items：[{
 xtype：'textfield'，
 fieldLabel：
 name：'name_dispather'，
 anchor：'100％'，
 enableKeyEvents：true，
 listeners：{
' keyup'：function（e）{
 if（e.getValue（）。length == 4）{
 searchStore.load（{params：{'name'：e.getValue（）}}） ; 
} 
} 
} 
}，searchTab] 
}）; 
  

SearchTab - GridPanel：

  var searchTab = new Ext.ux.grid.livegrid.GridPanel（{
 store：searchStore，
 region：'center'，
 cm：searchCm，
 layout：'fit'，
 selModel：new Ext.ux.grid.livegrid.RowSelectionModel（），
 stripeRows：true，
 view：myView，
 height：390 ，
 loadMask：true，
 id：'searchTab'，
 title：'Найденныеобъекты'，
 autoScroll：true，
}）; 
  

我有一个问题：

宽度到整个面板的宽度？

更新

我尝试autoExpandColumn。它的作品，但它不是空白的：

如何解决？

解决方案

这个与 flex config。

只能在一列中执行：

 列：[{text：列A，dataIndex：field_A，flex：1}] 
 或者您可以在所有列中作为默认值：
 列：{
 items：[
 {
 text：列A
 dataIndex：field_A
}，{
文本：列B，
 dataIndex：field_B
}，
 ... 
]，
默认值：{
 flex：1 
} 
} 
  
 
I have application using ExtJs 3.4.

I have this construction:

westPanel-TabPanel:
var westPanel = new Ext.TabPanel({
            id: "west",
            //xtype: "tabpanel",
            //layout:'fit',
            activeTab: 0,
            region: "west",
            border: false,
            width: 278,
            split: true,
            collapseMode: "mini",
            items: [mapList,structure,cadastr,search]
        });
Search - FormPanel:
var search = new Ext.FormPanel({
                labelAlign: 'top',
                frame:true,
                title: 'Поиск',
                bodyStyle:'padding:5px 5px 0',
                //width: 600,
                //layout:'fit',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Диспечерское наименование',
                    name: 'name_dispather',
                    anchor:'100%',
                    enableKeyEvents: true,
                    listeners: {
                        'keyup': function(e) {
                            if(e.getValue().length==4){
                                searchStore.load({params:{'name':e.getValue()}});
                            }
                        }
                    }
                },searchTab]
            });
SearchTab - GridPanel:
var searchTab = new Ext.ux.grid.livegrid.GridPanel({
    store: searchStore,
    region: 'center',
    cm: searchCm, 
    layout: 'fit',
    selModel: new Ext.ux.grid.livegrid.RowSelectionModel(),
    stripeRows : true,
    view: myView,
    height: 390,
    loadMask: true,
    id: 'searchTab',
    title:'Найденные объекты',
    autoScroll: true,
});
And i have a problem:

               

Have to make last column's width to whole panel's width?

UPDATE

I try autoExpandColumn. its works but its not idial:



How to fix it?
解决方案
You can achieve this with the flex config.

You can do it on one column only:
columns: [{text: "Column A", dataIndex: "field_A", flex: 1}]
Or you can do it as default on all the columns:
columns: {
    items: [
        {
            text: "Column A"
            dataIndex: "field_A"
        },{
            text: "Column B",
            dataIndex: "field_B"
        }, 
        ...
    ],
    defaults: {
        flex: 1
    }
}


                        
这篇关于如何适应gridPanels列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！