PDA

View Full Version : Need Help with button click function



sac435
18 Dec 2013, 10:43 AM
Please review at the bottom of code for the last button named Change Service, I need to be able to click on button and open a window that has a form in it. Please tell me which Sencha code can be added to the Change Service button to make it work? Thanks



var editUserInfoPanel = Ext.extend(Ext.Panel, {
id: 'editUserInfoPanel',
border: false,
cls: 'userTable',
renderTo: 'UpdateInformation_Panel',
initComponent: function () {
Ext.applyIf(this, {
items: [{
xtype: 'panel',
id: 'updateFormPanel',
layout: 'form',
border: false,
autoScroll: false,
items: [
{
xtype: 'panel',
id: 'employerPanel',
layout: 'form',
border: false,
bodyPadding: 0,
hidden: true,
items: [
{
xtype: 'radiogroup',
labelWidth: 150,
id: 'personnelCategory',
fieldLabel: 'Personnel Category',
items: [
{ boxLabel: 'Military', name: 'personnelCategory', inputValue: 1, action: 'military', handler: categoryHandler, checked: true },
{ boxLabel: 'Civilian', name: 'personnelCategory', inputValue: 2, action: 'civilian', handler: categoryHandler },
{ boxLabel: 'Contractor', name: 'personnelCategory', inputValue: 3, action: 'contractor', handler: categoryHandler }
]
}, {
xtype: 'combo',
id: 'serviceName',
store: employers,
displayField: 'Name',
mode: 'local',
width: '150',
triggerAction: 'all',
valueField: 'Id',
queryMode: 'local',
listeners: {
'select': onServiceSelect
},
labelSeparator: '',
fieldLabel: 'Select Service: ' + '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>',
editable: false
}, {
xtype: 'hidden',
id: 'hiddenEmployer'
}
]
}, {
xtype: 'panel',
id: 'otherControls',
layout: 'form',
border: false,
bodyPadding: 0,
hidden: false,
items: [
{
xtype: 'combo',
id: 'honorificTitle',
store: honoraryTitles,
displayField: 'Name',
mode: 'local',
triggerAction: 'all',
valueField: 'Id',
lastQuery: '',
editable: false,
labelSeparator: '',
fieldLabel: 'Honorific Title: <span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>'
}, {
xtype: 'textfield',
text: '',
id: 'txtFName',
fieldLabel: 'First Name',
itemCls: 'EditPaddings',
cls: 'x-form-text-round',
allowBlank: false,
blankText: 'A First Name is required'
}, {
xtype: 'textfield',
text: '',
id: 'txtLName',
fieldLabel: 'Last Name',
itemCls: 'EditPaddings',
cls: 'x-form-text-round',
allowBlank: false,
blankText: 'A Last Name is required'
}, {
xtype: 'textfield',
text: '',
id: 'txtTel',
itemCls: 'EditPaddings',
fieldLabel: 'Telephone',
cls: 'x-form-text-round',
allowBlank: false,
vtype: 'phone',
blankText: 'A Telephone Number is required',
plugins: new Ext.ux.plugin.FormatPhoneNumber()
}, {
xtype: 'textfield',
text: '',
id: 'email',
fieldLabel: 'Organizational Email Address',
itemCls: 'EditPaddings',
cls: 'x-form-text-round',
allowBlank: false,
blankText: 'A Organizational Address is required'
}, {
xtype: 'button',
id: 'btnRequest',
fieldLabel: 'Change Service',
tooltip:
{
text: 'User will no longer be able to access current service. The component manager will notify you to approve or deny access to new service.',
title: 'Change Service',
xtype: 'quicktip'
},
width: '18%',
text: 'Change Service'
handler: function () {
var createTicketWindow;
var createTicketButton = Ext.getCmp('new_Help_Ticket_btn');
createTicketButton.on('click', function() {
createTicketWindow = new userCreateTicket();
}
]
}
]
}]
});
editUserInfoPanel.superclass.initComponent.call(this);
}
});

scottmartin
18 Dec 2013, 2:37 PM
Where is userCreateTicket() defined?
What is new_Help_Ticket_btn, and id?
You are waiting on the click event inside a button handler?


createTicketButton.on('click', function() {




Ext.onReady(function() {

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {

var win = new Ext.Window({
title: 'Hello',
height: 200,
width: 400,
});

win.show();

}
});

});

sac435
18 Dec 2013, 3:12 PM
Hello scottmartin,

No, my code does not have to be in a handler. And just tried a code that didn't work. I was trying to figure out how to add the Ext.onReady(function() that you sent, to my change service button code without breaking it apart. Is there a way to merge the code that's there without splitting it a part? There are items that it is aligned with in a panel and didn't want to break the code.

Or where can I place the code for the change service button separately from the other items using the Ext. onReady(function()? Thanks for your assistance.

scottmartin
18 Dec 2013, 3:20 PM
onReady is to make sure the dom is ready to render, not to be inserted somewhere in your code.

You can take my code and insert it here and run:
https://fiddle.sencha.com/#home

Perhaps you can modify the example and show what you are trying to do.