ExtJS 4.2.1 테두리 레이아웃 영역 컨테이너에 항목을 어떻게 동적으로 추가합니까?

테두리 레이아웃과 북쪽, 서쪽 및 중앙 컨테이너가 비어있는 컨테이너 인 재사용 가능한 일반 뷰를 만듭니다.ExtJS 4.2.1 테두리 레이아웃 영역 컨테이너에 항목을 어떻게 동적으로 추가합니까?

이 일반 뷰를 사용하고 north, west 및 center 컨테이너에 대한 항목을 동적으로 정의하려고합니다.

아래와 같이 사용자 지정 구성을 통해이 작업을 수행하려고하며 자동 생성 된 "적용"기능을 사용하려고합니다.

하지만 UI에 아무것도 표시되지 않습니다.

여기서 내가 잘못 생각한 것일 수 있습니까?

이 오류를 받고 있어요 :

형식 오류 : 항목 LEN = items.length, 사전에

감사 정의되지 않습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>APP</title> 
    <link rel="stylesheet" type="text/css" href="../../ext-4.2.1.883/resources/css/ext-all.css"> 
    <script type="text/javascript" src="../../ext-4.2.1.883/ext-all-debug.js"></script> 
    <script src="app.js"></script> 
</head> 
<body></body> 
</html> 

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 

    name: 'APP', 
    appFolder: '../simplemvcBorderLayout', 
    autoCreateViewport: true 
}); 

Ext.define('APP.view.Viewport', { 
    extend: 'Ext.container.Viewport', 
    alias: 'widget.appviewport', 

    autoScroll: true, 
    layout: 'fit', 

    requires: [ 
     'view.Main' 
    ], 

    items: [{ 
     xtype: 'mainAppView', 
     northItems: [{ 
      xtype: 'label', 
      text: 'here' 
     }], 
     westItems: [{ 
      xtype: 'label', 
      text: 'here' 
     }], 
     centerItems: [{ 
      xtype: 'label', 
      text: 'here' 
     }] 
    }] 
}); 

Ext.define('APP.view.Main', { 
    extend: 'Ext.container.Container', 
    alias: 'widget.mainAppView', 

    autoScroll: true, 
    layout: 'border', 

    config: { 
     northItems: null, 
     westItems: null, 
     centerItems: null 
    }, 

    constructor: function(config) { 
     this.initConfig(config); 
     this.callParent(arguments); 
    }, 

    applyNorthItems: function(northItems) { 
     this.northItems = northItems; 
     this.doLayout(); 
    }, 
    applyWestItems: function(westItems) { 
     this.westItems = westItems; 
     this.doLayout(); 
    }, 
    applyCenterItems: function(centerItems) { 
     this.centerItems = centerItems; 
     this.doLayout(); 
    }, 

    items: [ 
     { 
      xtype: 'container', 
      itemId: 'appHeaderContainer', 
      region: 'north', 
      height: 60, 
      items: this.northItems 
     }, 
     { 
      xtype: 'container', 
      itemId: 'appNavigationContainer', 
      region: 'west', 
      width: 85, 
      items: this.westItems 
     }, 
     { 
      xtype: 'container', 
      itemId: 'appContentContainer', 
      region: 'center', 
      items: this.centerItems 
     } 
    ] 
});

출처

2014-05-20 Greg Lafrance

코드는 개체에 대한 참조 만 추가하기 때문에 아무런 문제가 발생하지 않습니다. Ext.js에서는 부모에 .add()을 호출하여 항목을 컨테이너에 추가합니다. See here.

은 기본적으로 당신은 당신이 아이를 추가하고 혼합 컬렉션, 구성 객체가 아닌 배열되어 생성 된 용기 내에서 add() 또는 remove() 등

항목을 통화 할 지역의 초기 컨테이너를 얻을 필요가있다.

업데이트 여기

은 그것을 할 수있는 더 좋은 방법 (하지만 테스트하지)입니다. 우선 초기 항목 구성을 유지하기 위해 config 속성을 사용하지 않습니다. 초기 구성은 클래스 프로토 타입에있을 수 있으며 (필요하지 않음) 클래스가 만들어 질 때 추가됩니다 (코드에 어떻게 든 문서화). 영역에 하위 구성 요소를 추가 할 때 항상 하위 구성 요소를 xtype으로 만들 수 있습니다. .add() 메서드는 구성 개체 또는 만들어진 구성 요소를 사용합니다. 어쨌든 괜찮습니다.

Ext.define('APP.view.Main', { 
    extend: 'Ext.container.Container', 
    alias: 'widget.mainAppView', 

    layout: 'border', 

    northItems: null, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'container', 
        itemId: 'appHeaderContainer', 
        region: 'north', 
        height: 60, 
        items: me.northItems 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    }, 

    applyNorthItems: function(northItems) { 
     this.down('#appHeaderContainer').add(northItems); 
    } 
});

출처

2014-05-20 04:26:38

내가 추가중인 '항목'이 아직 작성되지 않았습니다. 이것은 동적 인 UI로 일반 페이지를 만들고 런타임에 항목 구성을 추가합니다. 항목의 유형을 감지하고 인스턴스화 한 다음 추가를 호출해야합니까? –

샘플 코드가 추가되었습니다. 이것을 배우는 가장 좋은 방법은 Sencha 구성 요소와 그 구성 요소를 보는 것입니다. –

+1, OP에서 사용 된 접근 방식은 전혀 작동하지 않으며 클래스 정의 시간에 인스턴스 수준 멤버에 액세스하려고합니다. –

ExtJS 4.2.1 테두리 레이아웃 영역 컨테이너에 항목을 어떻게 동적으로 추가합니까?

답변

관련 문제