知识大全 ExtJs设置GridPanel表格文本垂直居中示例

Posted 2022-07-20 表格

篇首语：真正的知识使人真正地、实实在在地胜过他人。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 ExtJs设置GridPanel表格文本垂直居中示例相关的知识，希望对你有一定的参考价值。

ExtJs设置GridPanel表格文本垂直居中示例 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中具体实现代码及截图如下感兴趣的朋友可以参考下哈希望对大家有所帮助

　　业务场景需要实现最终效果图如下 GridPanel代码如下配置

复制代码代码如下: xtype : grid id : grid_jglb frame : true region : center title : 列表详细信息 columnLines : true loadMask : true store : test_store viewConfig : forceFit : true scrollOffset : anchor : % selModel : new Ext grid CheckboxSelectionModel( moveEditorOnEnter : false width : ) columns : [ xtype : gridcolumn id : gridcolumn_id align : center dataIndex : COLUMN editable : false header : 列名 sortable : true width : xtype : gridcolumn align : center dataIndex : COLUMN editable : false header : 列名 sortable : true width : xtype : gridcolumn align : center dataIndex : COLUMN editable : false header : 列名 sortable : true width : xtype : gridcolumn align : center dataIndex : COLUMN id : colidx editable : false header : 列名 sortable : true width : xtype : gridcolumn align : center dataIndex : COLUMN hidden : true sortable : true ] bbar : xtype : paging autoShow : true displayInfo : true pageSize : store : test_store tbar : [ text : 新增 iconCls : icon add id : btn_mxxz text : 修改 iconCls : icon edit id : btn_mxxg text : 删除 iconCls : icon delete id : btn_mxsc ]

　　 JsonStore的代码就不贴出来了接下来看看如何实现垂直居中了实现思路通过获取DOM节点方式获取到表格内所有的TD 设置需要居中的TD的 cssText的值为 text align:center;lineheight: px;vertical align:center; 实现依据 Ext中GridPanel容器最终是生成DIV标签来渲染的其中我们所看到的每一行记录比如 “测试项 ”这一行数据就是被“包”在一个div内的一个table 只要我们根据Ext的生成规则找到该table 就可以操作其td元素了如图实现过程如下

复制代码代码如下: cha138/Article/program/Java/JSP/201311/20479