extjs에서 버튼을 클릭 한 후 창을 여는 방법

저는 extjs 디자이너 2와 협력 중입니다. 괜찮습니다. 뷰포트를 설계했습니다. 일부보기 파일을 작성합니다. 나는 창을 열고 자하는extjs에서 버튼을 클릭 한 후 창을 여는 방법

onButtonClick: function(button, e, options) { }

와

Ext.define('MyApp.view.MyViewport', { 
    extend: 'Ext.container.Viewport', 

    layout: { 
     type: 'border' 
    }, 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [{ 
       xtype: 'tabpanel', 
       activeTab: 1, 
       region: 'center', 
       items: [{ 
        xtype: 'panel', 
        title: 'SIM usage' 
       }, { 
        xtype: 'gridpanel', 
        title: 'Reports', 
        forceFit: true, 
        store: 'ReportsStore', 
        columns: [{ 
         xtype: 'gridcolumn', 
         dataIndex: 'Name', 
         text: 'Name' 
        }, { 
         xtype: 'gridcolumn', 
         dataIndex: 'Type', 
         text: 'Type' 
        }, { 
         xtype: 'gridcolumn', 
         dataIndex: 'Description', 
         text: 'Description' 
        }, { 
         xtype: 'actioncolumn', 
         items: [{ 
          handler: function (view, rowIndex, colIndex, item, e) { 
           alert(view); 
          }, 
          altText: 'Run report', 
          iconCls: 'runReport' 
         }] 
        }], 
        viewConfig: { 

        }, 
        dockedItems: [{ 
         xtype: 'toolbar', 
         dock: 'top', 
         items: [{ 
          xtype: 'tbfill' 
         }, { 
          xtype: 'button', 
          iconCls: 'addReport', 
          text: 'Add report', 
          listeners: { 
           click: { 
            fn: me.onButtonClick, 
            scope: me 
           } 
          } 
         }] 
        }] 
       }, { 
        xtype: 'panel', 
        title: 'Pyshical SIM cards' 
       }, { 
        xtype: 'panel', 
        title: 'Virtual SIM cards' 
       }, { 
        xtype: 'form', 
        layout: { 
         type: 'absolute' 
        }, 
        bodyPadding: 10, 
        title: 'Config', 
        items: [{ 
         xtype: 'numberfield', 
         id: 'IP1', 
         width: 220, 
         fieldLabel: 'Server IP', 
         labelWidth: 150 
        }, { 
         xtype: 'numberfield', 
         id: 'IP2', 
         width: 80, 
         fieldLabel: '.', 
         labelPad: 0, 
         labelSeparator: ' ', 
         labelWidth: 10, 
         x: 240, 
         y: 10 
        }, { 
         xtype: 'numberfield', 
         id: 'IP3', 
         width: 80, 
         fieldLabel: '.', 
         labelPad: 0, 
         labelSeparator: ' ', 
         labelWidth: 10, 
         x: 330, 
         y: 10 
        }, { 
         xtype: 'numberfield', 
         id: 'IP4', 
         width: 80, 
         fieldLabel: '.', 
         labelPad: 0, 
         labelSeparator: ' ', 
         labelWidth: 10, 
         x: 420, 
         y: 10 
        }, { 
         xtype: 'textfield', 
         id: 'username', 
         fieldLabel: 'username', 
         labelWidth: 150, 
         anchor: '100%', 
         x: 10, 
         y: 40 
        }, { 
         xtype: 'textfield', 
         id: 'password', 
         inputType: 'password', 
         fieldLabel: 'password', 
         labelWidth: 150, 
         anchor: '100%', 
         x: 10, 
         y: 70 
        }, { 
         xtype: 'textareafield', 
         id: 'emails', 
         fieldLabel: 'Alert emails', 
         labelWidth: 150, 
         anchor: '100%', 
         x: 10, 
         y: 100 
        }, { 
         xtype: 'textfield', 
         id: 'smtp', 
         fieldLabel: 'SMTP', 
         labelWidth: 150, 
         anchor: '100%', 
         x: 10, 
         y: 170 
        }, { 
         xtype: 'textfield', 
         id: 'smtpCredentials', 
         fieldLabel: 'SMTP Server credentials', 
         labelWidth: 150, 
         anchor: '100%', 
         x: 10, 
         y: 200 
        }, { 
         xtype: 'button', 
         height: 30, 
         width: 90, 
         text: 'Restore', 
         x: 170, 
         y: 230 
        }, { 
         xtype: 'button', 
         height: 30, 
         width: 90, 
         text: 'Save config', 
         x: 270, 
         y: 230 
        }] 
       }] 
      }] 
     }); 

     me.callParent(arguments); 
    }, 

    onButtonClick: function (button, e, options) {} 
});

: 첫 번째 myviewport.js입니다. 그러나 나는 이것을 어떻게하는지 모른다. 이미 윈도우를 만든이는 mywindow.js 파일에 저장됩니다

Ext.define('MyApp.view.MyWindow', { 
    extend: 'Ext.window.Window', 

    height: 334, 
    width: 540, 
    layout: { 
     type: 'border' 
    }, 
    title: 'Run report', 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [{ 
       xtype: 'form', 
       bodyPadding: 10, 
       region: 'center' 
      }] 
     }); 

     me.callParent(arguments); 
    } 
});

지금 내가 onbuttonclick 이벤트에 무엇을 넣을까요?

출처

2012-03-28 Rick Weller

트릭을해야 단추 처리기에

Ext.create('MyApp.view.MyWindow').show();

추가.

출처

2012-03-28 12:45:28

감사합니다. 그래서 나는이 ID를 Ext.create ('ID of WINDOW HERE')에서 사용합니다. 창을 열면 작동합니다. 큰. 정말 도움이되었습니다! 감사합니다 –

그냥 분명히하기 위해, 그 id 아니다. 그것은 유형입니다. 나는'id '라는 용어가 유효하기 때문에 조금 항문이되고 있지만 완전히 다른 것입니다. 이 경우,'Ext.create ('MyApp.view.MyWindow')'는 윈도우의 하나의 인스턴스를 생성하고, 즉시'show()'메소드를 호출하여 표시되게합니다. –

정보 및 도움에 감사드립니다. –

extjs에서 버튼을 클릭 한 후 창을 여는 방법

답변

관련 문제