[ExtJS] GridPanel 列自适应内容宽度

[ExtJS] GridPanel 列自适应 内容宽度
------------------


1



gridpanel beforerender

				'beforerender' :function(view) {
					var gridcolumns = view.headerCt.getGridColumns();
					view.store.on('load', function(store, records) {
						Ext.each(gridcolumns, function(gridcolumn, colIdx) {
							var dataIndex = gridcolumn.dataIndex;
							var maxLength = 0;
							Ext.each(records, function(record, rowIdx) {
								var tmp = record.get(dataIndex) + '';
								if (tmp.length > maxLength) {
									maxLength = tmp.length;
								}
								/** 若是 wrap 单元格, 换行处理, 尽量避免水平滚动条 */
								if (Ext.isDefined(gridcolumn.wrap)) {
									var gridview = view.getView();
									var row = gridview.all.elements[rowIdx];
									var cell = row.cells[colIdx + 1];
									var cellDiv = cell.childNodes[0];
									cellDiv.style['white-space'] = 'normal';
									cellDiv.style['overflow'] = 'visible';
								}
							});
							/** 若是标题长度大于内容长度, 取标题长度, 标题长度为中文字符 */
							if (gridcolumn.text.length > maxLength) {
								maxLength = gridcolumn.text.length;
								gridcolumn.woc = true;
							}
							
							/** 隐藏, ActionColumn, wrap 列, flex列 不再计算. */
							/** 长度计算需要加上 22 的菜单长度. 英文默认7, 中文默认 12 */							
							if (!gridcolumn.hidden && !(gridcolumn instanceof Ext.grid.column.Action) && !Ext.isDefined(gridcolumn.wrap) && !Ext.isDefined(gridcolumn.flex)) {
								if(Ext.isDefined(gridcolumn.woc)) {
									gridcolumn.minWidth = gridcolumn.width = maxLength * 12 + 22;
								} else {
									gridcolumn.minWidth = gridcolumn.width = maxLength * 7 + 22;
								}
							};
						});
						
						/** 重新布局 gridpanel 组件*/
						view.doLayout();
					});
				}
			

2

var grid = Ext.create('Ext.grid.Panel', {
			store : Ext.getStore('userStore'),
			autoShow : true,
			selType : 'rowmodel',
			loadMask: true,
			selModel : Ext.create('Ext.selection.CheckboxModel', {
						listeners : {
							selectionchange : function(sm, selections) {
								grid.down('#removeButton')
										.setDisabled(selections.length == 0);
							}
						}
					}),
			columns : [{
						header : '用户ID',
						dataIndex : 'userId'
					}, {
						header : '用户名称',
						dataIndex : 'userName',
						woc : true
					}, {
						header : '用户性别',
						dataIndex : 'sex',
						woc : true
					}, {
						header : '用户年龄',
						dataIndex : 'age'
					}, {
						header : '用户邮箱',
						dataIndex : 'email'
					}, {
						header : '手机号码',
						dataIndex : 'phone'
					}, {
						header : '用户地址',
						dataIndex : 'address',
						wrap : true,
						flex : 1,
						woc : true
					}, {
						header : '公司名称',
						dataIndex : 'company',
						woc : true
					}, {
						header : '用户职务',
						dataIndex : 'duty',
						woc : true
					}, {
						header : '备注',
						dataIndex : 'note',
						woc : true
					}, {
						xtype : 'actioncolumn',
						draggable : false,
						header : '操作',
						width : 50,
						items : [{
							icon: 'extjs/examples/shared/icons/fam/cog_edit.png', 
							tooltip : '应用',
							handler : function(grid, rowIndex, colIndex) {
								
							}
						}]
					}],
			dockedItems : [{
						xtype : 'toolbar',
						items : [{
									text : '添加',
									itemId : 'addButton',
									iconCls : 'add',
                                    action : 'add'
								}, '-', {
									itemId : 'removeButton',
									text : '删除',
									iconCls : 'remove',
									disabled : true,
                                    action : 'remove'
								}, '-']
					}]
		});

3
woc : width of single chinese character , default 12.

wrap : 溢出则换行.

flex : 自动填充列