100请教Ext GridPanel滚动条显示问题

本帖最后由 durongjian 于 2010-03-15 11:08:40 编辑

解决方案 »

  1.   

    加上这个<style type="text/css">
        .x-grid3-viewport
        {
         overflow:auto;
         }
        </style>
      

  2.   

    gridPanel 中： viewConfig: {
            forceFit:true
            },
      

  3.   

    是要滚动条呀，我那是forceFit ;
    应当这样:将GridPanel放到panel里，panel设置width 和 autoScroll:true 
      

  4.   

    注意要把
    <style type="text/css">
        .x-grid3-viewport
        {
         overflow:auto;
         }
        </style>写在
     <link rel="stylesheet" type="text/css" href="ExtPackage/resources/css/ext-all.css" />
    这个下面
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>    
        <link rel="stylesheet" type="text/css" href="ExtPackage/resources/css/ext-all.css" />
        <script type="text/javascript" src="ExtPackage/ext-base.js"></script>
        <script type="text/javascript" src="ExtPackage/ext-all.js"></script>
        <style type="text/css">
        .x-grid3-viewport
        {
            overflow:auto;
        }
        </style>
        <script type="text/javascript" src="ExtPackage/ext-lang-zh_CN.js"></script>
        <script type="text/javascript">
            Ext.onReady(function() {
                function renderMotif(data, cell, record, rowIndex, columnIndex, store) {
                    if (columnIndex == 1) {
                        cell.attr = "style=text-align:left;";
                        return data;
                    }
                    else if (columnIndex == 2 || columnIndex == 10 || columnIndex == 11) {
                        cell.attr = "style=text-align:center;";
                        return Math.round(data * Math.pow(10, 0)) / Math.pow(10, 0);
                    }
                    else if (columnIndex == 9) {
                        cell.attr = "style=text-align:right;";
                        return Math.round(data * Math.pow(10, 4)) / Math.pow(10, 4);
                    }
                    else if (columnIndex == 3 || columnIndex == 4 || columnIndex == 6 || columnIndex == 8 || columnIndex == 12 || columnIndex == 13 || columnIndex == 14) {
                        cell.attr = "style=text-align:right;";
                        return Math.round(data * Math.pow(10, 2)) / Math.pow(10, 2);
                    }
                    else if (columnIndex == 5 || columnIndex == 7) {
                        cell.attr = "style=text-align:right;";
                        return Math.round(data * Math.pow(10, 1)) / Math.pow(10, 1);
                    }
                }            var cm = new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),
            { id: '井号', header: "<span style=font-weight:bolder;><center>井号</center>", sortable: true, width: 80, dataIndex: 'jh', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>总井数<br/>(口)</center></span>", sortable: true, width: 80, dataIndex: 'zjs', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施<br/>有效率<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'csyxl', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>经济<br/>有效率<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'jjyxl', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施<br/>增油<br/>(吨)</center></span>", sortable: true, width: 80, dataIndex: 'cszy', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施<br/>投入<br/>(元)</center></span>", sortable: true, width: 80, dataIndex: 'cstr', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施<br/>产出<br/>(吨)</center></span>", sortable: true, width: 80, dataIndex: 'cscc', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施<br/>收益<br/>(元)</center></span>", sortable: true, width: 80, dataIndex: 'cssy', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>投入<br/>产出比<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'trccb', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施<br/>有效期<br/>(天)</center></span>", sortable: true, width: 80, dataIndex: 'csyxq', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施投资<br/>回收期<br/>(天)</center></span>", sortable: true, width: 80, dataIndex: 'cstzhsq', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>增量单位<br/>操作成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'zldwczcb', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施单位<br/>操作成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'csdwczcb', renderer: renderMotif },
                    { header: "<span style=font-weight:bolder;><center>措施单位<br/>变动成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'csdwbdcb', renderer: renderMotif }
            ]);            var data = [
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
                ['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456]
            ];
                var store = new Ext.data.Store({
                    proxy: new Ext.data.MemoryProxy(data),
                    reader: new Ext.data.ArrayReader({}, [
               { name: 'jh' },
               { name: 'zjs' },
               { name: 'csyxl' },
               { name: 'jjyxl' },
               { name: 'cszy' },
               { name: 'cstr' },
               { name: 'cscc' },
               { name: 'cssy' },
               { name: 'trccb' },
               { name: 'csyxq' },
               { name: 'cstzhsq' },
               { name: 'zldwczcb' },
               { name: 'csdwczcb' },
               { name: 'csdwbdcb' }
            ])
                });
                store.load();            var grid = new Ext.grid.GridPanel({
                    autoHeight: true,
                    autoWidth: true,
                    autoScroll: true,
                    title: '<span style=font-weight:bolder;line-height:25px;font-size:18px;><center>“大剂量堵水”措施不同井类型对比表</center></span>',
                    loadMask: true,
                    renderTo: 'grid',
                    store: store,
                    cm: cm,
                    collapsible: true,
                    bbar: new Ext.PagingToolbar({
                        pageSize: 100,
                        store: store,
                        displayInfo: true,
                        displayMsg: '显示第{0}条到第{1}条记录，一共{2}条',
                        emptyMsg: '没有记录'
                    })
                });        });
        </script>
    </head>
    <body style=" text-align:center;">
        <div id="Contain" style="text-align:left;width:1000px;">
            <div id="grid" style="width:1000px;"></div>
        </div>
    </body>
    </html>还是不行，不显示啊！
      

  6.   

    你用的那个版本的Ext哦？
      

  7.   

    测试了下，在ie7下确实没有，在IE8和FF下可以
      

  8.   

    zhouxiaobo123 的方法是可行的，把项目重新部署下
    另外：http://topic.csdn.net/u/20090508/15/3d885a11-7884-4472-8a39-523371c8aebc.html
      

  9.   

             autoHeight: true,
                    autoWidth: true,
    -------->
                    height: 600,
                    width: 1000,
      

  10.   

    只要把autoHeight:auto去掉就可以了
      

  11.   

    i dont konw.
    just think think think think think
    and try try try try try
      

  12.   

    我认为主要原因是overflow-y是IE的特有属性，overflow是W3C的标准属性，在设置autoHeight的时候从ff上能看到overflow:visible,可能就是因为这个属性引起的
      

  13.   

    看来我的回答迟了些，但还是回了，方便以后遇到同样问题的人
    在gridpanel里面加入下面代码：view: new Ext.ux.grid.BufferView({
        rowHeight: 25,
        scrollDelay: true
            })