PDA

View Full Version : Disabled Panel Changes Position



BlueZealot
10 Mar 2011, 6:45 AM
Hi,
I have a gridPanel, a panel, and a formPanel in my window's layout. The gridPanel lays across the top width of both the panel and formPanel. Both panel and formPanel are the same size, side-by-side. Initially the gridPanel and panel are enabled and the formPanel disabled. When the edit button is pressed, the gridPanel and panel are disabled, and the formPanel enabled in order to edit data in that panel.

For some reason...
- when both the gridPanel and panel are disabled the panel moves down a little less than halfway down the window.
- when only the panel is disabled, and the gridPanel is left active, the panel does NOT move down
- ALSO, this happens in ExtJS designer! When I select the panel in ExtJS Designer and toggle the "disabled" field so that it is checked, the panel moves down so the top of it is in line with the bottom of the formPanel.
- When this happens in ExtJS Designer, the absolute position values DO NOT change.

Attached is the ExtJS Designer file, so you can see what I'm talking about. Below is the .js code.





sendBillTo = Ext.extend(sendBillToUi, {
initComponent: function() {
sendBillTo.superclass.initComponent.call(this);
this.closeButtonSendBillTo.on('click', this.onButtonCancel, this);
this.submitButtonSendBillTo.on('click', this.onButtonProcess, this);
this.editButtonSendBillTo.on('click', this.onButtonEdit, this);
this.cancelEditButtonSendBillTo.on('click', this.onButtonCancelEdit, this);
this.clearFieldsButtonSendBillTo.on('click', this.onButtonClear, this);
this.separatePolicyBillingYes.on('check',
this.onCheckSeparatePolicyBillingYes, this);
this.removeInfoCheckBox.on('check', this.onCheckRemoveInfo, this);
this.foreignAddress.on('check', this.onCheckForeignAddress, this);
this.accountComboSendBillTo.on('select', this.onSelectAccountCombo, this);
this.policyInfoGridPanel.on('rowclick', this.onRowClickPolicyInfo, this);
this.policyInfoGridPanel.selModel.on('rowselect', this.onRowSelectPolicyInfo, this);
clearAllDetails();
},
onButtonCancel: function(){
Ext.MessageBox.confirm('Close Send Bill To','You will lose all unsubmitted changes.'
+ '<br /><br /> Continue?', closeWindow);
},
onButtonProcess: function(){
},
onButtonClear: function(button, e){
Ext.MessageBox.confirm('Clear All Fields','This will clear all fields, ' +
'are you sure you want to continue?', clearAllFields);
},
onButtonEdit: function(button, e){
//Ext.getCmp('policyInfoGridPanel').suspendEvents();
//Ext.getCmp('policyInfoGridPanel').selModel.suspendEvents();
Ext.getCmp('policyInfoGridPanel').disable();

Ext.getCmp('currentPanelSendBillTo').disable();
Ext.getCmp('editPanelSendBillTo').enable();
Ext.getCmp('submitButtonSendBillTo').enable();
disableForeignAddress();
detailToEdit(Ext.getCmp('policyInfoGridPanel').selModel.getCount());
},
onButtonCancelEdit: function(button, e){
//Ext.getCmp('policyInfoGridPanel').resumeEvents();
//Ext.getCmp('policyInfoGridPanel').selModel.resumeEvents();
Ext.getCmp('policyInfoGridPanel').enable();

Ext.getCmp('currentPanelSendBillTo').enable();
Ext.getCmp('editPanelSendBillTo').disable();
Ext.getCmp('submitButtonSendBillTo').disable();
},
onCheckSeparatePolicyBillingYes : function(checkBox, checked){
if(checked){
Ext.MessageBox.confirm('Change Separate Policy Billing','This will remove '
+ 'all Send Bill To associations, and the mailing address will default to '
+ 'the policy address. <br /><br />Continue?', this.changeSPBToYes);
}else if(!Ext.getCmp('removeInfoCheckBox').getValue()){
Ext.getCmp('submitButtonSendBillTo').disable();
Ext.getCmp('removeInfoCheckBox').enable();
Ext.getCmp('editButtonSendBillTo').enable();
}
},
changeSPBToYes: function(btn){
if(btn == 'yes'){
Ext.getCmp('editButtonSendBillTo').disable();
Ext.getCmp('removeInfoCheckBox').disable();
Ext.getCmp('submitButtonSendBillTo').enable();
}else{
Ext.getCmp('separatePolicyBillingYes').setValue(false);
}
},
onCheckRemoveInfo: function(checkBox, checked){
if(checked){
Ext.MessageBox.confirm('Remove Current Info','This will remove '
+ 'all Send Bill To associations for this policy.'
+ '<br /><br />Continue?', this.checkRemove);
}else if(!Ext.getCmp('separatePolicyBillingYes').getValue()){
Ext.getCmp('submitButtonSendBillTo').disable();
Ext.getCmp('separatePolicyBillingYes').enable();
Ext.getCmp('editButtonSendBillTo').enable();
}
},
checkRemove: function(btn){
if(btn == 'yes'){
Ext.getCmp('editButtonSendBillTo').disable();
Ext.getCmp('separatePolicyBillingYes').disable();
Ext.getCmp('submitButtonSendBillTo').enable();
}else{
Ext.getCmp('removeInfoCheckBox').setValue(false);
}
},
onCheckForeignAddress: function(checkBox, checked){
if(checked){
enableForeignAddress();
}else{
disableForeignAddress();
}
},
onSelectAccountCombo: function(combo, record, index){
var account = record.get("account");
Ext.getCmp('policyInfoGridPanel').store.filter('account', account);
},
onRowClickPolicyInfo: function(grid, rowIndex, e){
var record = Ext.getCmp('policyInfoGridPanel').store.getAt(rowIndex);
Ext.getCmp('detailAccount').setValue(record.json.account);
Ext.getCmp('detailName1').setValue(record.json.name1);
Ext.getCmp('detailName2').setValue(record.json.name2);
Ext.getCmp('detailAddress1').setValue(record.json.address1);
Ext.getCmp('detailAddress2').setValue(record.json.address2);
Ext.getCmp('detailCityTown').setValue(record.json.cityTown);
if(record.json.country != ""){
enableDetailForeignAddress();
Ext.getCmp('detailCountry').setValue(record.json.country);
Ext.getCmp('detailStateProvince').setValue(record.json.stateProvince);
Ext.getCmp('detailPostalCode').setValue(record.json.postalCode);
Ext.getCmp('detailState').setValue('');
Ext.getCmp('detailZipCode').setValue('');
}else{
disableDetailForeignAddress();
Ext.getCmp('detailCountry').setValue('');
Ext.getCmp('detailStateProvince').setValue('');
Ext.getCmp('detailPostalCode').setValue('');
Ext.getCmp('detailState').setValue(record.json.state);
Ext.getCmp('detailZipCode').setValue(record.json.zipCode);
}
Ext.getCmp('editButtonSendBillTo').enable();
Ext.getCmp('removeInfoCheckBox').enable();
Ext.getCmp('separatePolicyBillingYes').enable();
},
onRowSelectPolicyInfo : function(checkModel, rowIndex, record){
var c = checkModel.getCount();
console.log(c + ' rows selected');
}
});

