您的当前位置:首页正文

ExtJSGrid在IE6下宽度的问题解决方法_extjs

2023-12-02 来源:布克知识网

解决方法: 1、修改ext-all.css,找到.x-grid3-header-offset,修改为.x-grid3-header-offset{padding-left:1px;/*width:10000px;*/width:auto;} 2、在grid中加入下面代码: 代码如下:monitorResize: true, doLayout: function() { this.setSize(Ext.get(this.getEl().dom.parentNode).getSize(true)); Ext.grid.GridPanel.prototype.doLayout.call(this); }

小编还为您整理了以下内容,可能对您也有帮助:

extjs:gridpanel 列宽如何自适应浏览器的宽度

用.x-grid3-header-offset{width:auto;} 就可以实现;

参考代码如下:

/*store之类的就省略了*/  

  

var sm = new Ext.grid.CheckboxSelectionModel({  

    handleMouseDown : function(){}  

});  

  

var gridColumn = new Ext.grid.ColumnModel([  

    sm,  

    {header:'地市',dataIndex:'areaName',width:200},  

    {header:'品牌',dataIndex:'brandName',width:200},  

    {header:'指标',dataIndex:'busiTypeName',width:200},  

    {header:'1日',dataIndex:'day1',width:200},  

    {header:'2日',dataIndex:'day2',width:200},  

    {header:'3日',dataIndex:'day3',width:200},  

    {header:'4日',dataIndex:'day4',width:200},  

    {header:'5日',dataIndex:'day5',width:200}  

]);  

  

var gridPanel = new Ext.grid.GridPanel({  

    id: 'gridPanelId',  

    cm: gridColumn,  

    sm: sm,  

    ds: gridStore,  

    frame: true,  

    autoScroll: true,  

    height: 550,  

    tbar: topToolbar,  

    bbar: new Ext.PagingToolbar({  

        id: 'pagingToolbarId',  

        store: gridStore,  

        displayInfo: true,   

        pageSize: 10  

    })  

});  

  

var linePanel = new Ext.Panel({  

    id: 'linePanelId',  

    frame: true,  

    contentEl: 'myChartId',  

    height: 550  

});  

  

var backPanel = new Ext.Panel({  

    id: 'backPanelId',  

    frame: true,  

    autoScroll: true,  

    items: [gridPanel, linePanel]  

});  

  

new Ext.Viewport({  

    layout: 'fit',  

    items: backPanel  

注意:不要设置viewConfig: {forceFit: true},这个是把列宽(即ColumnModel的宽度)设置为自动宽度,不是整个GridPanel的宽度。

extjs里如何调整columns里的列宽

其实不要想得太复杂,可以直接给column设置width属性来改变宽度。

如果要设置自适应列宽的话可以参考以下:

var grid = new Ext.grid.GridPanel({

title : '表格列自动分配宽度',

columns : [

{header : 'id',dataIndex:'id',width: 200},

{header :'name',dataIndex:'name'}

],

store : 数据源

});

ExtJS 如何实现Grid每列自适应宽度?

直接找一个配置来实现恐怕不行,目前是没找到对应的配置。
有两个偏方可以试试:
1.首先不要使用forceFit:true ,然后当数据加载回来后根据内容计算出大概的宽度
优点:能实现比表面上的自动宽度
缺点:计算宽度很费时间,还有字符占位等问题
2.根据业务,判断此列数据一般占多宽,或者最大占多宽,然后设置死
这个一般就是要搞定需求或者用户了,就算是自动宽度,那个数据也不是无限长的,对吧?

如果兄弟研究出来了,就共享下,谢谢哦,我也想知道怎么做。

ExtJS 如何实现Grid每列自适应宽度?

直接找一个配置来实现恐怕不行,目前是没找到对应的配置。
有两个偏方可以试试:
1.首先不要使用forceFit:true ,然后当数据加载回来后根据内容计算出大概的宽度
优点:能实现比表面上的自动宽度
缺点:计算宽度很费时间,还有字符占位等问题
2.根据业务,判断此列数据一般占多宽,或者最大占多宽,然后设置死
这个一般就是要搞定需求或者用户了,就算是自动宽度,那个数据也不是无限长的,对吧?

如果兄弟研究出来了,就共享下,谢谢哦,我也想知道怎么做。

ExtJS的columnModel不能自动宽度吗,该如何处理

网上找不到解决方法,求助------解决方案--------------------------------------------------------ColumnModel的宽度一般是要指定的。不过如果你用GridPanel的话可以通过这样的方式让列宽自适应:创建Ext.grid.GridPanel的时候加上这个配置项JScript code viewConfig:{ forceFit: true, // 注意不要用autoFill:true,那样设置的话当GridPanel的大小变化(比如你resize了它)时不会自动调整column的宽度 scrollOffset: 0 //不加这个的话,会在grid的最右边有个空白,留作滚动条的位置 }------解决方案--------------------------------------------------------ColumnModel的宽度一般是要指定的。不过如果你用GridPanel的话可以通过这样的方式让列宽自适应:创建Ext.grid.GridPanel的时候加上这个配置项JScript code viewConfig:{ forceFit: true, // 注意不要用autoFill:true,那样设置的话当GridPanel的大小变化(比如你resize了它)时不会自动调整column的宽度 scrollOffset: 0 //不加这个的话,会在grid的最右边有个空白,留作滚动条的位置 }------解决方案--------------------------------------------------------探讨ColumnModel的宽度一般是要指定的。

ExtJS4.2 Grid组件里面表头的宽度和数据列的宽度不一致

Ext.grid.ColumnModel.override({      

        getTotalWidth: function(includeHidden) {      

            var off = 0;      

            if (Ext.isChrome){      

                off = 2;      

            };      

            if (!this.totalWidth) {      

                this.totalWidth = 0;      

                for (var i = 0, len = this.config.length; i < len; i++) {      

                    if (includeHidden || !this.isHidden(i)) {      

                        this.totalWidth += this.getColumnWidth(i)+off;      

                    };      

                };      

            };      

            return this.totalWidth;      

   }      

});

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 早苗多间草的下一句

    早苗多间草的下一句:浊水半和泥。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 曹子方用釜俎字韵赋诗的全文

    《曹子方用釜俎字韵赋诗》邓忠臣全文:长爱陈思咏萁釜,几年不见徂南土。朅来相逢翰墨场,夜窗共听空阶雨。跃马蔡卿能齧肥,好书张侯期饮乳。晁令知从博士迁,智囊不厌传经苦。於兹邂逅如夙契,睠我劬劳勤晤语。诗成乍变龙虎文,笔落更惊鸾凤舞。我将隐遁山林姿,公等整顿乾坤户。分同斥鶠抢榆枋,难伴犠牛登鼎俎。

  • 村贫屋舍低的下一句

    村贫屋舍低的下一句:早苗多间草。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 曹子方用釜俎字韵赋诗全文

    《曹子方用釜俎字韵赋诗》邓忠臣全文:长爱陈思咏萁釜,几年不见徂南土。朅来相逢翰墨场,夜窗共听空阶雨。跃马蔡卿能齧肥,好书张侯期饮乳。晁令知从博士迁,智囊不厌传经苦。於兹邂逅如夙契,睠我劬劳勤晤语。诗成乍变龙虎文,笔落更惊鸾凤舞。我将隐遁山林姿,公等整顿乾坤户。分同斥鶠抢榆枋,难伴犠牛登鼎俎。

  • 地薄桑麻瘦的下一句

    地薄桑麻瘦的下一句:村贫屋舍低。诗词名称:《茅城驿》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

Top