ExtJS4 - 카드 레이아웃 항목 - 우수한 라이브러리

카드 레이아웃의 항목을 변경할 수 있습니까? 문서를 페이징하는 것과 같은 레이아웃을 사용하고 싶습니다. 아래의 코드에서 페이지 1, 2 및 3을 표시합니다. "Option"을 클릭하고 카드 레이아웃의 항목을 변경하면 테스트를 시도했습니다.ExtJS4 - 카드 레이아웃 항목

 var cards = [{ 
      id: 'card-0', 
      html: 'Page 1', 
      border: false 
     }, { 
      id: 'card-1', 
      html: 'Page 2', 
      border: false 
     }, { 
      id: 'card-2', 
      html: 'Page 3', 
      border: false 
     }]; 

     var document = Ext.create('Ext.form.Panel', { 
      id: 'testcard', 
      padding: '0 0 5 5', 
      title: 'test', 
      layout: 'card', 
      region: 'center', 
      activeItem: 0, // index or id 
      tbar: [{ 
       id: 'test', 
       text: 'Options', 
       handler: function (btn) { 
        cards = [{ 
         id: 'card-1', 
         html: 'Page AAAAAAAAAAAA', 
         border: false 
        }, { 
         id: 'card-2', 
         html: 'Page BBBBBBBBBBBB', 
         border: false 
        }]; 

        Ext.getCmp('testcard').doLayout(); 
       } 
      }], 
      bbar: ['->', { 
       id: 'move-prev', 
       text: '&laquo; Previous', 
       handler: function (btn) { 
        navigate(btn.up("panel"), "prev"); 
       }, 
       disabled: true 
      }, { 
       id: 'move-next', 
       text: 'Next &raquo;', 
       handler: function (btn) { 
        navigate(btn.up("panel"), "next"); 
       } 
      }], 
      items: cards 
     });

다른 방법이 있습니까? html을 표시하는 1 셀이있는 격자?

출처

2011-11-20 fes

처음에는 사용자가 정의한 3 장의 카드로 양식 패널을 렌더링하고 옵션 핸들러에서는 새로운 객체의 속성에 아무런 영향을 미치지 않습니다. 폼 패널을 사용하여 새 요소를 변경하거나 추가하려면 패널의 add 메서드를 사용한 다음 레이아웃 setActive를 사용합니다.

function (btn){ 
    btn.up('panel').add([{ 
         id: 'card-1', 
         html: 'Page AAAAAAAAAAAA', 
         border: false 
        }, { 
         id: 'card-2', 
         html: 'Page BBBBBBBBBBBB', 
         border: false 
        }]); 
    btn.up('panel').getLayout().setActiveItem(aPage); 
}

이것은 카드 레이아웃의 purose이고, 패널에 여러 구성 요소가 있으며, 전환하고 하나만 표시한다는 것을 의미합니다.

하나의 셀이있는 그리드의 경우 페이지가 비슷하고 사용할 수있는 데이터 만 다른 경우 원하는 결과에 따라 달라집니다. 렌더링 할 html을 포함하는 Ext.XTemplate을 만들고 그리드 열에 렌더러 함수를 사용하십시오.

.... 
xtype: 'gridpanel', 
tpl: new Ext.XTemplate('<html goes here/>').compile(), 
columns: [ 
{ 
    dataIndex: 'id', 
    header: 'theColumn', 
    renderer: function(value,meta,record){ 
     return this.tpl.applyTemplate(record.data); 
    } 
}, 
....

출처

2011-11-20 18:09:36 nscrob

내가하려는 것은 이미지 목록을 한 번에 하나씩 표시하는 것입니다. 반환 된 json은 콜렉션의 크기에 따라 다릅니다. 이것을 시뮬레이션하기 위해 카드 레이아웃을 사용하고 싶었지만이 방법이 최선의 방법은 아닐 수도 있습니다. 격자보기로 가면 셀이 HTML을 렌더링 할 수 있고 img src를 입력하고 페이징을 1로 설정할 수 있습니다. – fes

그와 비슷한 것을 가지고 있으며 실제로 html로 렌더링 한 패널이었습니다. 사진 URL을 저장하고 이전 및 다음 상점은 Ext.Template의 덮어 쓰기 메서드를 사용하므로 그림 템플릿을 사용하여 tpl.overwrite (panel.body, urlOfTheNextOrPrevPicture); 나는 그것이 더 간단한 방법 일 것이라고 생각한다. – nscrob

페이징을 어떻게 처리 했습니까? 사용자 정의 무언가를 작성해야 했습니까? 아니면 페이징 메커니즘이 상점에 내장되어 있습니까? HTML 템플릿에 다음과 prev를 쓰지 않고 툴바를 탐색에 사용하는 것이 좋습니다. – fes

ExtJS4 - 카드 레이아웃 항목

답변

관련 문제