The editor will not disappear when tab changes.
Attachment 36824Attachment 36823
The Gird's hide behavior execute, but the cellediting's completeEdit method is not invoked
test with IE8 and Extjs 4.1.0gpl
Printable View
The editor will not disappear when tab changes.
Attachment 36824Attachment 36823
The Gird's hide behavior execute, but the cellediting's completeEdit method is not invoked
test with IE8 and Extjs 4.1.0gpl
Please try this using 4.1.1RC2 to see if the problem is corrected.
Does this only happen in IE8?
Scott.
I have a testcase for this and cannot repro in Chrome or IE7,8.
Drop this into examples/grid as an HTML file
Code:<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ux/css/CheckHeader.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.ux.CheckColumn'
]);
Ext.require('*');
Ext.onReady(function() {
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: 'ajax',
// load remote data using HTTP
url: '../../examples/grid/plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}],
autoLoad: 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,
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
],
lazyRender: true,
listClass: 'x-combo-list-small'
})
}, {
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'
},
title: 'Edit Plants',
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]
});
new Ext.tab.Panel({
style: 'margin:20px',
height:500, width: 800,
renderTo: document.body,
items: [grid, {title: 'other'}]
});
});
</script>
</head>
<body>
</body>
</html>