Results 1 to 2 of 2

Thread: Help on how-to add Gridpanel on tree click (error: Cannot read property 'ownerCt')

  1. #1

    Default Help on how-to add Gridpanel on tree click (error: Cannot read property 'ownerCt')

    Hi,

    Struggling continues on probably a standard functionality, however I can't get it to work. So any help would be greatly appreciated.

    The basic idea behind the intended functionality is the following. I would like to create a Viewport with the standard layout of a North, West and Center region. The West region is holding a TreePanel, which on click has to change the layout and content of the Center region.

    The first implementation should change the start layout into a GridPanel. However nothing will show for now and errors occur. Let me provide you with the files and code I have created so far:

    Application.html.erb (standard layout file in Rails):
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
      		<title>PortalExtjsV01</title>
      		<%= stylesheet_link_tag "/ext/resources/css/ext-all.css" %>
    		<%= stylesheet_link_tag "/ext/examples/ux/css/RowEditor.css" %>
      		<%= javascript_include_tag "/ext/adapter/ext/ext-base-debug.js" %>
    		<%= javascript_include_tag "/ext/ext-all-debug.js" %>
    		<%= javascript_include_tag "/ext/examples/ux/RowEditor.js" %>
    		<%= javascript_include_tag "application.js" %>
    		<%= javascript_include_tag "ext/Ext.ux.UserClassGrid.js" %>
    		<%= javascript_include_tag "ext/basics.js" %>
      		<%= csrf_meta_tag %>
    	</head>
    	<body>
    		<!-- Moet uiteindelijk naar een flashed javascript window -->
    		<p class="notice"><%= notice %></p>
    		<p class="alert"><%= alert %></p>
    		<!-- Einde van mijn commentaar -->
    		<div id="container">
    			<div id="start-div"> 
    			            <div style="float:left;" ></div> 
    			            <div style="margin-left:100px;"> 
    			                <h2>Welcome!</h2> 
    			                <p>There are many sample layouts to choose from that should give you a good head start in building your own
    			                application layout.  Just like the combination examples, you can mix and match most layouts as
    			                needed, so don't be afraid to experiment!</p> 
    			                <p>Select a layout from the tree to the left to begin.</p> 
    			            </div> 
    			        </div>
    			<%= yield %>
    		</div>
    	</body>
    </html>
    As you can see, here all the necessary javascripts and extjs libaries are loaded:
    • application.js
    • Ext.ux.UserClassGrid.js
    • ext/basics.js


    The first javascript file contains the code to generate the ViewPort, Tree, Event Listener, and the start view of the center region. The code looks as follows:

    Application.js:
    Code:
    // Place your application-specific JavaScript functions and classes here
    // This file is automatically included by javascript_include_tag :defaults
    
    Ext.Ajax.defaultHeaders = {'Accept': 'application/json'};
    Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
    Ext.ns('Application');
    Ext.onReady(function() {
    
      	Ext.QuickTips.init();
    
      	// Main javascript-code from here on
    	
    	var northRegion = {
    		id: 'header',
    		region: 'north',
    		xtype: 'box',
    		height: 63,
    		html: '<h1>Logo</h1>'
    	};
    
    	var westRegion = new Ext.tree.TreePanel({
    		id: 'navigation',
    		title: 'Navigation',
    		region: 'west',
    		split: true,
    		width: 200,
    		autoScroll: true,
    		collapsible: true,
    		loader: new Ext.tree.TreeLoader(),
    		root: new Ext.tree.AsyncTreeNode({
    			expanded: true,
    			children: [{
    				text: 'User Management',
    				id: 'user-grid',
    				leaf: true
    			}]
    		}),
    		rootVisible: false,
    		listeners: {
    			click: function(n) {
    				var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    				if(n.leaf && n.id != sn.id){ // clicks on folders (no leafs) and current selected node are ignored
    					var cmp = n.id;
    					var centerRegion = Ext.getCmp('content-panel');	
    					centerRegion.removeAll();
    					centerRegion.add(cmp);
    					centerRegion.doLayout();
    				}
    			}
    		}
    	});
    	
    	var start = {
    	    id: 'start-panel',
    	    title: 'Start Page',
    	    layout: 'fit',
    	    bodyStyle: 'padding:25px',
    	    contentEl: 'start-div'  // pull existing content from the page
    	};
    	
    	var contentPanel = {
    		id: 'content-panel',
    		region: 'center',
    		layout: 'card',
    		activeItem: 0,
    		border: false,
    		items: [start]
    	};
    	
    	var viewport = new Ext.Viewport({
    		renderTo: document.body,
    		layout: 'border',
    		items: [northRegion, westRegion, contentPanel]
    	});
    
    }); // eo Ext.onReady
    The second one provides the extension of ext.grid.GridPanel for the creation of the userGrid. It looks as follows:

    Ext.ux.UserClassGrid.js:
    Code:
    var userProxy = new Ext.data.HttpProxy({
    	url: '/users'
    });
    
    var userReader = new Ext.data.JsonReader({
    	totalProperty: 'total',
    	successProperty: 'success',
    	idProperty: 'id',
    	root: 'users'
    }, [
    	{name: 'id'},
    	{name: 'first_name'},
    	{name: 'preposition'},
    	{name: 'last_name'},
    	{name: 'gender'},
    	{name: 'username', allowBlank: false},
        {name: 'email', allowBlank: false},
        {name: 'encrypted_password'},
        {name: 'password_salt'},
    	{name: 'reset_password_token'},
    	{name: 'remember_token'},
    	{name: 'remember_created_at'},
    	{name: 'sign_in_count'},
    	{name: 'current_sign_in_at'},
    	{name: 'last_sign_in_at'},
    	{name: 'current_sign_in_ip'},
    	{name: 'last_sign_in_ip'},
    	{name: 'confirmation_token'},
    	{name: 'confirmed_at'},
    	{name: 'confirmation_sent_at'},
    	{name: 'failed_attempts'},
    	{name: 'unlock_token'},
    	{name: 'locked_at'},
    	{name: 'authentication_token'},
    	{name: 'created_at'},
    	{name: 'updated_at'}
    ]);
    
    var userWriter = new Ext.data.JsonWriter({
    	// encode: false;
    });
    
    var userStore = new Ext.data.Store({
    	id: 'user',
    	restful: true,
    	proxy: userProxy,
    	reader: userReader,
    	writer: userWriter,
    	listeners: {
    		write: function(store, action, result, response, rs) {
    			// App.setAlert(response.success, response.message);
    		}
    	}
    });
    
    var userColumns = [
    	{header: 'id'},
    	{header: 'first_name'},
    	{header: 'preposition'},
    	{header: 'last_name'},
    	{header: 'gender'},
    	{header: 'username', allowBlank: false},
        {header: 'email', allowBlank: false},
        {header: 'encrypted_password'},
        {header: 'password_salt'},
    	{header: 'reset_password_token'},
    	{header: 'remember_token'},
    	{header: 'remember_created_at'},
    	{header: 'sign_in_count'},
    	{header: 'current_sign_in_at'},
    	{header: 'last_sign_in_at'},
    	{header: 'current_sign_in_ip'},
    	{header: 'last_sign_in_ip'},
    	{header: 'confirmation_token'},
    	{header: 'confirmed_at'},
    	{header: 'confirmation_sent_at'},
    	{header: 'failed_attempts'},
    	{header: 'unlock_token'},
    	{header: 'locked_at'},
    	{header: 'authentication_token'},
    	{header: 'created_at'},
    	{header: 'updated_at'}
    ];
    
    var userEditor = new Ext.ux.grid.RowEditor({
    	saveText: 'Update'
    });
    
    Ext.ux.UserGrid = Ext.extend(Ext.grid.GridPanel, {
    	border: false,
    	initComponent: function(){
    		var config = {
    			store: userStore,
    			columns: userColumns,
    			plugins: [userEditor],
    			viewConfig: {forceFit: true}
    		};
    		Ext.apply(this, Ext.apply(this.initialConfig, config));
    		Ext.ux.UserGrid.superclass.initComponent.apply(this, arguments);
    	},
    	onRender: function(){
    		this.store.load();
    		Ext.ux.UserGrid.superclass.initComponent.apply(this, arguments);
    	}
    });
    
    Ext.reg('usergrid', Ext.ux.UserGrid);
    And then finally the basics.js file which should initiate the extended gridpanel:

    Code:
    var usrgrid = {
    	xtype: 'usergrid',
    	id: 'user-grid',
    	title: 'User Grid'
    };
    Together it now gives me the following error:

    Uncaught TypeError: Cannot read property 'ownerCt' of undefined
    Ext.Container.Ext.extend.onBeforeAddext-all-debug.js:12855
    Ext.Container.Ext.extend.addext-all-debug.js:12776
    westRegion.Ext.tree.TreePanel.listeners.clickapplication.js:46
    EXTUTIL.Event.fireext-all-debug.js:310
    EXTUTIL.Observable.fireEventext-all-debug.js:54
    Ext.tree.TreePanel.Ext.extend.proxyNodeEventext-all-debug.js:33286
    Ext.data.Node.Ext.extend.fireEventext-all-debug.js:34159
    Ext.tree.TreeNodeUI.Ext.extend.fireEventext-all-debug.js:35260
    Ext.tree.TreeNodeUI.Ext.extend.onClickext-all-debug.js:35337
    Ext.tree.TreeEventModel.onNodeClickext-all-debug.js:33725
    Ext.tree.TreeEventModel.delegateClickext-all-debug.js:33685
    h
    Or it shows nothing.

    Could someone tell me what I'm doing wrong. After Hours of work I'am completely stuck now. :-(

    Thank you very much in advance.

    Regards,
    Victor

  2. #2

    Default

    Any help available?

Similar Threads

  1. Replies: 6
    Last Post: 18 Mar 2011, 4:58 AM
  2. Cannot read property 'ownerCt' of undefined
    By qbert65536 in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 23 Sep 2010, 3:42 PM
  3. Replies: 3
    Last Post: 28 Apr 2010, 7:59 AM
  4. component ownerCt property always undefined ..
    By wtfowned in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 27 Jul 2008, 8:01 AM
  5. [Ext2.0_rc1] Ext.Toolbar and missing 'ownerCt' property
    By pic_Nick in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 27 Nov 2007, 9:55 PM

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
  •