PDA

View Full Version : Problem with hbox and flex



issc
1 Feb 2011, 8:12 AM
Hi,

I have a problem with flex on the TextField this.textValue. If I maximize the browser window the textfield grows which it should be. If I restore my browser window the textfield does not shrink accordingly.

Thanks for your help.


panelQueryFields = function (config) {
if (!config) config = {};

Ext.QuickTips.init();
Ext.reg('xdatetime', Ext.ux.form.DateTime);

this.buttonAdd = new Ext.Button({
iconCls: 'add16'
});

this.buttonDelete = new Ext.Button({
iconCls: 'delete16'
});

this.textValue = { xtype: 'textfield', emptyText: 'Values here...', flex: 1 };

this.buttonSearch = new Ext.Button({ text: 'Search' });

config = {
items: [this.buttonAdd, this.buttonDelete, this.textValue, this.buttonGetValues, this.buttonSearch],
defaults: { margins: '5, 5, 5, 5' },
border: true,
title: 'test',
autoScroll: true,
height: 65,
layout: 'hbox'
};

Ext.apply(this, config);

panelQueryFields.superclass.constructor.call(this, config);
};

//Extend the class as an ArrayStore
Ext.extend(panelQueryFields, Ext.Panel);


doQuery = function (config) {
if (!config) config = {};

Ext.QuickTips.init();
Ext.reg('xdatetime', Ext.ux.form.DateTime);

var myTestPanel = new panelQueryFields();

var checkLatestReport = new Ext.form.Checkbox({
boxLabel: 'Only Latest Report',
checked: true,
margins: '10, 0, 0, 10'
});

config = {
items: [myTestPanel],
autoScroll: true,
margins: '10, 10, 10, 10'
};

Ext.apply(this, config);

doQuery.superclass.constructor.call(this, config);
};

Ext.extend(doQuery, Ext.Panel);

MrSparks
2 Feb 2011, 4:36 AM
Maybe?


this.textValue = { xtype: 'textfield', emptyText: 'Values here...', flex: 1, autoWidth: true };

Condor
2 Feb 2011, 4:52 AM
IMHO you should NEVER use autoWidth:true (it's completely unpredictable).

The problem is that your doQuery panel doesn't have any layout. I recommend using layout:'anchor' and making myTestPanel anchor:'0' (or anchor:'-'+Ext.getScrollBarWidth() if you expect it to scroll).

issc
8 Feb 2011, 1:11 AM
THX