Results 1 to 9 of 9

Thread: "getConnectionObject is not a function" error when filling grid with json

  1. #1

    Default "getConnectionObject is not a function" error when filling grid with json

    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

    PHP 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({
                
    dsstore,
                
    cm: new Ext.grid.ColumnModel([
                    {
    id 'cms_message_id'header "cms_message_id"width8dataIndex 'cms_message_id'},
                    {
    header"text"width10dataIndex'text'},
                    {
    header"sound"width10dataIndex'sound'},
                    {
    header"badge"width10dataIndex'badge'},
                    {
    header"badge_count"width10dataIndex'badge_count'},
                    {
    header"ready_to_send"width10dataIndex'ready_to_send'},
                    {
    header"sent_at"width10dataIndex'sent_at'},
                    {
    header"recipients"width10dataIndex'recipients'}
                ]),
            
    viewConfig: {
                
            },
                
    width600,
                
    height300,
                
    collapsibletrue,
                
    animCollapsefalse,
                
    title'Test',
                
    iconCls'icon-grid',
                
    renderTodocument.body
            
    });
            
    store.load();
    }); 
    Hope someone can help me. Thanks in advance!

    Greetings from Germany, MrGrah

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Is getConnectionObject one of your own methods?

    Where is line 332 being invoked from?
    Aaron Conran
    @aconran

  3. #3

    Default

    Quote Originally Posted by aconran View Post
    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

    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

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Why are you using an unsupported file from the examples directory?

  5. #5

    Default

    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.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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!

  7. #7

    Default

    Thank you for your advice.
    I did as you said, now having a running grid with query data.

    Greetings from Germany,
    Eric

  8. #8
    Sencha User
    Join Date
    Oct 2007
    Location
    DC metro
    Posts
    447

    Default

    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

  9. #9

    Default

    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.

    Code:
    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!

Similar Threads

  1. Replies: 6
    Last Post: 21 Apr 2010, 10:06 AM
  2. Creating a GridPanel throws "this.addEvents is not a function" error
    By Dumas in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 3 Mar 2010, 11:41 AM
  3. Error Ext.getCmp("razao_social").hideLabel is not a function
    By Rafael in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 27 Apr 2009, 7:24 PM
  4. [RESOLVED][2.2.1] Calling defined function throws a "is not a function" error
    By sam_mooball in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 19 Apr 2009, 11:08 PM
  5. Replies: 8
    Last Post: 25 Sep 2008, 3:40 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •