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');
        }
    }]
}
});

上面的视图仅显示按钮，但不显示Dataview。我需要添加

layout : 'fit'

到配置，使其显示DataView。但是与按钮组合使按钮全屏显示，数据视图不再显示（???）。

我尝试了两个场景，我将Button添加为配置项并使用处理程序。

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

感谢您的帮助。

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()
});

Sencha - 在同一视图中将数据视图与按钮相结合

1 个答案: