表格文字水平居中怎么设置 ExtJs设置GridPanel表格文本垂直居中示例

ExtJs设置GridPanel表格文本垂直居中示例  

本文为大家详细介绍下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元素了 如图   实现过程如下

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