Comment ouvrir une fenêtre après un clic sur un bouton dans extjs
Je suis en train de travailler avec extjs designer 2. Il fonctionne bien et j'ai conçu une fenêtre d'affichage. Elle crée une certaine afficher les fichiers. Le premier est myviewport.js:
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) {}
});
avec le
onButtonClick: function(button, e, options) { }
Je veux ouvrir une fenêtre. Mais je ne sais pas comment faire. J'ai déjà fait une fenêtre et c'est stockée dans la mywindow.js fichier:
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);
}
});
Maintenant que dois-je mettre dans le onbuttonclick événement?
OriginalL'auteur Rick Weller | 2012-03-28
Vous devez vous connecter pour publier un commentaire.
Ajoutant
À votre gestionnaire de bouton devrait faire l'affaire.
Juste pour être clair, ce n'est pas l'id. C'est le type. Je suis un peu anal parce que le terme
id
est aussi valable, mais c'est quelque chose de complètement différent. Dans ce cas,Ext.create('MyApp.view.MyWindow')
est la création d'une instance de votre fenêtre, puis, vous êtes immédiatement en appelant sesshow()
méthode pour l'obtenir à l'écran.ok merci pour les informations et l'aide!
OriginalL'auteur Matt Greer