论坛首页 Web前端技术论坛

Ext GridPanel 宽度设置问题

浏览 36519 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-06-13  
呵呵..我也是这样的问题..试一下各位的方法先..
0 请登录后投票
   发表时间:2008-06-13  
谢谢 stworthy ,你的方法好使..
0 请登录后投票
   发表时间:2008-07-04  
vicksong 写道
firefox这么烂的浏览器,如果是做网站,还考滤一下,如果是做企业管理系统,还有必要考滤这等浏览器?


客户如果就喜欢用ff 你怎么办?做还是不做呢  哈哈

另外,今天把三个方法都试验了下,都成功了
不过如果用ViewPort的话  横向滚动条死活都不出来了
0 请登录后投票
   发表时间:2008-08-11  
ecsun 写道
我最终的解决办法是这样子的:

var grid=new Ext.grid.GridPanel(...);

var view=new Ext.Viewport({
layout:'border',
renderTo:'topic-grid',
border:false,
items:[{
     region:'center',
     layout:'fit',
     items:[grid]
}]
});

这个也是在extjs 上讨论过的做法,经过测试,在firfox中和在IE中显示的grid样式是一样的,不再出来宽度无限扩张的问题,可以按我们想要的方式被控制。
这里我比较懒,使用了fit,大伙可以改为其它的。


好方法!
0 请登录后投票
   发表时间:2008-10-25  
    var gridPanel = new Ext.grid.GridPanel({
        store: store,//数据存储器
        cm: cm,//列信息
height : 485,//表格高
bodyStyle:'width:100%',
        viewConfig: {
            forceFit:true
        },
stripeRows:true,
enableDragDrop: true,
bbar : pagingToolbar = new Ext.PagingToolbar({
pageSize : 15,
store : store,
      autoScroll:true,
displayInfo : true,
beforePageText : '第',
afterPageText : '页共 {0} 页',
displayMsg : '显示 {0} - {1},共 {2} 条',
emptyMsg : '没有数据需要显示',
items : ['    每页显示数', new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ['abbr', 'state'],
data : [[10, 10], [15, 15], [20, 20], [30, 30], [60, 60], [100, 100]]
}),
width : 50,
displayField : 'state',
typeAhead : true,
mode : 'local',
value : 15,
triggerAction : 'all',
selectOnFocus : true,
listeners : {
select : {
fn : function(combo, value) {
var pageSize = combo.getValue();
if (pageSize != null && pageSize > 0) {
pagingToolbar.pageSize = parseInt(pageSize);
store.load({params : {start : 0,limit : pagingToolbar.pageSize}});
}
}
}
}
})]
   }),
0 请登录后投票
   发表时间:2008-11-23  
wangzi6hao 写道
gygcloud 写道
width: Ext.get("divname").getWidth(),
这样就可以了.
刚得到的.

使用这位仁兄的方法成功了.分享给大家

var grid = new Ext.grid.GridPanel({
		//autoWidth:true,
        border:false,
		width: Ext.get('center_context_desktop').getWidth(), 
        ds: new Ext.data.Store({
            reader: new Ext.data.ArrayReader({}, [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]),
            data: Ext.grid.dummyData
        }),
        cm: new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),
            {id:'company',header: "Company", width: 120, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: "Change", width: 70, sortable: true, dataIndex: 'change'},
            {header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 95, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ]),

        viewConfig: {
            forceFit:true
        },
        autoExpandColumn:'company'
    });
//autoWidth:true,
这一行一定要隐藏,在ie7和ff下试了,是没有问题的.
同时还有bodyStyle:'width:100%',这个也试成功了 
 

 


Ext.get("divname").getWidth() 和 bodyStyle:'width:100%' 都有问题,这只是设置了一个初始值,当窗体放大或缩小的时候它不会跟着变,用layout比较好

0 请登录后投票
   发表时间:2008-11-27  
rainly 写道
stworthy 写道
设置grid自适应宽度,首先要清楚grid放在什么容器中,设置该容器的layout:fit就行了。比如页面上如果只放置一个grid,一般改成用Viewport,再在Viewport中包含grid就能解决问题了。

{
region:'center',
layout:'fit',
items:grid
}

这里早就说明了解决办法了,都不认真看贴的。

尽说废话,谁会在页面上只放置一个grid?
0 请登录后投票
   发表时间:2008-12-09  
gygcloud 写道
width: Ext.get("divname").getWidth(),
这样就可以了.
刚得到的.



这个方法好!
先设置
<div id="tt" style="width:100%; height:100%" ></div>

然后
height:Ext.get("tt").getHeight(),
width: Ext.get("tt").getWidth(),

就可以自适应窗口了
0 请登录后投票
   发表时间:2008-12-10  
对ext-all.css修正如下
/*grid宽度bug*/
.x-grid3-header-offset{width:auto;}
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics