0

我对 Sencha 很陌生，我试图在面板中的 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');
        }
    }]
}
});

上面的视图只显示了按钮，而不是 Dataview。我需要添加

layout : 'fit'

配置以使其显示 DataView。但是结合按钮它使按钮全屏并且不再显示数据视图（???）。

我尝试了两种情况，在其中添加一个 Button 作为配置项并使用处理程序。

如何获得数据视图下方的按钮？

谢谢你的帮助。

4

1 回答 1

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()
});
于 2013-02-28T11:16:48.100 回答