PDA

View Full Version : Grid combobox jumps around on first select.



denisputnam
16 Jan 2015, 11:34 PM
I have a grid with a combobox editor for the cell and when the grid first shows and I select the combobox, the drop down list jumps to a different part of the screen. This only happens on the first select. After that it behaves normally. Can someone tell me what I am doing wrong.

FYI, I am using the same store for the entire grid as wall as the combobox. Would that have anything to do with it?


Ext.define('MySchool.view.admin.ProfileGridAdminOnlyPanel', { extend: 'Ext.grid.Panel',
alias: 'widget.adminprofilegridadminonlypanel',


requires: [
'Ext.grid.column.Number',
'Ext.form.field.ComboBox',
'Ext.grid.column.CheckColumn',
'Ext.grid.column.Date',
'Ext.grid.View',
'Ext.grid.plugin.CellEditing'
],


itemId: 'admingridpanel',
maxHeight: 200,
minHeight: 200,
autoScroll: true,
title: 'School Admins',
forceFit: true,
store: 'admin.AdminProfileStore',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'id',
text: 'id',
format: '000000'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'adminId',
text: 'adminId',
format: '000000'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'adminviewId',
text: 'adminviewId',
format: '000000'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'schoolId',
text: 'schoolId',
format: '000000'
},
{
xtype: 'gridcolumn',
dataIndex: 'userName',
text: 'Admin User Name',
editor: {
xtype: 'combobox',
displayField: 'userName',
store: 'admin.AdminProfileStore',
valueField: 'userName'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'schoolName',
text: 'School Name'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'firstName',
text: 'First Name'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'middleName',
text: 'Middle Name'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'lastName',
text: 'Last Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'email',
text: 'Admin Email'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'phone1',
text: 'phone1'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'phone2',
text: 'phone2'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'address1',
text: 'address1'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'address2',
text: 'address2'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'city',
text: 'city'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'province',
text: 'province'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'postalCode',
text: 'postalCode'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'country',
text: 'country'
},
{
xtype: 'checkcolumn',
hidden: true,
itemId: 'adminprofilegridpanelenabled',
dataIndex: 'enabled',
text: 'Enabled?'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'version',
text: 'version',
format: '000000'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'whoUpdated',
text: 'Who Updated'
},
{
xtype: 'datecolumn',
hidden: true,
dataIndex: 'lastUpdated',
text: 'Last Updated'
},
{
xtype: 'datecolumn',
hidden: true,
dataIndex: 'createdDate',
text: 'Created Date'
},
{
xtype: 'datecolumn',
hidden: true,
dataIndex: 'dob',
text: 'dob'
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {


})
]
});


me.callParent(arguments);
}


});
51513

denisputnam
19 Jan 2015, 10:39 AM
I am not sure what the problem was, but I created a separate store for the combobox and that seemed to make the issue go away. As it turns out, using the grid's store didn't give me the results I wanted anyway.

As you can see in the code below, I use two different stores, one for the grid and another for the combobox.

I am not sure how the combobox name, valueField, and displayField are mapped to the dataIndex attribute in the grid cell, but this seems to work.

BTW, this was all done with Architect 3.1.x.


Ext.define('MySchool.view.admin.ProfileGridAdminOnlyPanel', { extend: 'Ext.grid.Panel',
alias: 'widget.adminprofilegridadminonlypanel',


requires: [
'Ext.grid.column.Number',
'Ext.form.field.ComboBox',
'Ext.grid.column.CheckColumn',
'Ext.grid.column.Date',
'Ext.grid.View',
'Ext.grid.plugin.CellEditing'
],


itemId: 'admingridpanel',
maxHeight: 200,
minHeight: 200,
autoScroll: true,
title: 'School Admins',
forceFit: true,
store: 'admin.AdminProfileStore',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
columns: [
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'id',
text: 'id',
format: '000000'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'adminId',
text: 'adminId',
format: '000000'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'adminviewId',
text: 'adminviewId',
format: '000000'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'schoolId',
text: 'schoolId',
format: '000000'
},
{
xtype: 'gridcolumn',
dataIndex: 'userName',
text: 'Admin User Name',
editor: {
xtype: 'combobox',
name: 'username',
displayField: 'userName',
store: 'admin.AdminStore',
valueField: 'userName'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'schoolName',
text: 'School Name'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'firstName',
text: 'First Name'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'middleName',
text: 'Middle Name'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'lastName',
text: 'Last Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'email',
text: 'Admin Email'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'phone1',
text: 'phone1'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'phone2',
text: 'phone2'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'address1',
text: 'address1'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'address2',
text: 'address2'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'city',
text: 'city'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'province',
text: 'province'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'postalCode',
text: 'postalCode'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'country',
text: 'country'
},
{
xtype: 'checkcolumn',
hidden: true,
itemId: 'adminprofilegridpanelenabled',
dataIndex: 'enabled',
text: 'Enabled?'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'version',
text: 'version',
format: '000000'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'whoUpdated',
text: 'Who Updated'
},
{
xtype: 'datecolumn',
hidden: true,
dataIndex: 'lastUpdated',
text: 'Last Updated'
},
{
xtype: 'datecolumn',
hidden: true,
dataIndex: 'createdDate',
text: 'Created Date'
},
{
xtype: 'datecolumn',
hidden: true,
dataIndex: 'dob',
text: 'dob'
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {


})
]
});


me.callParent(arguments);
}


});

Gary Schlosberg
20 Jan 2015, 6:18 AM
Glad to hear you got it working and thanks for posting a follow-up.