Sencha - 將DataView與按鈕組合在同一視圖中

Question

我對Sencha非常陌生，我試圖在Panel中的DataView下獲得按鈕。我嘗試過不同的場景。

觀

Ext.define('MyApp.view.Profile', { 
extend : 'Ext.Panel', 
xtype : 'profileview', 

requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'], 

initialize : function() { 
    var me = this; 
    var record = 1; 
    //Create the instance of the store and load it 
    var userStore = Ext.create('MyApp.store.UserStore'); 
    userStore.load(); 

    //Create the dataview 
    var view = Ext.create('Ext.DataView', { 
     store : userStore, 
     itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join() 
    }); 
    //Add the dataview to the panel 
    me.add(view); 

    /** 
    var button = Ext.create('Ext.Button', { 
    text : 'Edit', 
    handler : function() { 
    Ext.Msg.alert('You clicked the button'); 
    } 
    }); 
    */ 
    //me.add(button); 

}, 

config : { 
    title : 'Profiel', 
    iconCls : 'user3', 
    scrollable : true, 
    styleHtmlContent : true, 
    items : [{ 
     xtype : 'button', 
     text : 'Edit', 
     handler : function() { 
      Ext.Msg.alert('You clicked the button'); 
     } 
    }] 
} 
}); 

上面視圖僅示出了按鈕，但不是數據視圖。我需要添加

layout : 'fit' 

到配置使它顯示DataView。但與按鈕組合使按鈕全屏，數據視圖不再顯示（???）。

我試了兩種情況下，我添加一個按鈕作爲配置項目，並通過使用處理程序。

如何獲得數據視圖下方的按鈕？

感謝您的幫助。

Answer 1

不要使用佈局擬合，它是爲了適合您的畫布中的一個組件。我會使用vbox佈局。這會自動將項目置於對方之下。

試試這個：

layout: { 
    type: 'vbox', 
    align: 'stretch' //this tells to take the full width 
} 

彎曲你的數據視圖

var view = Ext.create('Ext.DataView', { 
    flex: 1, //Use the remaining space. 
    store : userStore, 
    itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join() 
});