ExtJS的几个细节效果

在ExtJS开发过程中，曾经遇到的几个细节效果的实现。

1.GridPanel的Height设置

设置GirdPanel的高度时，最好用

height: '100%'

而不要使用

autoHeight: true

否则在添加grid底部工具栏后，若表格内数据不够多，则底部工具栏不会在GridPanel区域的最下边显式；

2.设置Ext.MessageBox的高度

在ExtJS 3中，MessageBox是没有height属性的，其默认高度是100px，若内容较多，会自适应高度。

若想手动设置高度，可用以下方法：

 

Ext.Msg,alert('', '').getDialog().setHeight(200);

或者：

 

 

Ext.Msg.show({
    configs:...
}).getDialog().setHeight(200);

 3.表格中鼠标变手型

 

.x-grid3-row-over {
    cursor:pointer;   
}

 直接覆盖默认样式，不需要特别指定

 

4.表格中加toolTip

给GridPanel添加下面的监听方法：

listeners: {
    render: function(deptGrid){
        alert("render");
	var store = deptGrid.getStore();
	var view = deptGrid.getView();
	deptGrid.tip = new Ext.ToolTip({
	    target: view.mainBody,
	    delegate: '.x-grid3-row',
	    trackMouse: true,
	    renderTo: document.body,
	    listeners: {
	        beforeshow: function updateTipBody(tip) {    
		    var rowIndex = view.findRowIndex(tip.triggerElement);    		        tip.body.dom.innerHTML = '双击查看"' + store.getAt(rowIndex).get('deptName') + '"的详细信息';
		}    
	     }    
	});    
    }
}