PDA

View Full Version : "getConnectionObject is not a function" error when filling grid with json



MrGrah
11 Aug 2010, 11:16 PM
Hello developers,

I'm new to ExtJS and wanted to fill a GridPanel with a query result from a mysqli database. I encoded the result from the query to JSON and now want to fill the grid. I tried out certain code examples but mostly getting the firebug error:

Voreinstellungen
File: code-display.js (line 332)
var o = this.getConnectionObject();
this.getConnectionObject is not a function

I'm running apache localhost with XAMPP. I spend more than 4 hours with this error just having no idea what's the problem.

Here's the code




Ext.onReady(function(){
var cms = Ext.data.Record.create([
{ name : 'cms_message_id', mapping : 'cms_message_id'},
{ name : 'text', mapping : 'text'},
{ name : 'sound', mapping : 'sound'},
{ name : 'badge', mapping : 'badge'},
{ name : 'badge_count', mapping : 'badge_count'},
{ name : 'ready_to_send', mapping : 'ready_to_send'},
{ name : 'sent_at', mapping : 'sent_at'},
{ name : 'recipients', mapping : 'recipients'}
]);

var reader = new Ext.data.JsonReader({
root : "json",
totalProperty : "totalCount",
id : "cms_message_id"
}, cms);

var store = new Ext.data.Store({
nocache : true,
reader : reader,
autoLoad : true,
remoteSort : true,
proxy : new Ext.data.HttpProxy({
url : 'example.php',
method : 'GET'
})
});

var grid1 = new Ext.grid.GridPanel({
ds: store,
cm: new Ext.grid.ColumnModel([
{id : 'cms_message_id', header : "cms_message_id", width: 8, dataIndex : 'cms_message_id'},
{header: "text", width: 10, dataIndex: 'text'},
{header: "sound", width: 10, dataIndex: 'sound'},
{header: "badge", width: 10, dataIndex: 'badge'},
{header: "badge_count", width: 10, dataIndex: 'badge_count'},
{header: "ready_to_send", width: 10, dataIndex: 'ready_to_send'},
{header: "sent_at", width: 10, dataIndex: 'sent_at'},
{header: "recipients", width: 10, dataIndex: 'recipients'}
]),
viewConfig: {

},
width: 600,
height: 300,
collapsible: true,
animCollapse: false,
title: 'Test',
iconCls: 'icon-grid',
renderTo: document.body
});
store.load();
});



Hope someone can help me. Thanks in advance!

Greetings from Germany, MrGrah

aconran
12 Aug 2010, 2:12 PM
Is getConnectionObject one of your own methods?

Where is line 332 being invoked from?

MrGrah
15 Aug 2010, 10:41 PM
Is getConnectionObject one of your own methods?

Where is line 332 being invoked from?

getConnectionObject isn't one of my own methods. It comes with the ExtJS package. It's defined in the code-display.js file in ext-3.2.1/ext-3.2.1/shared and seems to be called when I try to load JSON into my grid.

I searched again for the error at google and found this on http://yuiblog.com/sandbox/yui/v090/connection/docs/YAHOO.util.Connect.html#getConnectionObject (http://yuiblog.com/sandbox/yui/v090/connection/docs/YAHOO.util.Connect.html#getConnectionObject:)

Object getConnectionObject () This method is called by asyncRequest and syncRequest to create a valid connection object for the transaction. It also passes a transaction id and increments the transaction id counter. Returns:object

Animal
15 Aug 2010, 11:56 PM
Why are you using an unsupported file from the examples directory?

MrGrah
16 Aug 2010, 12:14 AM
What do you mean? I thought taking an example file would be the easiest way to start with ExtJS.
I couldn't find any example from the API where a grid is filled with mysql data. There are only grid examples with static data from an array.

Animal
16 Aug 2010, 1:20 AM
Copy/pasting examples is the worst way to learn.

Because you don't learn.

It's like going by taxi somewhere.

