PDA

View Full Version : Window contents shifting?



loveforvdubs
13 Oct 2010, 6:49 AM
I have a window with a form panel inside of it. I have several hidden fields and after a certain point I change the height of the window and then show the hidden fields. However, when I do this all of the fields are shifted upwards. Is there someway to make sure that they stay put?

Animal
13 Oct 2010, 6:53 AM
It doesn't work like that if you do it right.

What layout are you asking the Window to use to manage the size of the child FormPanel?

loveforvdubs
13 Oct 2010, 6:59 AM
Sorry I'm a bit of a ExtJs newb. My window is using 'fit' layout.

Condor
13 Oct 2010, 7:05 AM
Can you post your entire layout config?

Animal
13 Oct 2010, 7:09 AM
Fit layout is the right way.

There must be some other layer of nesting. As Condor said, we'd need to see well formatted code.

loveforvdubs
13 Oct 2010, 7:19 AM
I changed the window's layout to auto and this fixed the problem. Thanks for all your help.

Condor
13 Oct 2010, 7:21 AM
layout:'auto' is usually not a good idea. Does your window still look ok when you resize it?

loveforvdubs
13 Oct 2010, 7:53 AM
Condor, I thought it worked at first but I was not correct. I have reverted back to fit. I am showing and expanding twice and it works for the first one but on the second one the contents get shifted. I will post my code, but I most apologize, it is pretty long and convoluted. Here is the config:



