1

基本的に数秒間表示されるメッセージウィンドウを呼び出すコントローラーを持っています。このメッセージウィンドウにボタンを追加しようとしていますが、[object][object]が返されます。

コントローラ

success : function(response) {

                this.mWin = Ext.create('App.view.GenMessage');
                this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt1);
}

意見

Ext.define('App.view.GenMessage', {
extend : 'Ext.panel.Panel',
alias : 'widget.genmessage',

initComponent : function() {

    this.msgCt = App.genMsgCt
    this.msgCt.setWidth(300);
},
addMessage : function(status, title, msg) {

    if (status == false) {
        delay = 3000;
    } else {
        delay = 2000;
    }

    Ext.DomHelper.append(this.msgCt, {
        html : this.buildMessageBox(status, title, msg)
    }, true).slideIn('t').pause(delay).ghost("t", {
        remove : false
    });
},

/*
 * buildMessageBox
 */
buildMessageBox : function(status, title, msg) {
    console.log('buildMesssage');

    switch (status) {
        case true :
            var icon = GENHTML.tick;
            break;
        case false :
            var icon = GENHTML.warning;
            break;
    }

    return ['<div class="genMsgDiv">', icon,
                    '<div class="genMsgHd leftMargin">', title,
                    '</div><div class="H3 leftMargin">', msg,
                    '</div></div>'].join('');
}

私がしたことは、次のようなボタンを宣言することでした

var button={
id: 'button1',
text :'Button1'
}

次に、上記のdivクラスに追加して、

['<div class="genMsgDiv">', button].join();

しかし、画面に表示されるのは、ボタンの代わりに[オブジェクト][オブジェクト]です。誰かがここで何が間違っているのか教えてもらえますか？これはボタンを追加する正しい方法ですか

編集

divにボタンを追加できないので、やってみました

var config = Ext.create(Ext.panel.Panel, {



                itemId : 'GENMSGPANEL',

                height : 150,
                cls : 'msg effect1',

                border : false,
                html : '<div class="genMsgDiv">' + icon +
                    '<div class="genMsgHd leftMargin">'+ title +
                    '</div><div class="H3 leftMargin">'+ msg +
                    '</div></div>',


                items : [{
                    xtype : 'panel',
                    //cls : 'winTitle',

                }, {
                    xtype : 'form',
                    itemId : 'GENMSGFORM',
                    border : false,
                    title : '',
                    buttonAlign : 'center',
                    fieldDefaults : {
                        msgTarget : 'side',
                        labelWidth : 110,
                        size : 30
                    },
                    buttons : [{
                        text : LANG.BTYES,
                        iconCls : 'icon-tick-tb',
                        iconAlign : 'right',
                        cls : 'tip-btn',
                        action : 'genDelete',
                        id : 'BTYES'
                    }, {
                        text : LANG.BTNO,
                        iconCls : 'icon-cross-tb',
                        iconAlign : 'right',
                        cls : 'tip-btn',
                        action : 'notDelete',
                        id : 'BTNO'
                    }]
                }]
            });


    return config;

しかし、これでも何も返されませんでした

4

1 に答える 1

2

答えは簡単です。コンポーネントのhtmlconfigプロパティにExtJSボタンを追加することはできません。これは単なるhtml用です。ExtJSオブジェクトはitems配列に属しています。

HTMLコンテンツをボックス（コンポーネントのxtype）に配置し、これをitems配列に追加することを決定します。次に、ボタンを追加できます。あなたの場合、htmlをまったく使用しないでください。

必要なクラスを変更/設定できます。DOMの操作方法は確認していませんのでご注意ください。

// you may use a layout to align them
items : [
    { 
        xtype: 'box',
        cls : 'msg effect1',
        html : '<div class="genMsgDiv">' + icon +
            '<div class="genMsgHd leftMargin">'+ title +
            '</div><div class="H3 leftMargin">'+ msg +
            '</div></div>'
    },
    {
        xtype : 'panel',
        //cls : 'winTitle',
    },
    ...
于 2012-09-19T09:34:09.867 に答える