Extjs4 grid 列宽问题

最新推荐文章于 2018-06-21 12:18:30 发布
最新推荐文章于 2018-06-21 12:18:30 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： Extjs 文章标签： extjs flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsut_yi/article/details/7876547
版权

Extjs4 grid 设置forceFit:true时，grid所有列都会被拉大。包括grid设置的selType:'checkboxmodel'列 和 xtype: 'rownumberer' 列 。

怎样固定selType:'checkboxmodel'列 和 xtype: 'rownumberer' 列的宽度呢？今天在做项目的时候折腾了半天。终于找到解决的方式了：

我们不用forceFit:true属性。这时候会有一个问题出现，就是grid里的列不会随grid 的宽度自适应。其实还有其他的属性能解决这个问题。在每列里加一个flex属性，这个属性的值是比例值。如0.5 或者1之类的， 按照你的比例来设置宽度。 这样每列出现的效果跟forcFit：true 一样。 这样一来 selType:'checkboxmodel'列 和 xtype: 'rownumberer'这两列的宽度就固定了，不会被拉大。

jsut_yi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs4前台前台grid导出excel
11-20
在本篇文章中，我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先，我们需要了解`Ext.grid.Panel`，这是ExtJS中的核心组件之一，用于创建数据网格。它能够动态加载数据，提供排序、过滤、分页...
extjs grid
11-06
2. **列配置**：Grid的列可以通过配置项进行定制，包括列宽、可排序性、可编辑性、显示模板等。例如，`dataIndex`属性用于关联字段，`header`定义列头文本，`renderer`函数可以自定义单元格的显示样式。 3. **行...
[ExtJS] GridPanel 列自适应内容宽度
amos_tl的专栏
08-11 1253
[ExtJS] GridPanel 列自适应[b]内容[/b]宽度 ------------------ 1 [img]http://dl.iteye.com/upload/attachment/0072/1498/02a16ecd-0fd2-3455-b941-bd47765a755f.png[/img] gridpanel beforerender [code="j...
ext gridPanel列的宽度问题
大道至简
04-03 2477
今天设置gridPanel的宽度，发现怎么设置width界面都没变化，后来发现在列中有个
解决extjs grid 不随窗口大小自适应的问题
ShuLiu's Log Book
01-25 3317
最近遇到的问题，在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句 问题就解决了，效果图   拖大后的效果 添加的语句： Ext.EventManager.onWindowResize(function(){ grid1.getView().refresh() }) 参看完整代码； grid
Ext.grid.ColumnModel列宽度自动填满grid宽度
jaub的技术专栏
01-26 7967
var grid = new Ext.grid.GridPanel({       renderTo : Ext.getBody(),       ds : store,       cm : cm,       autoHeight : true, //这样grid才能全部显示行，不用滚动       viewConfig : {        forceFit : true
ExtJS Tips->Grid的列宽设置
xiaoQuentin的专栏
08-30 1746
引用 http://archive.cnblogs.com/a/2063162/ a）grid的column的layout是Ext.layout.container.HBox，所以列宽可以通过width或者flex设置，如果不进行任何设置，列宽为100px b）设置w
Extjs4 gridPanel 列按照百分比分配宽度
iteye_8420的博客
12-16 832
//下面红色部分设置属性值，看注释 var _store = Ext.create('Ext.data.Store', { fields : ['name', 'name2','name3'], proxy : { type : 'ajax', url : 'test!request.action', reader : { type : 'json', root : 'data...
Extjs grid panel自带滚动条失效的解决方法
10-25
在EXTJS开发中，我们经常会遇到`Grid Panel`滚动条失效的问题。这通常是由于对`Grid Panel`中的`store`数据进行了过滤操作，导致滚动条无法正常工作。要理解这个问题，首先我们需要知道EXTJS `Grid Panel`的工作原理...
extjs中grid中嵌入动态combobox的应用
12-11
4. **ColumnModel**: `cm`是Grid的列模型，定义了每列的属性，包括列头和数据索引。其中，有一个列的`renderer`属性设置为自定义函数，用于在单元格中渲染ComboBox。 5. **EditorGridPanel**: 这是可编辑的Grid面板...
extjs4根据列内容自动设置列宽
路在何方
09-24 4727
写在Stroe的load事件里 Ext.getCmp("grid名字").headerCt.getGridColumns()[列号].autoSize(); 示例: Ext.getCmp("welcomeGrid").headerCt.getGridColumns()[1].autoSize(); Ext.getCmp("welcomeGrid").headerCt.getGridColu
extjs4 列宽自适应，列高自适应（换行），grid内容自适应，window窗体自适应grid，相互之间有冲突
qq_19461357的博客
06-21 2964
var pageRight_store = Ext.create('Ext.data.Store', {  //model: 'pageRight',  fields: [     { name : 'roleName' }, { name : 'roleRights' },{ name:'roleUser' }  ],  pageSize:200,//不加，点击下一页时默认25...
ExtJS GridPanel 自动列宽的方法
Leo's Blog
07-05 3634
在new GridPanel时加这个：  viewConfig:{ forceFit: true, // 注意不要用autoFill:true,那样设置的话当GridPanel的大小变化（比如你resize了它）时不会自动调整column的宽度 scrollOffset: 0 //不加这个的话，会在grid的最右边有个空白，留作滚动条的位置 }, 未找到原博.
让ExtJS里的GridPanel的列能够自动决定宽度
kunlong0909的专栏
05-06 7079
在new GridPanel时加这个： viewConfig:{ forceFit: true, // 注意不要用autoFill:true,那样设置的话当GridPanel的大小变化（比如你resize了它）时不会自动调整column的宽度 scrollOffset: 0 //不加这个的话，会在grid的最右边有个空白，留作滚动条的位置 }, 然后还需要给
Extjs grid宽度自适应
yxgyh的专栏
04-12 980
第一种方法必须在页面上设置div的宽度<div id="grid-example" width="90%"></div> // create the Grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {id:'c...
Extjs4 grid按字段排序
最新发布
06-01
要在 ExtJS 4 的 Grid 组件中按字段排序，你可以使用 `sorters` 配置项。该配置项是一个数组，每个元素表示一个排序规则。下面是一个示例代码： ```javascript Ext.create('Ext.grid.Panel', { store: Ext.create('Ext.data.Store', { fields: ['name', 'age'], data: [ {name: 'Alice', age: 25}, {name: 'Bob', age: 20}, {name: 'Charlie', age: 30} ] }), columns: [ {header: 'Name', dataIndex: 'name'}, {header: 'Age', dataIndex: 'age'} ], sorters: [{ property: 'age', // 按 age 字段排序 direction: 'ASC' // 升序排列 }] }); ``` 在上面的示例中，我们创建了一个 Grid 组件，其中包含两列：Name 和 Age。我们还创建了一个 Store，其中包含三个对象，每个对象包含一个名字和一个年龄。我们使用 `sorters` 配置项指定按 age 字段升序排列。 你还可以使用 `multiSort` 配置项来启用多列排序。将其设置为 true，然后在 `sorters` 数组中添加多个元素即可。例如： ```javascript sorters: [{ property: 'age', direction: 'ASC' }, { property: 'name', direction: 'DESC' }], multiSort: true ``` 这会首先按 age 字段升序排列，如果两个对象的 age 值相等，则按 name 字段降序排列。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值