EXt 레이아웃

EXt 레이아웃
 
완전한 GridPanel도 있습니다. 백그라운드 관리에 조립해야 합니다.이제 왼쪽 트리에 있는 "인원 정보"노드를 클릭하면 오른쪽에 있는 TabPanel에 대응하는 GridPanel이 표시됩니다.가장 간단한 방법은 TabPanel의 html 속성(이렇게 불러도 되겠지)에서 iframe을 사용하여 GridPanel을 표시하는 다른 페이지를 여는 것입니다. 관련 코드는 다음과 같습니다.

var c1=new Ext.tree.TreeNode({
id:'c1',
text:' ',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { // 
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  // html 
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserListGridPanel.jsp"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});

이런 방법은 비록 매우 간단하지만, 또 두 가지 문제를 가져온다.페이지가 새로 고쳐집니다. 2.UserListGridPanel.jsp 페이지에도 방대한 ExtJS 라이브러리를 불러와야 합니다. 물론 해결 방법도 있습니다. autoLoad로 해결할 수 있습니다.위의 코드를 수정하려면 다음과 같이 하십시오.

var c1=new Ext.tree.TreeNode({
id:'c1',
text:' ',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { // 
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  // UserListGridPanel.jsp ， JavaScript， 
autoLoad:{url:'UserListGridPanel.jsp',scripts:true,nocache:true}
});
}
tab.setActiveTab(n);
}
}
});

사용한 후에 나는 또 머리가 커졌으니 정상적이라면 그림 아래 그림과 같이 해야 한다.
하지만 지금 얻은 것은 다음과 같은 결과다.
이리저리 생각하고, 이리저리 고치고, 마지막으로 내 추측으로는 렌더링할 때 문제가 생겼을 것이다. 상기 두 가지 방식 중 UserListGridPanel의 렌더링 속성은 항상 Ext.getBody()이지만 결과는 다르다. 즉, 두 가지 상황에서 Ext.getBody()는 같은 대상이 아니다(OOP가 습관이 되어 모든 것이 대상 O(____)O하하~).첫 번째 방식에서 Ext.getBody()는 UserListGridPanel을 가리킨다.jsp, 두 번째 방식에서 Ext.getBody()는 main을 가리킨다.jsp. 그래서 UserListGridPanel에서 시도해 보았습니다.jsp에서'UserListGridPanel'이라는 id를 만드는div를 만들고 RederTo 속성을 Ext.get('UserListGridPanel')으로 수정합니다. 맞히는 것 같습니다. 이렇게 하면 확실히 고칠 수 있습니다.그러나 페이지는 다음과 같이 변했다.
미치겠네... JS를 다시 N번으로 뒤적거렸는데 결과는 그대로... 그런데 UserListGridPanel을 단독으로 실행합니다.jsp는 정상이야!갑자기 뭐가 생각났어요. 위에 autoLoad를 사용할 때 불러온 페이지에서 ExtJS 라이브러리를 다시 불러오지 않아도 된다고 하지 않았어요?그리고 나의 현재 UserListGridPanel.jsp에 ExtJS 라이브러리도 불러왔습니다. main과jsp에서 충돌이 발생했습니까?결과는 당연히 말하지 않아도 안다.