Extjs3 GridPanel列头文字过长,换行显示

项目一直以来列表都是默认样式显示,最多宽度改一改,最近有个页面需求,要求列表的头全部显示出来,如果列宽调宽一点,又不美观,因为列的文字比较短,所以只能针对列头单独修改,让列头换行显示。找到extjs列表自带的class,添加一下样式就可以。

<style>
.x-grid3-hd-inner{
    white-space:normal;
}
<style>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 Ext.grid.feature.Grouping 插件来进行单元格合并。以下是示例代码: ``` Ext.create('Ext.grid.Panel', { title: 'My Grid Panel', store: myStore, columns: [ { text: 'Name', dataIndex: 'name', flex: 1 }, { text: 'Age', dataIndex: 'age', flex: 1 }, { text: 'Salary', dataIndex: 'salary', flex: 1 } ], features: [{ ftype: 'grouping', groupHeaderTpl: '{columnName}: {name} ({rows.length})', hideGroupedHeader: true, startCollapsed: true, groupByText: 'Group by this field' }], renderTo: Ext.getBody() }); ``` 在上述代码中,我们创建了一个包含三GridPanel,并使用 Ext.grid.feature.Grouping 插件进行了单元格合并。我们使用 groupHeaderTpl 属性来指定分组的标题,hideGroupedHeader 属性来隐藏已分组的的标题,startCollapsed 属性来指定分组初始时是否折叠,groupByText 属性来指定分组菜单项的文本。 如果您想要根据特定的进行分组和合并,则可以使用 groupField 属性来指定要分组的的名称。例如: ``` Ext.create('Ext.grid.Panel', { title: 'My Grid Panel', store: myStore, columns: [ { text: 'Name', dataIndex: 'name', flex: 1 }, { text: 'Age', dataIndex: 'age', flex: 1 }, { text: 'Salary', dataIndex: 'salary', flex: 1 } ], features: [{ ftype: 'grouping', groupHeaderTpl: '{columnName}: {name} ({rows.length})', hideGroupedHeader: true, startCollapsed: true, groupByText: 'Group by this field', groupField: 'age' }], renderTo: Ext.getBody() }); ``` 在上述代码中,我们将 groupField 属性设置为 'age',这意味着我们将根据 'age' 进行分组和合并。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值