0

ウィンドウヘッダーの右上のアイコンをクリックすると、ドロップダウンメニューを追加する必要があり、Google Chromeブラウザーメニューのように表示されます。extjs4 を使用して、ウィンドウ ヘッダーにドロップ ダウン メニューを追加します。ここにコードがありますが、メニューを見ることができません。ここにコード：

こんにちは、これは Google Chrome ブラウザ メニューのように見える必要があります。ウィンドウのメニューをクリックしても表示されません。

Ext.require([
    'Ext.form.*'
]);

Ext.onReady(function() {

    var win;
    var options = [

                   {"name":"AAdvantage ",},
                   {"name":"PNR",},
                   {"name":"Bag File",}
               ];
     Ext.regModel('Options', {
         fields: [
             {type: 'string', name: 'name'}
         ]
     });

     var store = Ext.create('Ext.data.Store', {
         model: 'Options',
         data: options
     });


         var menu = Ext.create('Ext.menu.Menu', {
                id: 'mainMenu',
                items: [
                    {
                        text: 'Search Customer',
                        checked: true
                    }, '-',
                    {
                        text: 'Customer Information',
                        checked: true
                    }, '-', {
                        text: 'Travel History',
                        checked: true
                    }, '-', {
                        text: 'Resolution'
                    }, '-', {
                        text: 'Future OD'
                    }, '-', {
                        text: 'History OD'
                    },'-', {
                        text: 'Help',
                        checked: true
                    }, '-', {
                        text: 'Upload Document',
                        checked: true
                    }
                ]
            });
    function showContactForm() {
        if (!win) {

            var form = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelSeparator: "",
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 10 0'
                },

                items: [{
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Search Customer',
                    labelStyle: 'font-weight:bold;padding:0',
                    layout: 'hbox',
                    defaultType: 'textfield',

                    fieldDefaults: {
                        labelAlign: 'top'
                    },
                },

                    {
                     xtype: 'combobox',
                     fieldLabel: 'Select Option',
                     name: 'suit_options_id',
                     id: 'ComboboxSuitOptions',
                     typeAhead:false,
                     labelAlign:'top',
                     labelSeparator: "",
                     store: store,
                     editable: false,
                     displayField: 'name',
                     hiddenName: 'id',
                     valueField: 'id',
                     queryMode: 'local',
                     listeners: {
                            change: function(combo) {
                                 console.log(combo.getValue());
                            }
                        }

                    },
                    {

                         xtype: 'textfield',
                         fieldLabel: 'AAdvantage Number',
                        allowBlank: false

                    },
                    {
                        xtype: 'button',
                        text : 'Search',
                        handler: function() {

                        }
                    }]
            });

            win = Ext.widget('window', {
                title: '<center>FCR</center>',
                closeAction: 'hide',
                width: 200,
                height: 300,
                minHeight: 300,
                layout: 'fit',
                closable: false,
                tools: [
                         {  type:'left',
                            menu: menu
                         }
                ],
                resizable: true,
                modal: true,
                items: form
            });
        }
        win.show();
    }
    showContactForm();

});
4

1 に答える 1

0

コードはそれが意味することを行います：

tools: [
    {  type:'left',
        menu: menu
    }
],

このコードは、トップ ウィンドウに左のアイコンを生成します。doc を参照してください。しかし、ool` にはプロパティ メニューがないため、コードは機能しません。

メニューを表示する関数を定義しhandlerます (このコードは機能しますが、ボタンにメニューを配置するには調整が必要です)。

tools: [
    {  type:'left',
        handler: function(){menu.show()}
    }
],

コードには他にもいくつかの問題があります。

  1. 警告が表示されExt.regModel has been deprecated. Models can now be created by extending Ext.data.Model: Ext.define("MyModel", {extend: "Ext.data.Model", fields: []});ます。
  2. また、ExtJS バージョン 3 である Ext.onReady ではなく、Ext.app.Application の launch メソッドを使用して起動することをお勧めします。
于 2013-10-10T16:32:53.817 に答える