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 を表示させます。しかし、ボタンと組み合わせると、ボタンがフルスクリーンになり、データビューが表示されなくなります (???)。

ボタンを構成項目として追加するシナリオと、ハンドラーを使用するシナリオの両方を試しました。

データビューの下にあるボタンを取得するにはどうすればよいですか??

ご協力いただきありがとうございます。

4

1 に答える 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 に答える