function detailToEdit(checkCount){
if(checkCount <= 1){
Ext.getCmp('name1').setValue(Ext.getCmp('detailName1').getValue());
Ext.getCmp('name2').setValue(Ext.getCmp('detailName2').getValue());
Ext.getCmp('address1').setValue(Ext.getCmp('detailAddress1').getValue());
Ext.getCmp('address2').setValue(Ext.getCmp('detailAddress2').getValue());
Ext.getCmp('cityTown').setValue(Ext.getCmp('detailCityTown').getValue());
if(Ext.getCmp('detailForeignAddress').getValue() == 'YES'){
Ext.getCmp('country').setValue(Ext.getCmp('detailCountry').getValue());
Ext.getCmp('stateProvince').setValue(Ext.getCmp('detailStateProvince').getValue());
Ext.getCmp('postalCode').setValue(Ext.getCmp('detailPostalCode').getValue());
Ext.getCmp('state').setValue("");
Ext.getCmp('zipCode').setValue("");
enableForeignAddress();
}else{
Ext.getCmp('country').setValue("");
Ext.getCmp('stateProvince').setValue("");
Ext.getCmp('postalCode').setValue("");
Ext.getCmp('state').setValue(Ext.getCmp('detailState').getValue());
Ext.getCmp('zipCode').setValue(Ext.getCmp('detailZipCode').getValue());
disableForeignAddress();
}
}else{
//TODO:
}
}
function closeWindow(btn){
if(btn == 'yes' || btn == true){
var win = Ext.getCmp('sendBillTo');
win.close();
enableDisableButtons(false);
}
}
function clearAllFields(btn){
if(btn == 'yes'){
Ext.getCmp('name1').setValue("");
Ext.getCmp('name2').setValue("");
Ext.getCmp('address1').setValue("");
Ext.getCmp('address2').setValue("");
Ext.getCmp('cityTown').setValue("");
Ext.getCmp('state').setValue("");
Ext.getCmp('zipCode').setValue("");
Ext.getCmp('country').setValue("");
Ext.getCmp('stateProvince').setValue("");
Ext.getCmp('postalCode').setValue("");
}
}
function clearAllDetails(){
Ext.getCmp('detailAccount').setValue("");
Ext.getCmp('detailName1').setValue("");
Ext.getCmp('detailName2').setValue("");
Ext.getCmp('detailAddress1').setValue("");
Ext.getCmp('detailAddress2').setValue("");
Ext.getCmp('detailCityTown').setValue("");
Ext.getCmp('detailState').setValue("");
Ext.getCmp('detailZipCode').setValue("");
Ext.getCmp('detailForeignAddress').setValue("");
Ext.getCmp('detailCountry').setValue("");
Ext.getCmp('detailStateProvince').setValue("");
Ext.getCmp('detailPostalCode').setValue("");
Ext.getCmp('detailPolicy1').setValue("");
Ext.getCmp('detailPolicy2').setValue("");
Ext.getCmp('detailPolicy3').setValue("");
Ext.getCmp('detailPolicy4').setValue("");
Ext.getCmp('detailPolicy5').setValue("");
}
function enableForeignAddress(){
Ext.getCmp('labelState').disable();
Ext.getCmp('state').disable();
Ext.getCmp('labelZipCode').disable();
Ext.getCmp('zipCode').disable();

Ext.getCmp('labelCountry').enable();
Ext.getCmp('country').enable();
Ext.getCmp('labelStateProvince').enable();
Ext.getCmp('stateProvince').enable();
Ext.getCmp('labelPostalCode').enable();
Ext.getCmp('postalCode').enable();

Ext.getCmp('foreignAddress').setValue(true);
}
function disableForeignAddress(){
Ext.getCmp('labelState').enable();
Ext.getCmp('state').enable();
Ext.getCmp('labelZipCode').enable();
Ext.getCmp('zipCode').enable();

Ext.getCmp('labelCountry').disable();
Ext.getCmp('country').disable();
Ext.getCmp('labelStateProvince').disable();
Ext.getCmp('stateProvince').disable();
Ext.getCmp('labelPostalCode').disable();
Ext.getCmp('postalCode').disable();

Ext.getCmp('foreignAddress').setValue(false);
}
function enableDetailForeignAddress(){
Ext.getCmp('detailLabelZipCode').disable();
Ext.getCmp('detailLabelState').disable();
Ext.getCmp('detailLabelCountry').enable();
Ext.getCmp('detailLabelStateProvince').enable();
Ext.getCmp('detailLabelPostalCode').enable();
Ext.getCmp('detailForeignAddress').setValue('YES');
Ext.getCmp('detailZipCode').disable();
Ext.getCmp('detailState').disable();
Ext.getCmp('detailCountry').enable();
Ext.getCmp('detailStateProvince').enable();
Ext.getCmp('detailPostalCode').enable();
}
function disableDetailForeignAddress(){
Ext.getCmp('detailLabelZipCode').enable();
Ext.getCmp('detailLabelState').enable();
Ext.getCmp('detailLabelCountry').disable();
Ext.getCmp('detailLabelStateProvince').disable();
Ext.getCmp('detailLabelPostalCode').disable();
Ext.getCmp('detailForeignAddress').setValue('NO');
Ext.getCmp('detailZipCode').enable();
Ext.getCmp('detailState').enable();
Ext.getCmp('detailCountry').disable();
Ext.getCmp('detailStateProvince').disable();
Ext.getCmp('detailPostalCode').disable();
}

BlueZealot
10 Mar 2011, 6:51 AM
Attached are screenshots of it in action inside the browser. Happens across Firefox 3, IE7, and Chrome.

BlueZealot
10 Mar 2011, 11:42 AM
bump for any ideas?

BlueZealot
11 Mar 2011, 8:18 AM
Came up with a workaround.


Ext.getCmp('policyInfoGridPanel').suspendEvents();
Ext.getCmp('policyInfoGridPanel').selModel.lock();

Locked the gridPanel and suspended events so selections can't be made so I don't have to disable the whole panel and therefore prevent that weird bug.