PDA

View Full Version : Uncaught TypeError: Cannot read property 'headerCt' of undefined



nimaous
19 Jun 2012, 2:06 AM
Hi
I append a add button for my grid panel with rowediting plugin

onButtonClick: function(button, e, options) {


var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
var store = this.getWaitersListStoreStore();
//var grid=Ext.ComponentQuery.query('#WaitersDataGrid');
console.log(button.id);
if (button.id == 'btt-add')
{
rowEditing.cancelEdit();
var model=this.getWaitersListDataModel();
var r = Ext.ModelManager.create({
customer:'selec user',
destination:'destination',
from_date:'date',
to_date:'date',
from_cost:'date',
to_cost:'date',
hotel_stars:'date',
airline:'date',
sure:false,
visited:false


},model);
store.insert(0,r);
rowEditing.startEdit(0, 0);


but when I click on add button I get this error :
Uncaught TypeError: Cannot read property 'headerCt' of undefined

redraid
19 Jun 2012, 3:32 AM
Create row editing plugin in grid initComponent function and store reference in grid (or use pluginId cfg, read plugin docs) -


// grid init component
initComponent: function () {
var me = this;

me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
autoCancel: true
});

me.plugins = [
me.rowEditing
];
}

then in you button click handler:


var store = this.getWaitersListStoreStore();
var grid=Ext.ComponentQuery.query('#WaitersDataGrid');
var rowEditing = grid.rowEditing;

console.log(button.id);
if (button.id == 'btt-add')
{
rowEditing.cancelEdit();
var model=this.getWaitersListDataModel();
var r = Ext.ModelManager.create({
customer:'selec user',
destination:'destination',
from_date:'date',
to_date:'date',
from_cost:'date',
to_cost:'date',
hotel_stars:'date',
airline:'date',
sure:false,
visited:false


},model);
store.insert(0,r);
rowEditing.startEdit(0, 0);

nimaous
19 Jun 2012, 4:23 AM
I did it but i got this error :
Uncaught TypeError: Cannot read property 'selModel' of undefined

here is my view code


Ext.define('MyApp.view.WaitersList', {
extend: 'Ext.window.Window',
// stores :['Customers','WaitersListStore'],
autoShow: true,
height: 536,
id: 'waiterLists',
width: 642,
autoScroll: true,
title: 'Waiters List',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'fieldcontainer',
height: 25,
id: 'DateContainer',
width: 516,
activeItem: 0,
layout: {
align: 'stretch',
type: 'hbox'
},
fieldLabel: '',
items: [
{
xtype: 'datefield',
id: 'from_date',
width: 194,
fieldLabel: 'از تاریخ',
format: 'Y-m-d',
flex: 0
},
{
xtype: 'datefield',
id: 'to_date',
width: 194,
fieldLabel: 'تا تاریخ',
format: 'Y-m-d'
}
]
},
{
xtype: 'multislider',
id: 'CostMultiSlider',
width: 516,
fieldLabel: 'هزینه',
increment: 20000,
keyIncrement: 0,
maxValue: 800000,
minValue: 40000,
values: [
10,
40
]
},
{
xtype: 'fieldcontainer',
height: 50,
width: 610,
layout: {
align: 'middle',
type: 'hbox'
},
fieldLabel: '',
labelPad: 3,
items: [
{
xtype: 'checkboxfield',
id: 'Sure',
fieldLabel: 'قطعی',
boxLabel: '',
flex: 0
},
{
xtype: 'combobox',
width: 258,
fieldLabel: 'نوع هتل',
labelPad: 0,
typeAhead: false,
flex: 1
},
{
xtype: 'textfield',
width: 172,
fieldLabel: 'مقصد',
flex: 1
}
]
},
{
xtype: 'panel',
height: 31,
id: 'DataPanel',
title: '',
dockedItems: [
{
xtype: 'fieldcontainer',
height: 43,
width: 100,
fieldLabel: '',
dock: 'top',
items: [
{
xtype: 'button',
id: 'btt-add',
text: 'اضافه کردن به لیست'
}
]
}
]
},
{
xtype: 'gridpanel',

id: 'WaitersDataGrid',
title: 'Waiters',
store: 'WaitersListStore',
initComponent: function () {


var me = this;


me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
autoCancel: true,
ptype: 'rowediting',
clicksToEdit: 1,
clicksToMoveEditor: 1,
listeners: {
edit: {
fn: me.onGridroweditingpluginEdit,
scope: me
}
}
});


me.plugins = [
me.rowEditing
];


columns: [

{

xtype: 'gridcolumn',
width: 70,
store: 'Customers',
displayField: 'family',


defaultType: 'combo',
dataIndex: 'customer',
editor: {
xtype: 'combo'
},
text: 'Customer',
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
getInnerTpl: function() {
return '{family}';
}
},
valueField: 'id'
},
{
xtype: 'gridcolumn',
width: 70,
dataIndex: 'destination',
editor: {
xtype: 'textfield'
},
text: 'Destination'
},
{
xtype: 'datecolumn',
width: 70,
dataIndex: 'from_date',
editor: {
xtype: 'datefield'
},
text: 'From_date'
},
{
xtype: 'datecolumn',
width: 60,
dataIndex: 'to_date',
editor: {
xtype: 'datefield'
},
text: 'To_date'
},
{
xtype: 'gridcolumn',
width: 70,
dataIndex: 'from_cost',
editor: {
xtype: 'numberfield'
},
text: 'From_cost'
},
{
xtype: 'gridcolumn',
width: 50,
dataIndex: 'to_cost',
editor: {
xtype: 'numberfield'
},
text: 'To_cost'
},
{
xtype: 'gridcolumn',
width: 50,
dataIndex: 'hotel_stars',
editor: {
xtype: 'numberfield'
},
text: 'Hotel_stars'
},
{
xtype: 'gridcolumn',
width: 60,
dataIndex: 'airline',
editor: {
xtype: 'textfield'
},
text: 'Airline'
},
{
xtype: 'booleancolumn',
width: 50,
dataIndex: 'visited',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
text: 'Visited'
},
{
xtype: 'booleancolumn',
width: 50,
dataIndex: 'sure',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
text: 'Sure'
}
]}

}
]


// renderTo:Ext.getCmp('room-table');
});


me.callParent(arguments);
},

redraid
19 Jun 2012, 9:01 AM
Define WaitersDataGrid to.

jvandemerwe
23 Oct 2012, 10:45 AM
This post is not extremely attractive to read with the code just pasted in like that.