You can't drive there afterwards.

The very best way to learn is to learn the principles from the ground up.

First job: Define a Record layout, and load a Store of those records.

Then, when you have debugged and checked that the Store contains the data you want, you can begin writing data bound widgets which use that data.

That's the order I teach when I visit clients: The data package is treated separately and covered before we get onto pretty widgets!

MrGrah
18 Aug 2010, 1:26 AM
Thank you for your advice.
I did as you said, now having a running grid with query data.

Greetings from Germany,
Eric

mxu
21 Oct 2010, 6:10 AM
MrGrah,

how did you fix the issue associated with getConnectionObject(). I run into getConnectionObject() is undefined at switching from ExtJS2.2 to EXtJS3.3,

mxu

MrGrah
21 Oct 2010, 10:35 AM
I deleted everything i've written since then and started building up a record layout. I'm busy at the moment but will post you my main code. there are some functions you may not need such as doRowDblClick() or doRowCtxMenu().

You'll see i first built up my record layout and defined the store and so on. I used two different stores to handle two different grids. all in all i couldnt go on working with this and the code isnt complete but data import with mysqli and json store worked well. I can only agree with Animal when he says copy paste is no solution but because of time i can only show you the way i did it.


Ext.onReady(function(){

//Dynamischer Datenimport mittels MySQLi und Json

//Mapping of Data
var recordFields =
[
{name : 'cms_message_id', mapping : 'cms_message_id'},
{name : 'text', mapping : 'text'},
{name : 'sound', mapping : 'sound'},
{name : 'badge', mapping : 'badge'},
{name : 'badge_count', mapping : 'badge_count'},
{name : 'ready_to_send', mapping : 'ready_to_send'},
{name : 'sent_at', mapping : 'sent_at'},
{name : 'recipients', mapping : 'recipients'}
];

var jsonReader = new Ext.data.JsonReader();

//Getting Data to the Store
var historyStore = new Ext.data.JsonStore({
fields : recordFields,
url : 'historyQuery.php',
totalProperty : 'totalCount',
root : 'history',
id : 'historyStore',
autoLoad : true,
remoteStart : true
});

//Getting Data to the Store
var activeStore = new Ext.data.JsonStore({
fields : recordFields,
url : 'activeQuery.php',
totalProperty : 'totalCount',
reader : jsonReader,
root : 'active',
id : 'activeStore',
autoLoad : true,
remoteStart : true
});

//StoreManager to display only 10 records
/*Ext.StoreMgr.get('activeStore').load({
params : {
start : 0,
limit : 10
}
});*/

//ColumnModel for the Grid
var columnModel =
[
{
header : 'ID',
dataIndex : 'cms_message_id',
sortable : false,
width : 35,
resizable : false,
hidden : false,
},
{
header : 'Text',
dataIndex : 'text',
sortable : false,
width : 230,
resizable : true,
hidden : false,
},
{
header : 'Sound',
dataIndex : 'sound',
sortable : false,
width : 50,
resizable : false,
hidden : false,
},
{
header : 'Badge',
dataIndex : 'badge',
sortable : false,
width : 50,
resizable : false,
hidden : false,
},
{
header : 'Badge Count',
dataIndex : 'badge_count',
sortable : false,
width : 80,
resizable : false,
hidden : false,
},
{
header : 'Ready to send',
dataIndex : 'ready_to_send',
sortable : false,
width : 80,
resizable : false,
hidden : false,
},
{
header : 'Sent at',
dataIndex : 'sent_at',
sortable : false,
width : 120,
format : 'd/m/Y',
resizable : false,
hidden : false,
},
{
header : 'Recipients',
dataIndex : 'recipients',
sortable : false,
width : 60,
resizable : false,
hidden : false,
}
];

//Paging Toolbar for the Grid
var historyToolbar =
{
xtype : 'paging',
store : historyStore,
pageSize : 50,
displayInfo : false
};

//MessageBox Alert to pop up when doubleclicked
var doMsgBoxAlert = function(record)
{
var text = record.get('text');

var msg = String.format('Record text: <br /> {0}', text);

Ext.MessageBox.alert('', msg);
};

//DoubleClick event function
var doRowDblClick = function(thisGrid, rowIndex)
{
var record = thisGrid.getStore().getAt(rowIndex);
doMsgBoxAlert(record);
};

//RowContext Menu
var doRowCtxMenu = function(thisGrid, rowIndex, evtObj)
{
evtObj.stopEvent();

var record = thisGrid.getStore().getAt(rowIndex);
if (! thisGrid.rowCtxMenu) {
thisGrid.rowCtxMenu = new Ext.menu.Menu({
items : {
text : 'View Record',
handler : function() {
doMsgBoxAlert(record);
}
}
});
}
thisGrid.rowCtxMenu.showAt(evtObj.getXY());
};

//Our Grid to fill with data
var activeMsgGrid = new Ext.grid.GridPanel({
title : 'Active Push Notifications',
xtype : 'grid',
width : 730,
autoHeight : true,
columns : columnModel,
store : activeStore,
loadMask : true,
listeners :
{
rowdblclick : doRowDblClick,
rowcontextmenu : doRowCtxMenu,
destroy : function(thisGrid)
{
if (thisGrid.rowCtxMenu) {
thisGrid.rowCtxMenu.destroy();
}
}
}
});

//Our Grid to fill with data
var historyGrid = new Ext.grid.GridPanel({
title : 'Push Notification History',
xtype : 'grid',
width : 730,
height : 500,
columns : columnModel,
store : historyStore,
loadMask : true,
stripeRows : true,
bbar : historyToolbar,
listeners :
{
rowdblclick : doRowDblClick,
rowcontextmenu : doRowCtxMenu,
destroy : function(thisGrid)
{
if (thisGrid.rowCtxMenu) {
thisGrid.rowCtxMenu.destroy();
}
}
}
});

var newMessage =
{
xtype : 'panel',
collapsed : false,
collapsible : false,
title : 'New Message',
width : 240,
padding : '5',
items : [
{
xtype: 'textfield',
width : 220,
height : 100
},
{
xtype: 'checkbox',
boxLabel: 'add Tone'
},
{
xtype: 'checkbox',
boxLabel: 'add Badge'
}]
};

var newPush = new Ext.Panel({
title: 'New Push',
width: 260,
height: 300,
buttonAlign: 'center',
bodyStyle:'padding:5',
buttons: [{
text: 'Speichern',
width: 100
},{
text: 'Senden',
width: 100
}],
items: [
{
xtype:'textarea',
width:'248',
height:'150'
},{
xtype:'checkbox',
boxLabel: 'addTone'
},{
xtype:'checkbox',
boxLabel: 'addBadge'
}
],
layout: 'anchor'
});


var categories =
{
region: 'west',
collapsible: false,
leaf: true,
title: 'Categories',
xtype: 'treepanel',
lines: false,
margins:'70 0 5 5',
width: 250,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.TreeNode('My Feeds')
};

new Ext.Viewport({
layout:'border',
items:[{
region: 'west',
collapsible: false,
leaf: true,
title: 'Categories',
xtype: 'treepanel',
lines: false,
margins:'70 0 5 5',
width: 250,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.TreeNode('My Feeds'),
bodyStyle : 'background : #DFE8F6'
},{
region:'center',
margins:'70 5 5 0',
layout:'column',
autoScroll:true,
bodyStyle : 'background : #DFE8F6',
items:[{
columnWidth:.73,
baseCls:'x-plain',
bodyStyle:'padding:5px 5px 5px 5px',
items:[activeMsgGrid, historyGrid]
},{
columnWidth:.27,
baseCls:'x-plain',
bodyStyle:'padding:5px 0 5px 0',
items:[newPush]
}]
}]
});

hope you'll get it. let me know!