PDA

View Full Version : ComboBox Editor Picker auto enlarge



disller
26 Jun 2012, 9:22 PM
Hi There,

Anyone who met such a problem in grid in IE9, firfox and chrome are ok, which only occurs when there is a h-slide in the picker.

36566

When the mouse move on the picker list, the picker auto enlarge.

scottmartin
27 Jun 2012, 10:42 AM
Please provide a working example, or reference one of our examples that displays this behavior.

Scott.

disller
3 Jul 2012, 9:54 PM
I just want to provide a case for the issue, so I changed the ext 4 example cell editing


Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);

Ext.onReady(function(){
Ext.QuickTips.init();

function formatDate(value){
return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
}

Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'memory',
reader: {
type: 'json'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}],
data : [{common:'common',botanical:'botanical',light:'abc',price:0.5,availDate:'01/01/2011',indoor:true}]
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
forceSelection:true,
queryMode:'local',
store: [
['1111111111111111111','1111111111111111111111111']

],
//lazyRender: true,
//listClass: 'x-combo-list-small',
listConfig:{
minWidth:2,
autoScroll:true
}
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 55,
stopSelection: false
}, {
xtype: 'actioncolumn',
width:30,
sortable: false,
items: [{
icon: '../shared/icons/fam/delete.gif',
tooltip: 'Delete Plant',
handler: function(grid, rowIndex, colIndex) {
store.removeAt(rowIndex);
}
}]
}],
selModel: {
selType: 'cellmodel'
},
renderTo: 'editor-grid',
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
forceFit:true,
tbar: [{
text: 'Add Plant',
handler : function(){
// Create a model instance
var r = Ext.create('Plant', {
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availDate: Ext.Date.clearTime(new Date()),
indoor: false
});
store.insert(0, r);
cellEditing.startEditByPosition({row: 0, column: 0});
}
}],
plugins: [cellEditing]
});

// manually trigger the data store load
store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});
});


however it is really weird that there is no h-scroller in IE, but showing in chrome and firefox.
I don't know why?

Romick
4 Jul 2012, 12:47 AM
Can you try this config to your combobox?

listConfig: {
width: 200,
height: 300,
maxHeight: 300
},