// Create the TestCase form
AsiInventory.CheckOutForm = Ext.extend(Ext.FormPanel,
{
// Over-ridable config values
//title:'Test Case',
itemId:'ConfigInstanceForm',
frame:false,
border:false,
padding:10,
// ===============================================================================================
// Initialize the object
// ===============================================================================================
initComponent:function(){
// Create a reference to this
var MyForm = this;
var isBarcode = false;

// Setup the config
var config = {
url:'php2/checkOutHandler.php',
defaultType: 'textfield',
defaults: {
width: 167
},
autoScroll:false,
items: [
{
fieldLabel: 'Part Number',
itemId: 'invPartNumber',
name: 'invPartNumber',
listeners:{
change:function(textField,newValue){
if (newValue.indexOf('|',0) == -1){
//Entry is not bar code
//textField.nextSibling().show();
//textField.nextSibling().label.show();
//textField.nextSibling().focus();
} else {
//Entry is bar code
MyForm.whichSplit(newValue);
isBarcode = true;
}
}
}
},{
fieldLabel: 'Rev',
itemId: 'invRev',
name: 'invRev',
},{
fieldLabel: 'PO Number',
itemId: 'invPO',
name: 'invPO',
listeners:{
change:function(textField,newValue){
if (isBarcode == false){
MyForm.fillPO(MyForm.get('invPartNumber').getValue(), MyForm.get('invRev').getValue(), textField.getValue());
}
}
}
},{
xtype: 'displayfield',
fieldLabel: 'Part Description',
itemId: 'description',
hidden: true,
hideLabel: true,
},{
xtype: 'displayfield',
fieldLabel: 'Vendor',
itemId: 'vendor',
hidden: true,
hideLabel: true
},{
xtype: 'hidden',
hidden: true,
itemId: 'vendorKey'
},{
xtype: 'fieldset',
padding: 0,
itemId: 'vendorSet',
width: 325,
border:false,
hidden: true
},{
xtype: 'displayfield',
fieldLabel: 'Quantity In Stock',
itemId: 'qtyInStock',
hidden: true,
hideLabel: true,
},{
fieldLabel: 'Quantity taken',
itemId: 'qtyTaken',
name: 'qtyTaken',
hidden: true,
hideLabel: true
},{
xtype: 'hidden',
hidden: 'true',
itemId: 'diff',
name: 'diff'
}
],
buttons: [
{
itemId:'SaveButton',
text:'Submit',
handler:function(){
//alert('qtyTake: ' + MyForm.get('qtyTaken').getValue() + ' qtyInStock: ' + MyForm.get('qtyInStock').getValue());
if (parseInt(MyForm.get('qtyTaken').getValue()) > parseInt(MyForm.get('qtyInStock').getValue())){
Ext.Msg.show({
title: 'Warning',
msg: 'Not engough in stock',
buttons: Ext.Msg.OK,
fn: function(btn){
MyForm.get('qtyTaken').selectText();
}
});
} else {
var temp = MyForm.get('qtyInStock').getValue() - MyForm.get('qtyTaken').getValue();
MyForm.get('diff').setValue(temp);
MyForm.getForm().submit({
success:function(form, action){
MyForm.findParentByType('window').close();
if(MyForm.callback != undefined){
MyForm.callback(action.result.success, action.result);
}
},
failure:function(form, action){
Ext.Msg.alert('Save Failed', 'Saving the record failed: '+action.result.message);
if(MyForm.callback != undefined){
MyForm.callback(false);
}
}
});
}
}
},{
itemId:'resetButton',
text:'Reset',
handler:function(form, action){
MyForm.getForm().reset();
MyForm.get('invPartNumber').focus();
}
}
]
};

// Setup the defaults
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

// Parental Constructor
AsiInventory.CheckOutForm.superclass.initComponent.call(this);
},

// Class Methods

whichSplit:function(fullNum){
var MyForm = this;
if (fullNum.substr(0,1)=="B"){
MyForm.splitStringBin(fullNum);
} else {
MyForm.splitString(fullNum);
}
},

//Split bin label into its component parts
splitStringBin:function(fullNum) {
var MyForm = this;
var splitNum = fullNum.split("|");
partNum = splitNum[0];
partNum = partNum.replace('B','');
revNum = splitNum[1];
poNum = splitNum[2];
MyForm.fillPO(partNum,revNum,poNum);
},

//split shipping label into its component parts
splitString:function(fullNum){
var MyForm = this;
var splitNum = fullNum.split("|");
partNum = splitNum[0];
revNum = splitNum[1];
qty = splitNum[2];
MyForm.fillPartAndRev(partNum,revNum,qty);
},

//Fill in form fields with data from shipping label
fillPartAndRev:function(num, rev, qty){
var MyForm = this;
MyForm.get('invPartNumber').setValue(num);
MyForm.get('invRev').setValue(rev);
//MyForm.get('invQtyOrdered').setValue(qty);
Ext.Ajax.request({
url: 'php2/AsiDataBot.php?action=loadlist&table=inventory',
params: {
query:'SELECT * FROM inventory WHERE invPartNumber="' + num + '" AND invRev="' + rev + '"',
},
method: 'POST',
success: function(response){
var obj = Ext.decode(response.responseText);
if (obj.total == 0) {
MyForm.get('newPart').setValue('1');
alert(MyForm.get('newPart').getValue());;
} else {
MyForm.get('description').setValue(obj.data[0].invDescription);
var vendorKey = obj.data[0].vendorKey;
Ext.Ajax.request({
url: 'php2/AsiDataBot.php?action=loadlist&table=vendor',
params: {
query: "SELECT * FROM vendor WHERE idVendor = '" + vendorKey + "';",
},
method: 'POST',
success: function(response){
var objVendor = Ext.decode(response.responseText);
MyForm.get('vendor').setValue(objVendor.data[0].vendorName);
}
});
}
},
failure: function(response){
Ext.Msg.alert('','failure')
}
});
},

//fill form with data from bin label
fillPO:function(partNum,revNum,poNum){
var MyForm = this;
MyForm.get('invPartNumber').setValue(partNum);
MyForm.get('invRev').setValue(revNum);
MyForm.get('invPO').setValue(poNum);
Ext.Ajax.request({
url: 'php2/AsiDataBot.php?action=loadlist&table=inventory',
params: {
query:'SELECT * FROM inventory WHERE invPartNumber="' + partNum + '" AND invRev="' + revNum + '"',
},
method: 'POST',
success: function(response){
var obj = Ext.decode(response.responseText);
if (obj.total == 0) {
MyForm.get('newPart').setValue('1');
alert(MyForm.get('newPart').getValue());
} else {
MyForm.get('description').setValue(obj.data[0].invDescription);
var vendorKey = obj.data[0].vendorKey;
Ext.Ajax.request({
url: 'php2/AsiDataBot.php?action=loadlist&table=vendor',
params: {
query: "SELECT * FROM vendor WHERE idVendor = '" + vendorKey + "';",
},
method: 'POST',
success: function(response){
var objVendor = Ext.decode(response.responseText);
MyForm.get('vendor').setValue(objVendor.data[0].vendorName);
MyForm.get('description').show();
MyForm.get('description').label.show();
MyForm.get('vendor').show();
MyForm.get('vendor').label.show();
MyForm.get('vendorSet').show();
MyForm.findParentByType('window').setHeight(280);
var position = MyForm.getPosition();
var newY = parseInt(position[1]) - 80;
MyForm.findParentByType('window').setPagePosition(position[0],newY);
MyForm.doLayout();
}
});
}
},
failure: function(response){
Ext.Msg.alert('','failure')
}
});

var allocationStore = new Ext.data.JsonStore({
autoDestroy:true,
url:'php2/AsiDataBot.php?action=loadtable&table=allocation',
autoLoad: true,
method:'GET',
root:'data',
sortInfo: {
field: 'allocationJob',
direction: 'ASC',
},
idProperty:'id',
fields:[
{name: 'idallocation'},
{name: 'allocationPartNumber'},
{name: 'allocationRevNumber'},
{name: 'allocationPO'},
{name: 'allocationJob'},
{name: 'allocationQty'},
{name: 'allocationTime'},
{name: 'allocationOriginalAllocation'},
{name: 'allocationAvailible'}
],
listeners: {
load: function(){
allocationStore.filter([
{
fn: function(record){
return record.get('allocationPartNumber') === partNum;
},
scope: this
},{
property: 'allocationRevNumber',
value: revNum
},{
property: 'allocationPO',
value: poNum
}
]);
}
}
});

var allocationCombo = new Ext.form.ComboBox({
store: allocationStore,
displayField: 'allocationJob',
itemId: 'idVendor',
name: 'allocationJob',
valueField: 'allocationJob',
fieldLabel: 'Vendor',
typeAhead:true,
emptyText: 'Select a job...',
triggerAction: 'all',
lastQuery: '',
listeners:{
select:function(combo,value){
MyForm.get('vendorKey').setValue(value.data.idVendor);
Ext.Ajax.request({
url: 'php2/AsiDataBot.php?action=loadlist&table=inventory',
params: {
query:'SELECT * FROM allocation WHERE allocationPartNumber="' + partNum + '" AND allocationRevNumber="' + revNum + '" AND allocationPO="' + poNum + '" AND allocationJob = "' + combo.getValue() + '";',
},
method: 'POST',
success: function(response){
var obj = Ext.decode(response.responseText);
MyForm.get('qtyInStock').setValue(obj.data[0].allocationQty);
MyForm.get('qtyInStock').show();
MyForm.get('qtyInStock').label.show();
MyForm.get('qtyTaken').show();
MyForm.get('qtyTaken').label.show();
MyForm.findParentByType('window').setHeight(380);
var position = MyForm.getPosition();
var newY = parseInt(position[1]) - 100;
MyForm.findParentByType('window').setPagePosition(position[0],newY);
MyForm.doLayout();
MyForm.get('qtyTaken').focus();
},
failure: function(response){
Ext.Msg.alert('','failure')
}
});
}
}
});

MyForm.get('vendorSet').add(allocationCombo);
MyForm.doLayout();
//MyForm.get('vendor').setValue(objVendor.data[0].vendorName);

},

// ===============================================================================================
// ===============================================================================================
});

// Register the class
Ext.reg('asiinventory-checkoutform', AsiInventory.CheckOutForm);


And here is the window that shows the form



checkOut:function(){
var MyForm = this;

// Create a window for the config
var winOut = new Ext.Window({
title:'Check In Inventory',
width:325,
height:160,
autoScroll:false,
closable:true,
modal:true,
layout:'fit',
items: form = new AsiInventory.CheckOutForm({

}),
listeners:{
show:function(){
}
}
});

winOut.show();
}

Condor
15 Oct 2010, 5:01 AM
Are you using:

Ext.layout.FormLayout.prototype.trackLabels = true;