There's quite a lot of code, so I was hesitant to just post a bunch of it. Is there anything in particular you're interested in?
I can think of three possibilities:
- base class
- subclass
- code that launches the popup Window
I'm pretty sure the Window class isn't involved though, since putting 'collapsible: true' on the formpanel fixes it (if i collapse/expand the formpanel).
So here's the base class:
Code:
Ext.define('VFABRIC.form.BaseFormPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.baseformpanel',
requires: [
'VFABRIC.util.MsgBox',
],
height: Globals.DIALOG_HEIGHT,
width: Globals.DIALOG_WIDTH,
// msgTarget: 'under', // where to put error messages
// collapsible: true,
layout: {
align: 'stretch',
type: 'vbox'
},
bodyPadding: 10,
// style: { padding: '10px' },
submitValue: false,
autoScroll: true,
// Have a configuration property that subclasses can set to tell us what
// function to call from the keyNav handler -- and what type of field to
// attach the keyboard navigator to.
config: {
keyNavHandler: null,
keyNavFieldXtype: 'textfield',
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
listeners: {
// After the form is laid out, set focus to the text field and set up
// a keyboard listener so we can handle return (run handler for Create button).
'afterlayout': function(form, layout, options) {
var field = form.down(me.keyNavFieldXtype);
field.focus('', 50);
me.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
enter: this.handleKeyNavReturn,
scope: me
});
},
},
fieldDefaults: {
anchor: '100%',
// margins: '5 5 5 5',
labelAlign: 'left', // 'top',
labelPad: 10, // Bug in ExtJs, this doesn't seem to have any effect.
// labelWidth: 100,
// labelStyle: 'font-weight:bold',
allowBlank: false,
afterLabelTextTpl: '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>',
},
});
me.buttons = me.createButtons();
me.callParent(arguments);
},
createButtons: function() {
return [
{
text: 'Reset',
tooltip: 'Reset the form to defaults',
handler: function() {
VFABRIC.form.BaseFormPanel.resetMyForm(this);
},
},
{
text: 'Cancel',
tooltip: 'Dismiss the window without saving changes',
handler: function() {
VFABRIC.form.BaseFormPanel.closeWindow(this);
},
},
];
},
handleKeyNavReturn: function() {
var myButton = this.ownerCt.down('button');
this.keyNavHandler.call(this, myButton);
},
getProductCombo: function() {
var me = this;
form = me.getForm();
// If we can't find the form, return an empty string for now.
if (form === undefined || form === null) {
return Globals.EMPTY_STR;
}
var prodCombo = form.findField(Globals.POINTPRODUCTSCOMBO_ID);
return prodCombo;
},
// Function to get the product selected, IFF the Product combo is present.
getInternalProductSelected: function() {
return this.getProductCombo().getInternalValue();
},
// Function to get the product selected, IFF the Product combo is present.
getDisplayProductSelected: function() {
return this.getProductCombo().getValue();
},
displayNoObjectsFoundError: function(msg, stepNum) {
var me = this,
myFunction = this.closeWindowShowWizard,
myScope = me;
if (Globals.QUICKSTARTWIZARD_RUNNING) {
myFunction = null;
myScope = null;
msg += 'Please return to the Quick Start Wizard and go to step number ' + stepNum + '.';
}
else {
msg += 'The Quick Start Wizard will be launched so you can remedy this.';
VFABRIC.util.DomStorage.setLocalValue(Globals.QUICKSTARTWIZARD_STARTINGSTEP_STR, stepNum);
}
VFABRIC.util.MsgBox.showErrorDelayed('No records found', msg, myFunction, myScope);
},
closeWindowShowWizard: function() {
VFABRIC.form.BaseFormPanel.closeWindow(this);
Globals.showFormForMenu(Globals.MAIN_QUICKSTARTWIZARDMENU_ID);
},
statics: {
// Returns the form from the given scope (needs to be a
// child window of the form).
getMyForm: function(myScope) {
return myScope.up('form').getForm();
},
// Returns the panel (the panel that contains the form) from the
// given scope (needs to be a child window of the form).
getMyPanel: function(myScope) {
return myScope.up('panel');
},
resetMyForm: function(control) {
this.getMyForm(control).reset();
},
// Close the window.
closeWindow: function(control) {
control.up('window').destroy();
},
hideMyPanel: function(myForm) {
myForm.up('window').hide();
},
unHideMyPanel: function(myForm) {
myForm.up('window').show();
},
// Reset the form and close the window.
resetFormCloseWindow: function(control) {
this.resetMyForm(control);
this.closeWindow(control);
},
getFormValues: function(form) {
return form.getValues();
},
},
});
And a subclass:
Code:
var FILEUPLOADFIELD_ID = 'FileUploadField',
VERSIONTEXT_ID = 'VersionText';
Ext.define('VFABRIC.form.UploadImageFormPanel', {
extend: 'VFABRIC.form.BaseFormPanel',
alias: 'widget.uploadimageformpanel',
requires: [
'VFABRIC.form.BaseFormPanel',
'VFABRIC.form.PointProductsCombo',
'VFABRIC.util.StatusBarWrapper',
'VFABRIC.util.AjaxWrapper',
],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
fieldDefaults: {
anchor: '100%',
labelAlign: 'left', // 'top',
labelPad: 10,
allowBlank: false,
},
items: [
{
xtype: 'pointproductscombo',
submitValue: false,
},
{
xtype: 'filefield',
emptyText: 'Select an image to upload',
fieldLabel: 'Image',
buttonText: 'Browse',
name: FILEUPLOADFIELD_ID,
buttonConfig: {
iconCls: 'upload-icon',
},
listeners: {
'change': function(button, value) {
var form = me.getForm(),
file = me.getUploadFileName(form),
text = form.findField(VERSIONTEXT_ID),
splits = null,
versTxt = '';
if (file.indexOf('-') > 0) {
splits = file.split('-');
if (splits.length > 1) {
var numStr;
// Figure out which element has the version string. Start at the
// end and work backward.
for (var i = splits.length - 1; i >= 0; i--) {
if (splits [i].match(Globals.VERSION_REGEX)) {
numStr = versTxt = splits [i];
break;
}
}
// Strip off the extension if necessary.
for (var i = 0; i < Globals.installImageExts.length; i++) {
var foundExt = numStr.lastIndexOf(Globals.installImageExts [i]);
if (foundExt == numStr.length - Globals.installImageExts [i].length) {
versTxt = numStr.substring(0, foundExt);
// If there's not even one digit in the name, then reset the text
// to blank to force the user to enter it manually.
if (! versTxt.match(Globals.DIGIT_FOUND_MATCH)) {
versTxt = '';
}
break;
}
}
}
}
// Set the version string we got into the textfield.
text.setValue(versTxt);
}
},
},
{
xtype: 'textfield',
// hidden: true,
emptyText: 'Enter version of image',
fieldLabel: 'Version',
name: VERSIONTEXT_ID,
// validateOnChange: false,
validator: function(currValue) {
// Executing this validator causes the text field to lose focus, put it back
// in case the user was typing.
this.focus();
if (currValue === undefined || currValue == null || currValue == '' ||
currValue == 'Enter version of image') {
return 'The Version field must not be empty';
}
if (! currValue.match(Globals.DIGIT_FOUND_MATCH)) {
return 'The version field must contain at least one number';
}
return true;
},
},
],
});
me.callParent(arguments);
// Tell our base class keyNav handler what function to call if the user hits Return.
me.setKeyNavHandler(uploadImage);
},
createButtons: function() {
var me = this;
return [
{
text: 'Upload',
tooltip: 'Upload the install image specified to the server',
handler: uploadImageButton,
}
].concat(me.callParent());
},
getUploadFileName: function(form) {
var fileField = form.findField(FILEUPLOADFIELD_ID),
fileEl = fileField.fileInputEl.dom,
file = fileEl.files [0];
return file.name;
},
});
function uploadImage(scope) {
var form = VFABRIC.form.BaseFormPanel.getMyForm(scope),
me = this,
prodCombo = form.findField(Globals.POINTPRODUCTSCOMBO_ID),
prodName = prodCombo.getInternalValue(),
myUrl = Globals.generateInstallImageUrlForProduct(prodName),
fileField = form.findField(FILEUPLOADFIELD_ID),
fileEl = fileField.fileInputEl.dom,
versTxt = form.findField(VERSIONTEXT_ID);
if (form.isValid()) {
VFABRIC.form.BaseFormPanel.closeWindow(scope);
VFABRIC.util.AjaxWrapper.uploadInstallImage(versTxt.getValue(), myUrl, fileEl.files [0]);
}
}
function uploadImageButton() {
uploadImage(this);
}
Thank you,
Brian
In popup window, every FormPanel's buttons are partially occluded
