PDA

View Full Version : Combo is not taking proper width in ExtJS 4.1



AtulDawkhare
21 Jun 2012, 9:00 PM
Hi
I have recently upgraded my Ext version from 4.0.7 to 4.1

I have Grid with combo attached at the top using "tbar" config.
Now the problem that I am facing is even if there is data or no data , my combo is not taking proper width. I have given width then also it is not working properly.

I have attached image for reference please have a loot at it.
36454
Here is my Grid Code



Ext.create('Ext.grid.Panel', {
id: 'SourceGridPanelId',
forceFit: true,
autoScroll:true,
store: sourceGridStore,
sortableColumns:false,
enableColumnHide:false,
tbar: createSourceSiteCombo(sourceSiteStore),


Here is my Combo Code


var sourceCombo= Ext.create('Ext.form.ComboBox', {
id: "sourceSiteID",
fieldLabel:'Select Site',
inputId: "sourceSiteID_input",
store: sourceSiteStore,
queryMode: 'local',
displayField: 'sourceSiteName',
valueField: 'sourceSiteId',
width:200
});


Please suggest what is missing here.

scottmartin
22 Jun 2012, 9:14 AM
See if this works for you:
What version of 4.1 are you using? 4.1.1 RC2?



var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Name',
store: store,
queryMode: 'local',
displayField: 'name',
valueField: 'name',
width: 250
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
tbar: [
{ text: 'My Button' },'-',
combo
],
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change'}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});


Several other quick notes:

Ext.create('Ext.grid.Panel', {
id: 'SourceGridPanelId', // do not use id, please use itemId
forceFit: true, // not recommended, use flex for each column
autoScroll:true, // not needed for grid, handled internally
store: sourceGridStore,
sortableColumns:false,
enableColumnHide:false,
tbar: createSourceSiteCombo(sourceSiteStore),

Regards,
Scott.

AtulDawkhare
25 Jun 2012, 2:47 AM
Thanks for your reply.

I am using Ext version 4.1.0

By using the code that you gave, I am still getting same select Box.

36502


Can you please suggest what is missing here ?

Animal
25 Jun 2012, 2:54 AM
What version of Chrome is that?

And does it do the same thing when you run through an HTTP server?

AtulDawkhare
25 Jun 2012, 3:15 AM
Hi my Chrome version is 19.0.1084.56


yes, I have made changes in my app. and found that still I am getting the same combo.

Please suggest

scottmartin
25 Jun 2012, 5:12 AM
I am using Ext version 4.1.0

You tried using 4.1.1 RC2 to see if you have the same problem?

Scott.

AtulDawkhare
25 Jun 2012, 5:17 AM
I don't have the 4.1.1. Rc2 at my local environment.

Can you please tell me the same code used to work with 4.0.7 , but when I upgrade my Ext version, it started crashing.
But what is missing here ?

Note:- I have to solved this using 4.1

So please suggest me what can be done here.

scottmartin
25 Jun 2012, 5:35 AM
I don't have the 4.1.1. Rc2 at my local environment.
So you are not able to download 4.1.1 to a new DIR for testing?


Can you please tell me the same code used to work with 4.0.7 , but when I upgrade my Ext version, it started crashing.
There are simply too many changes from 4.07 to 4.1 layouts to provide a simple answer for this.


Note:- I have to solved this using 4.1
(misread/comment updated): Are you waiting for a non RC release?


So please suggest me what can be done here.
This sounds like the problem is not solved?

I was able to reproduce your problem use 4.1.0 and using jsFiddle.net using 4.1.0

This seems to be a bug in 4.1.0 It is suggested that you upgrade to 4.1.1, or use the solution you found yourself.

Scott

AtulDawkhare
25 Jun 2012, 5:42 AM
Sorry its my spell mistake,

I have not found the solution yet.

Can you please suggest me what can be done , if you are also able to reproduce the same issue at your end?

also if this is a bug then Can you please suggest me what will be the work around for this? if I don't go for 4.1.1

Animal
25 Jun 2012, 6:00 AM
It's a problem with using the file:// protocol.

Use an HTTP server instead if you must stay on 4.1.0

AtulDawkhare
25 Jun 2012, 6:07 AM
it's not a file protocol.

the screen shot that i have attached you can see there, I have used localhost.

I am using the localhost only i.e. using http protocol. Also in my working web app. it is not working as it is expected.

scottmartin
25 Jun 2012, 2:37 PM
I would suggest moving to 4.1.1. The GA release will be very soon.

Scott.

baardos
11 Jul 2012, 8:06 AM
Hi Guys,

I am seeing similar issue on Chrome. My Combo is nested within a Panel. It seems to me like a layout issue when Combo is nested within a container.

Does it ring a bell? Any recommendations?

Regards,
Bartek

scottmartin
11 Jul 2012, 8:14 AM
I am seeing similar issue on Chrome. My Combo is nested within a Panel

Nested for layout issues (extra panel), or just in a form?

Do you have some example code and a screenshot?

Scott.

tvanzoelen
11 Jul 2012, 8:23 AM
Looks like the label is eating space. What if you tweaka little by setting labelwidth?

baardos
12 Jul 2012, 1:08 AM
The reason for nesting is that I built a component that contains a couple of components including a combo. The code looks more less like that:




Ext.define('ThereisComboInside' ,{
extend: 'Ext.panel.Panel',

value: null,
originalValue: null,
multiSelect: false,
valueField: '',
displayField: '',
width: 200,
height: 47,
layout:'fit',

//....

items: {
xtype : 'combobox',
autoScroll:true,
width: this.width,
multiSelect: this.multiSelect,
height: 50,
editable: false,
labelAlign:'top',
autoSelect: false,
valueField: this.valueField,
displayField: this.displayField,
columnLines: true,
isEditing: false,
store: this.store,
value: this.value,
originalValue: this.originalValue,
listeners: {
//.....
}

};

//....

});



As you can see I've tried the fit layout but it did not help and originally I did not specify anything and effect was the same.
One thing I noticed was that we had customized CSS. When I applied default CSS from ext-js 4.1.1 the combos were displayed properly - at least when it comes to displaying the input field, the trigger and width of the list when expanded. It seems that to get things done completely we'll have to go through the theming exercise as described here: http://www.sencha.com/learn/theming/. Hopefully it will still work with 4.1.1.