ExtJs에서 사용한 경험

이곳의 경험은 이런 구조에 대한 전체적인 소개를 가리키는 것이 아니라 이번 달에 ExtJs에서 겪은 세 가지 문제의 해결 방법을 기록한 것이다. 여기에는 Extjs포럼의 애니멀과 콘도르에 감사해야 한다. 내가 길을 막는 범을 만날 때마다 그들 둘의 Tread에서 대응하는 해결 방법을 찾을 수 있다.자, 다음은 이 세 가지 문제입니다.
 
1.penel에서 item이 제거되면 다시 참조할 수 없습니다.
 
제가 직면한 문제는 패널이 두 개 있는데 패널1을 위주로 하는 패널이 있습니다. 패널2는 패널1의 하위 패널입니다. 즉, 패널2는 패널1의 items 집합에서 제 응용에서 패널1의 items의 내용을 동적 전환해야 합니다. 저는 패널의 방법을 사용합니다. 패널1.remove(panel2), 그러나 이렇게 조작한 후add(panel2)를 다시 호출하면 extjs의 오류를 보고합니다. 일단 panel2가remove되면 panel2의destory 방법을 호출하여 소각하여 다음에 이전의panel2를 호출할 수 없습니다. 새로 만든 panel2는 요구에 부합되지 않습니다. 해결 방법은 다음과 같습니다. 코드:

panel1.remove(panel2, false);
panel2.hide();

이 두 문장을 사용하면 패널2는 패널1에서 제거되지만 삭제되지 않습니다. 그러면 다음에는 패널1을 통해 제거할 수 있습니다.add(panel2)는 panel2를 추가하여 중복 사용합니다.
 
2. borderlayout 레이아웃에서는 어셈블리를 동적으로 대체할 수 없습니다.
 
허허, 만약에 당신의 메인 패널의 레이아웃이borderlayout이라면 메인 패널의 아들급 구성 요소를 동적으로 교체할 수 있다고 기대하지 마세요. ExtJs의 공식 문서에서borderlayout 유형의 패널의 구성 요소를 동적으로 교체하는 것을 지원하지 않는다고 명확하게 말했기 때문입니다. 그리고 저도 여러 번 시도했지만 성공하지 못했습니다. 하지만 우리는 생각을 바꾸어 손자급 구성 요소를 동적으로 교체할 수 있습니다. 우리는 코드를 봅니다.

zkyg.main.view = new Ext.Viewport({
	layout: 'border',
	border: false,
	frame: false,
	items: [{
		region: 'north',
		height: 41,
		contentEl: 'header'
	}, 
               new Ext.Panel({
               region:'center',
               layout:'fit',
               id: 'mainPanel',
               items: [zkyg.main.centerPanel]
        })]
});
 

// -------------------------------------------

if(Ext.getCmp('mainPanel').items != undefined){
    Ext.getCmp('mainPanel').items.each(function(item){
    Ext.getCmp('mainPanel').remove(item, false);
    item.hide();
    });
 }   
zkyg.vm.viewPanel.show();
Ext.getCmp('mainPanel').add(zkyg.vm.viewPanel);
Ext.getCmp('mainPanel').doLayout();

 
만약에 우리가 직접mainPanel이라는 패널을 교체한다면 분명히 성공하지 못할 것이다. 그러나 우리는mainPanel을 고정시키고 그 자체의 레이아웃 유형을fit형식으로 설정한 다음에 동적으로 하위 패널을 교체할 수 있다. 이렇게 하는 것은 문제가 없다. 즉, 위에서 말한 borderlayout은 아들급 모듈을 교체하지 말고 그의 손자급 모듈을 교체해야 한다.
 
또 한 가지, 다중 겹쳐진 패널(위 아래 세 층)이 동적 교체를 할 때 패널 형식을 Ext.Container 형식으로 설정하는 것이 좋습니다. ext.Panel 형식으로 설정하면 IE8 및 아래 버전의 IE 브라우저에서 호환성 문제가 존재하기 때문에add/remove 방법이 성공하지 못할 수 있습니다.
 
3.store에서 여러 필드를 결합하는 방법:
 
실제 작업에서store의 여러 필드를 합치는 문제를 자주 사용해야 한다(원래 나는 많은 예가 있지만 말하기가 너무 번거롭다고 생각하면 예를 들지 않는다. 허허), 코드를 직접 보자.

var vmstore = new Ext.data.JsonStore({
	url: '/vmmanage/query.do',
	root: 'rows',
	fields: [{name:'id',mapping:'id'}, {name: 'displayx',mapping: 'id + "(" + obj.nickname+")"'}]
});

  
예를 들어 다음과 같이 하십시오.

    var reader = new Ext.data.ArrayReader({}, [
        {name: 'full_name', type: 'string', mapping: 'first_name + " " + obj.last_name'},
        {name: 'age'}
    ]);

    var grid = new Ext.grid.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: Ext.grid.dummyData
        }),

        columns: [
            {header: 'Full Name', dataIndex: 'full_name'},
            {header: 'Age', dataIndex:'age'}
        ]
   });

맵핑 필드를 통해 자신에게 적합한reader를 구성하면 복잡한 필드 간의 조합 조작을 해석할 수 있습니다.