要使Ext GridPanel在Ext Js的ext窗口内重新调整大小 [英] To make Ext GridPanel resizeable inside ext window in Ext Js

问题描述

我在Ext Window中有Ext GridPanel。为了使Ext Window可调整大小，我使其属性成立，并且工作正常。

但是，也希望使网格可重定大小。所以，对于那个我也尝试用 resizeable：true 。

没有运气！

这里，我的GridPanel代码

  new Ext.grid.GridPanel（{
 height：295，
 id：'productGrid'，
 store：productStore，
 disableSelection：true，
 loadMask：true，
 stripeRows：true，
 region：'south'，
 resizeable：true，// not working 
 autoExpandColumn：'自动展开'，
 cm：new Ext.grid.ColumnModel（{
 id：'productColModel'，
 columns：[
 {
 header：column1 ，
 dataIndex：'name'，
 width：110 
}，{
 header：column2，
 dataIndex：age，
 sortable ：false，
 align：'left'，
 width：80 
}，{
 id：'auto-expand'，
标题：描述，
 dataIndex：'description'，
 renderer：function（value，metaData，record）{
 return Ext.util.Format.stripTags（value）; 
} 
}，{
标题：重量，
 dataIndex：'weight'，
 align：'right'，
 width：70 
}，{
 header：List Price，
 dataIndex：'listPrice'，
 align：'right'，
 renderer：'usMoney'，
宽度：80 
}，{
标题：添加，
宽度：30，
 dataIndex：'id'，
可排序：false，
 renderer：function（value）{
 return'< img class =columnHoversrc =/ scripts / shared / icons / fam / add.gifheight =16width =16/> ;'; 
} 
} 
]，
 .... 
 .... 
  

请告诉我需要做什么或我做错了。

谢谢。

解决方案

ExtJs具有不同的布局，可以根据您的要求使用。
从上面的代码中，您似乎没有为您的网格面板使用任何布局。

请参考这个 http://dev.sencha.com/deploy/ext-4.0.0/示例/ layout-browser / layout-browser.html
并尝试使用不同的布局组合。

首先尝试使用 layout：auto 为您的父网格。之后，您可以为子面板使用不同的布局。
对于您的网格面板，您可以尝试使用

  layout：auto，
 height：'auto' ，
 autoHeight：true，
 region：north，//你也可以尝试中心
  

I have Ext GridPanel inside Ext Window. For making Ext Window Resizeable, I made its property true and it worked fine.

But, also want to make grid resizeable. So, for that also I tried with resizeable: true.

No Luck!

Here, my code for GridPanel

new Ext.grid.GridPanel({
   height: 295,
   id: 'productGrid',
   store: productStore,
   disableSelection: true,
   loadMask: true,
   stripeRows: true,
   region: 'south',
   resizeable: true, // not working
   autoExpandColumn: 'auto-expand',
   cm: new Ext.grid.ColumnModel({
          id: 'productColModel',
                columns: [
                {
                     header: "column1",
                     dataIndex: 'name',
                     width: 110
                }, {
                     header: "column2",
                     dataIndex: "age",
                     sortable: false,
                     align: 'left',
                     width: 80
                }, {
                      id: 'auto-expand',
                      header: "Description",
                      dataIndex: 'description',
                      renderer: function(value, metaData, record) {
                      return Ext.util.Format.stripTags(value);
                    }
                }, {
                       header: "Weight",
                       dataIndex: 'weight',
                       align: 'right',
                       width: 70
                }, {
                       header: "List Price",
                       dataIndex: 'listPrice',
                       align: 'right',
                       renderer: 'usMoney',
                       width: 80
                }, {
                       header: "Add",
                       width: 30,
                       dataIndex: 'id',
                       sortable: false,
                       renderer: function(value) {
                       return '<img class="columnHover" src="/scripts/shared/icons/fam/add.gif" height="16" width="16" />';
                            }
                        }
                    ],
         ....
         ....

Please, tell what I need to do or I am doing anything wrong.

Thanks.

解决方案

ExtJs has different layouts that you can use according to your requirement. From your above code, it looks like you are not using any layout for your Grid Panel.

Please refer this http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html and try with some different layout combinations.

Firstly try with layout: auto for your parent grid. After that you can use different layouts for child panels. For your grid panel, you can try with

layout: auto,
height: 'auto',
autoHeight: true, 
region : north, // you can try center as well

这篇关于要使Ext GridPanel在Ext Js的ext窗口内重新调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！