zoukankan      html  css  js  c++  java
  • grid的宽度设为100%问题

    应该是Ext的bug,当给grid的宽度设为100%时,其宽度会变成10000px,高度设置为100%,其内容自适应,而不是根据其容器自适应。
    无奈只能通过其高度宽度设置为固定值(很管用的)
    这样不论页面宽度怎么变化grid都会自适应页面容器了。

    js代码如下:
       // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'company',header: "Company", sortable: true, dataIndex: 'company'},
                {header: "Price", sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: "Change", sortable: true, renderer: change, dataIndex: 'change'},
                {header: "% Change", sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
                {header: "Last Updated", sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            frame:true,
            plugins: new Ext.ux.PanelResizer({
                minHeight: 100
            }),

            bbar: new Ext.PagingToolbar({
                pageSize: 10,
                store: store,
                displayInfo: true,
                plugins: new Ext.ux.ProgressBarPager()
            })
        });

        grid.render('grid-example');
        grid.setWidth(document.body.clientWidth-10);
        grid.setHeight(document.body.clientHeight-50);

        store.load({params:{start:0, limit:10}});
        //当窗口固定时触发的事件
        window.onresize=function(){
            grid.setWidth(document.body.clientWidth-10);
            grid.setHeight(document.body.clientHeight-50);
        };
    });
     

    =====================

    望Ext的表格能自适应外层的div大小,但Ext的Grid构造函数的width、height项不支持100%的设置方式,所以改用以下方式初始化Grid:

    Ext.get("content").getWidth(),
    height: Ext.get("content").getHeight(),


    <div id="content">
        <div id="grid-example"></div>
    <div>

    #content {
    100%;
    height: 100%;
    }

    完整js代码:

    // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'id',header: "序号", 50, sortable: true, renderer: keyChange, dataIndex: 'id'},
                {header: "数据表表名", 100, sortable: true, renderer: hrefChange, dataIndex: 'tableAlias'},
                {header: "物理表名", 100, sortable: true, dataIndex: 'tableName'},
                {header: "类型", 75, sortable: true, dataIndex: 'type'}
            ],
            stripeRows: true,
            Ext.get("content").getWidth(),
            height: Ext.get("content").getHeight(),
    addClass:"grid",
    tbar: [{
                text: '新增模版',
                handler : function(){
    window.location.href = 'templateDefineList4.html';
                }
                },{
                text: '删除模版',
                handler : function(){

                }
            }],
            bbar: new Ext.PagingToolbar({
                pageSize: 15,
                store: store,
                displayInfo: true,
                displayMsg: '当前显示记录 {0} - {1} 总条数 {2}',
                emptyMsg: '无记录'
            })
        });

  • 相关阅读:
    大数运算(涉及到格式问题)
    UltraEdit
    汉化eclipse3.6.2
    安装Microsoft SQL Server Management Studio Express是报错29506
    Java相对路径/绝对路径
    恢复Unbuntu的启动项
    UNC路径
    make: g++:命令未找到
    找到个学习html的网站
    HDU 3756 三分
  • 原文地址:https://www.cnblogs.com/holyes/p/b649391b776ffc749944f9135ffd3d88.html
Copyright © 2011-2022 走看看