• 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: '无记录'
            })
        });

  • 相关阅读:
    论文笔记之:Playing for Data: Ground Truth from Computer Games
    【计算机视觉领域】常用的 feature 提取方法,feature 提取工具包
    论文阅读之:Is Faster R-CNN Doing Well for Pedestrian Detection?
    论文笔记之:Generative Adversarial Nets
    如果读取图像的图像出现坏图,无法读取的怎么办?怎么自动跳过坏的图像,而读取下一张?
    (转)A Beginner's Guide To Understanding Convolutional Neural Networks
    (转) Written Memories: Understanding, Deriving and Extending the LSTM
    如果将彩色图像和灰度图像一起放进 CNN 中去,会是什么结果?
    3D CNN for Video Processing
    nodejs(四) --- cluster模块详解
  • 原文地址:https://www.cnblogs.com/holyes/p/b649391b776ffc749944f9135ffd3d88.html
Copyright © 2020-2023  润新知