ExtJS4 - 卡布局項目

是否可以更改卡布局中的項目？我想要像分頁文檔一樣使用這種佈局。從下面的代碼，它確實顯示頁面1,2和3.我試圖測試的是當我點擊「選項」，更改卡布局中的項目。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 
     });

還有其他的方法嗎？ 1格顯示html的網格？

來源

2011-11-20 fes

這是一種錯誤的方法，首先你寫它的方式，表單面板呈現與你在開始時定義的3張牌，在選項處理程序，新對象歸屬卡變量沒有什麼要使用表單面板來更改或添加新元素，請使用面板的添加方法，然後使用佈局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，在面板中有許多組件，並切換它們，只顯示一個。

至於網格有一個單元格aproach，它取決於你想完成什麼，如果你的網頁是相似的，只有你可以使用的數據不同。只需創建一個包含要渲染的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，並在prev和next store中使用了Ext.Template的覆蓋方法，因此爲圖片tpl提供了一個模板，您將擁有tpl.overwrite（panel.body，urlOfTheNextOrPrevPicture）;我認爲這將是一個更簡單的問題。 – nscrob

你是如何處理分頁的？你是否必須寫一些自定義的東西，還是有一些內置到商店中的分頁機制？使用工具欄導航而不是在HTML模板上編寫next和prev會很好。 – fes

ExtJS4 - 卡布局項目

回答

相關問題