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') + '" ';
		}    
	     }    
	});    
    }
}