PDA

View Full Version : Elements in cell editor are shifted



sdd0
11 May 2014, 11:01 PM
I create a cell editor grid but the elements in cell editor are shifted. You can see the picture below, elements are not fit into the cell, does anyone know what's wrong?

48974


48976

sample code:

viewport.js


Ext.define('zldapp.view.Viewport', {
extend: 'Ext.Viewport',
alias: ['widget.viewport'],
controllers:['viewport.viewport'],
requires:['zldapp.view.zytab.zyTab'],

initComponent: function() {
var me = this;




Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone','work'],
data: {
'items': [{
"name": "Lisa",
"email": "[email protected]",
"phone": "555-111-1224",
"work": 0
}, {
"name": "Bart",
"email": "[email protected]",
"phone": "555-222-1234",
"work": 2
}, {
"name": "Homer",
"email": "[email protected]",
"phone": "555-222-1244",
"work": 1
}, {
"name": "Marge",
"email": "[email protected]",
"phone": "555-222-1254",
"work": 0
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});




editorgrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
anchor: '-50',

columns: [{
header: 'Name',
width: 100,
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
width: 100,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Work',
dataIndex: 'work',
width: 130,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
[0,'Engineer'],
[1,'Doctor'],
[2,'Lawyer']
],
lazyRender: true,
listClass: 'x-combo-list-small'
}
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
height: 200,
width: 200,
listeners: {
cellmousedown: function(grid, td, cellIndex, record, tr, rowIndex, e, eOpts){
grid.editingPlugin.startEditByPosition({row: rowIndex, column: cellIndex});
return false;
}
}
});



Ext.apply(me, {
layout: 'border',
title: 'ZyWALL Serial',
id : 'viewport',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
baseCls:'x-panelt',
height:50
},
Ext.create('zldapp.view.treepanel.treepanel')
,{

xtype:'zytab',
header:false,
region:'center',
id: 'content-panel',
bodyStyle: 'background:none;',
layout: 'fit',
border: false,
margins:'0 5 5 0',
items:[
{
id: 'dashboardForm',
header: false,
border: false,
items: [editorgrid]

}

]
}],
renderTo: Ext.getBody()
});

me.callParent(arguments);
}
});


zytab.js


Ext.define('zldapp.view.zytab.zyTab', {
alias: 'widget.zytab',
extend: 'Ext.TabPanel',
controllers:['zytab.zyTab'],
xtype: 'zytab',
initComponent: function() {
Ext.apply(this, {

id: 'zytabpanel',
plain: true,
defaults:{layout:'fit'}
});

this.callParent(arguments);
}
});

jsakalos
11 May 2014, 11:10 PM
Is it a Sencha Cmd generated application? If yes, fix all "synchronous warnings" and rebuild. It is possible that after you add classes to the app the previous css is still used that may not contain all required styles. (Re)building of the app should fix it.

sdd0
11 May 2014, 11:47 PM
Hi jsakalos,

Thank you for reply. My application is not created by sencha cmd, There are three folders in ext\resources:

48981

Besides rebuilding by sencha cmd, how can I check what is missing in my css folder?

jsakalos
12 May 2014, 1:46 AM
You should include "resources/css/ext-all.css" or "resources/css/ext-all-debug.css" in that case.

sdd0
13 May 2014, 12:35 AM
My css folder is like below, the files you mentioned are included. I think that's not the root cause.

48995