View Full Version : Selectbox height wrong

16 Jan 2011, 7:43 AM
Hi, I trie to make linked selectfields in a form in Sencha-Touch. No problem to populate the linked selectfield. But if I select another value the linked selectfield's dropdownmenu doesn't set its height properly. In fact the height is always the first one. In other words: first select populate the linked selectfield with 5 items. All next selects are showed in a dropdownmenu for 5 items height. Leaving the remaining room blank (see attached picture). If the first item populates the linked selectfield with 0 items, all subsequent selects are invisible because the 'window' height is always 0.

Is there a way to resize the dropdownmenu of the linked selectfield??

For those who are interested in how selectfields are linked:

xtype: 'selectfield',
required: true,
name : 'IncidentsoortId',
valueField: 'Id',
displayField: 'Incidentsoort',
store: 'incidentsoort',
// linked to next field in form with id: ProductselectfieldId
fn:function(combo, value) {
selectedincidentsoort = combo.getValue();
var productCmp = Ext.getCmp('ProductselectfieldId');
productCmp.setValue(' ');
// populate the next selectfield with new filtered store
servproductStore.filter('ProductclusterId', selectedincidentsoort);
label: 'Soort'
}, {
xtype: 'selectfield',
required: true,
id: 'ProductselectfieldId',
name : 'ProductId',
valueField: 'Id',
displayField: 'Product',
store: 'product',
label: 'Product'
}, {

16 Jan 2011, 8:13 AM
Can i see the config of each select field and the code to populate the 2nd field?

16 Jan 2011, 8:16 AM
Of course. I allready edit the original post.

16 Jan 2011, 8:23 AM
Here is a another picture that shows the dropdownmenu. This time the selected former dropdownmenu was empty.

16 Jan 2011, 8:27 AM
Hi pcr.
It seems to be a Sencha bug because the layout height is not auto updated.
Looking at the selectfield source, I suggest you to fix this issue manually updating the list panel height.
Suppose your selectfield has "mySelectField" id:

Ext.getCmp('mySelectField').getListPanel().setHeight(500); //Or any other value

This should able you to set the list height according to your needs.
Anyway I suggest you to post this issue on Sencha Bugs forum.

Hope this helps.

16 Jan 2011, 8:33 AM
Another 2 pictures. The first one after selecting 3 items are correct showed in the dropdown. The second picture reselect with 5 items.

16 Jan 2011, 8:33 AM
I post this issue on the bugs forum.

16 Jan 2011, 8:36 AM
Yes, if you need to fix this fast, you can use the trick i wrote you temporarely.

16 Jan 2011, 8:38 AM
Ok Andrea,

I will test it. Allthough you never know how big the dropdown will be.

16 Jan 2011, 8:53 AM

I (almost) this issue with this:

productCmp.getListPanel().setHeight(servproductStore.getCount() * 48);

Almost because some items are wrapped to a new line because they are to long for the dropdown. Then the height is not correct.

Thank you for helping. I Appriciate it very much. I'm glad because I know that linked selectfields can work (after the bug is solved).

16 Jan 2011, 10:02 AM
1) I don't like the use of getCmp. Static IDs are just a bad idea.
2) Right now, you assume each row is 48 pixels high except this won't be the same on iPod as on a tablet or a computer. Loop through the items of the list to get a sum of heights and update the panel.

16 Jan 2011, 10:16 AM
Hi Mitchel,

1) I don't know how to refer a field except with getCmp().
2) to fix it for all situations your suggestion is perfect. Maybe the devteam of Sencha Will soon make a final solution.

I'm not the JavaScript guru that can make anything fixed. I use a lot of trial and error ( tooooo many trial if you ask me). Maybe I give your solution.

Thanks for all your help and patience.

16 Jan 2011, 10:20 AM
Problem is, going through each item to get height is not the best solution. Yes, hopefully Sencha will fix this bug.

16 Jan 2011, 10:28 AM

I read about why not use getCmp. I understand that. But how would I do it without getCmp. Until now I use a lot of getCmp in my apps.

16 Jan 2011, 10:58 AM
Everything I do is extensible and abstracted. Meaning I extend components to inject what I want it to do. Then when I want to render a component, I make a reference it to a parent class.

So say I have 5 FormPanels. Since I know each FormPanel will have many things that are similar, I make a "master" FormPanel. Each of the 5 FormPanels will extend that "master" FormPanel. This is the basis of a great design. Abstract out as much as you can so that if you need to make a change, you only have to make the change in one spot and it affects all the components that extend it.

Now in my app, I make a reference to each FormPanel. Think of my app being a Panel named "App" and I need to render a FormPanel named "Login". I then make a reference on the App Panel to the Login FormPanel like this (within the Panel):

App = Ext.extend(Ext.Panel, {
buildLogin: function() {
this.Login = new App.LoginForm(); //App.LoginForm is an abstract class from the "master" FormPanel
return this.Login;
// building the App Panel
App.Main = new App();

So now, any code within the App Panel, I can reference the Login FormPanel by using this.Login. Outside, App.Main.Login will hold the Login FormPanel instance.

Now to get an instance of the username and password items under the Login FormPanel, you can do many things. For a Login FormPanel, you usually don't need to get individual fields but I will proceed.

using ref:
To setup a textfield with ref, you do this:

{ xtype: "textfield" name:"uname", fieldLabel: "Username", ref: "username" }

On the Login FormPanel, you can get this field by doing this:

var unameField = this.Login.username

Now you have the instance of the username TextField. Read more in the Docs about ref such as you can move the reference up the tree structure.

Now you can use itemId also:

{ xtype: "textfield" name:"uname", fieldLabel: "Username", itemId: "username" }

var unameField = this.Login.getComponent("username");

This is really similar to setting static IDs except you can have the same itemId around your app. Each itemId is only held to it's parent so if you have two forms and each form has a textfield with the same itemId, then you will be fine. However if each textfield has the same id, that will create conflict and you will only get the last added textfield.

Another way is using the structure:

So say you have 5 fields in your FormPanel, you can get each by doing this:

var firstField = form.getComponent(0);
var secondField = form.getComponent(1);
var thirdField = form.getComponent(2);
var fourthField = form.getComponent(3);
var fifthField = form.getComponent(4);

I have just demonstrated 4 different ways to get a reference without setting static IDs. I do a mixture of these but favor the first (setting reference like I did when adding the Login FormPanel to the App Panel) and ref. I use the setting reference to major components (like FormPanel) and ref for the major component's children.

18 Jan 2011, 3:23 PM
I posted a copy with a link to this thread in the Bug forum. Is this the right way to post a bug. It seems that no one (except one Extjs user) is interested in this maybe bug.