3
我正在與extjs designer 2合作。它工作正常,我設計了一個視口。它創建一些視圖文件。第一個是myviewport.js:如何在extjs中點擊一個按鈕後打開一個窗口
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) {}
});
與
onButtonClick: function(button, e, options) { }
我想開一個窗口。但我不知道該怎麼做。我已經取得了一個窗口,這是存儲在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事件?
謝謝馬特!所以我使用Ext.create中的id('ID OF WINDOW HERE')。show();打開窗戶,它的作品。大。真的有幫助!謝謝 – 2012-03-28 12:53:39
只是要清楚,這不是id。這是類型。我有點肛門,因爲術語'id'也是有效的,但是它完全不同。在這種情況下,'Ext.create('MyApp.view.MyWindow')'創建一個窗口實例,然後立即調用它的'show()'方法來顯示它。 – 2012-03-29 01:44:55
好的謝謝你的信息和幫助! – 2012-03-29 06:55:51