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
Help on how-to add Gridpanel on tree click (error: Cannot read property 'ownerCt')
