application.js

/* Gilbert JS */

Ext.BLANK_IMAGE_URL = '{% mediaurl "gilbert/ext/resources/images/default/s.gif" %}';

Ext.onReady(function(){
	Gilbert.Application = new Gilbert.ui.Application({
		title: 'Philo + Gilbert',
		user: {
			name: '{% filter force_escape %}{% firstof user.get_full_name user.username %}{% endfilter %}',
			change_password_url: '{% url admin:password_change %}?_popup=1&pop=1',
			logout_url: '{% url admin:logout %}',
		},
		plugins: [
			{
				initWithApp: function(app) {
					var add_content_menu = new Ext.menu.Menu();
					var edit_content_menu = new Ext.menu.Menu();
					
					{% if app_list %}{% for app in app_list %}
						add_content_menu.add({
							xtype: 'menutextitem',
							text: '{{ app.name }}',
							style: {
								'border': '1px solid rgb(125, 125, 125)',
								'background-color': 'rgb(240, 240, 240)',
								'margin': '0px 0px 1px 0px',
								'display': 'block',
								'padding': '3px',
								'font-weight': 'bold',
								'font-size': '12px',
								'text-align': 'center',
							},
						});
						edit_content_menu.add({
							xtype: 'menutextitem',
							text: '{{ app.name }}',
							style: {
								'border': '1px solid rgb(125, 125, 125)',
								'background-color': 'rgb(240, 240, 240)',
								'margin': '0px 0px 1px 0px',
								'display': 'block',
								'padding': '3px',
								'font-weight': 'bold',
								'font-size': '12px',
								'text-align': 'center',
							},
						});
					{% for model in app.models %}{% if model.perms.add %}
						add_content_menu.add({
							text: '{{ model.name }}',
							iconCls: 'gilbert-model-icon-{{ app.label }}-{{ model.lower_name }}',
							handler: function(button, event) {
								var add_window = app.createWindow({
									layout: 'fit',
									width: 800,
									height: 300,
									plain: true,
									border: false,
									title: 'Loading...',
									iconCls: 'gilbert-icon-loading',
									items: {
										xtype: 'iframepanel',
										bodyBorder: false,
										loadMask: true,
										defaultSrc: '{{ model.admin_url }}add/?_popup=1',
										listeners: {
											domready: function(frame) {
												var doc = frame.getFrameDocument();
												if (doc) {
													edit_window.setTitle(doc.title.replace(/ \| Django site admin$/, ''));
													edit_window.setIconClass('gilbert-icon-add');
												}
											},
										},
									},
								});
								add_window.show(this);
							},
						});
					{% endif %}{% if model.perms.change %}
						edit_content_menu.add({
							text: '{{ model.name }}',
							iconCls: 'gilbert-model-icon-{{ app.label }}-{{ model.lower_name }}',
							handler: function(button, event) {
								var edit_window = app.createWindow({
									layout: 'fit',
									width: 800,
									height: 300,
									plain: true,
									border: false,
									title: 'Loading...',
									iconCls: 'gilbert-icon-loading',
									items: {
										xtype: 'iframepanel',
										bodyBorder: false,
										loadMask: true,
										defaultSrc: '{{ model.admin_url }}?pop=1',
										listeners: {
											domready: function(frame) {
												var doc = frame.getFrameDocument();
												if (doc) {
													edit_window.setTitle(doc.title.replace(/ \| Django site admin$/, ''));
													edit_window.setIconClass('gilbert-icon-edit');
												}
											},
										},
									},
								});
								edit_window.show(this);
							},
						});
					{% endif %}{% endfor %}{% endfor %}{% endif %}
					
					app.toolbar.add({
						xtype: 'button',
						text: 'Add',
						iconCls: 'gilbert-icon-add',
						menu: add_content_menu,
					});
					app.toolbar.add({
						xtype: 'button',
						text: 'Edit',
						iconCls: 'gilbert-icon-edit',
						menu: edit_content_menu,
					});
				},
			},
			{
				initWithApp: function(app) {
					app.toolbar.add({
						xtype: 'button',
						text: 'Node Manager',
						tooltip: {
							title: 'Node Manager',
							text: 'Manage the tree of nodes and determine the layout and behavior of URLs on your site.',
							anchorToTarget: true,
						},
						iconCls: 'gilbert-icon-node-manager',
					});
				},
			},
		],
	});
});

/* Ext.ns('Gilbert');

Gilbert.add_content_menu = new Ext.menu.Menu();
Gilbert.edit_content_menu = new Ext.menu.Menu();
Gilbert.add_node_menu = new Ext.menu.Menu({
	items: [
		{
			text: 'Page',
			iconCls: 'gilbert-icon-page',
		},
		{
			text: 'File',
			iconCls: 'gilbert-icon-file',
		},
		{
			text: 'Redirect',
			iconCls: 'gilbert-icon-redirect',
		},
		{
			xtype: 'menuseparator',
		},
		{
			text: 'Blog',
			iconCls: 'gilbert-icon-blog',
		},
		{
			text: 'Newsletter',
			iconCls: 'gilbert-icon-newsletter',
		},
		{
			text: 'Calendar',
			iconCls: 'gilbert-icon-calendar',
		},
	],
});

Ext.onReady(function(){
	Ext.QuickTips.init();
	
	var center_panel = new Ext.Panel({
		region: 'center',
		border: false,
		padding: '5',
		bodyStyle: 'background-image: url({% mediaurl "gilbert/philot/graphics/bg.gif" %});',
	});
	
	var node_manager_window = new Ext.Window({
		title: 'Node Manager',
		iconCls: 'gilbert-icon-node-manager',
		closable: true,
		closeAction: 'hide',
		width: 600,
		height: 350,
		plain: true,
		layout: 'border',
		renderTo: center_panel.body,
		constrainHeader: true,
		maximizable: true,
		border: false,
		items: [
			{
				region: 'west',
				xtype: 'panel',
				split: true,
				width: 200,
				tbar: [
					{
						xtype: 'button',
						iconCls: 'gilbert-icon-new',
						text: 'New',
						menu: Gilbert.add_node_menu,
					},
					{
						xtype: 'tbfill',
					},
					{
						xtype: 'button',
						iconCls: 'gilbert-icon-delete',
						text: 'Delete',
					},
				],
			},
			{
				region: 'center',
				xtype: 'panel',
				html: 'Editor',
			}
		],
	});
	
	var content_manager_window = new Ext.Window({
		title: 'Content Manager',
		closable: true,
		closeAction: 'hide',
		width: 600,
		height: 350,
		plain: true,
		renderTo: center_panel.body,
		constrain: true,
		maximizable: true,
		border: false,
	});
	
	var main_toolbar = new Ext.Toolbar({
		region: 'north',
		autoHeight: true,
		items: [
			{
				xtype: 'tbtext',
				text: 'Philo + Gilbert',
				style: 'font-weight: bolder; font-size: larger; text-transform: uppercase;',
			},
			{
				xtype: 'tbseparator',
			},
			{
				xtype: 'button',
				text: 'New',
				iconCls: 'gilbert-icon-new',
				menu: Gilbert.add_content_menu,
			},
			{
				xtype: 'button',
				text: 'Edit',
				iconCls: 'gilbert-icon-edit',
				menu: Gilbert.edit_content_menu,
			},
			{
				xtype: 'button',
				text: 'Search',
				iconCls: 'gilbert-icon-search',
				menu: [
					{
						xtype: 'textfield',
					}
				],
			},
			{
				xtype: 'button',
				text: 'Advanced',
				iconCls: 'gilbert-icon-advanced',
				menu: [
					{
						text: 'Node Manager',
						tooltip: {
							title: 'Node Manager',
							text: 'Manage the tree of nodes and determine the layout and behavior of URLs on your site.',
							anchorToTarget: true,
						},
						iconCls: 'gilbert-icon-node-manager',
						handler: function(button, event) {
							node_manager_window.show(this);
						},
					},
					/*{
						text: 'Content Manager',
						tooltip: {
							title: 'Content Manager',
							text: 'Manage the content objects that power your site.',
							anchorToTarget: true,
						},
						iconCls: 'gilbert-icon-content-manager',
						handler: function(button, event) {
							content_manager_window.show(this);
						},
					},*/ /*
				],
			},
			{
				xtype: 'tbfill',
			},
			{
				xtype: 'button',
				iconCls: 'gilbert-icon-home',
			},
			{
				xtype: 'tbseparator',
			},
			{
				xtype: 'button',
				iconCls: 'gilbert-icon-user-silhouette',
				text: '<b>{% filter force_escape %}{% firstof user.get_full_name user.username %}{% endfilter %}</b>',
				style: 'font-weight: bolder !important; font-size: smaller !important; text-transform: uppercase !important;',
				menu: [
					{
						text: 'Change password',
						iconCls: 'gilbert-icon-change-password',
						handler: function(button, event) {
							var edit_window = new Ext.Window({
								layout: 'fit',
								width: 800,
								height: 300,
								plain: true,
								renderTo: center_panel.body,
								constrainHeader: true,
								maximizable: true,
								border: false,
								title: 'Loading...',
								iconCls: 'gilbert-icon-loading',
								items: {
									xtype: 'iframepanel',
									bodyBorder: false,
									loadMask: true,
									defaultSrc: '{% url admin:password_change %}?_popup=1&pop=1',
									listeners: {
										domready: function(frame) {
											var doc = frame.getFrameDocument();
											if (doc) {
												edit_window.setTitle(doc.title.replace(/ \| Django site admin$/, ''));
												edit_window.setIconClass('gilbert-icon-change-password');
											}
										},
									},
								},
							});
							edit_window.render(center_panel.body);
							edit_window.show(this);
						},
					},
					{
						text: 'Log out',
						iconCls: 'gilbert-icon-logout',
						handler: function(button, event) {
							window.location = '{% url admin:logout %}';
						},
					},
				],
			}
		],
	});
	
	var viewport = new Ext.Viewport({
		renderTo: Ext.getBody(),
		layout: 'border',
		items: [
			main_toolbar,
			center_panel,
		],
	});
	

	
	node_manager_window.render(center_panel.body);
	content_manager_window.render(center_panel.body);
	
	viewport.doLayout();
}); */

gilbert.js

Ext.ns('Gilbert', 'Gilbert.ui');

Gilbert.ui.Application = function(cfg) {
	Ext.apply(this, cfg, {
		title: 'Gilbert',
	});
	this.addEvents({
		'ready': true,
		'beforeunload': true,
	});
	Ext.onReady(this.initApplication, this);
};

Ext.extend(Gilbert.ui.Application, Ext.util.Observable, {
	initApplication: function() {
		
		Ext.QuickTips.init();
		
		this.desktop = new Ext.Panel({
			region: 'center',
			border: false,
			padding: '5',
			bodyStyle: 'background: rgb(65, 118, 144);',
		});
		var desktop = this.desktop;
		
		this.toolbar = new Ext.Toolbar({
			region: 'north',
			autoHeight: true,
			items: [
			{
				xtype: 'tbtext',
				text: this.title,
				style: 'font-weight: bolder; font-size: larger; text-transform: uppercase;',
			},
			{
				xtype: 'tbseparator',
			}
			]
		});
		var toolbar = this.toolbar;
		
		this.viewport = new Ext.Viewport({
			renderTo: Ext.getBody(),
			layout: 'border',
			items: [
			toolbar,
			desktop,
			],
		});
		var viewport = this.viewport;
		
		var windows = new Ext.WindowGroup();
		
		this.createWindow = function(config, cls) {
			var win = new(cls || Ext.Window)(Ext.applyIf(config || {},
			{
				renderTo: desktop,
				manager: windows,
				constrainHeader: true,
				maximizable: true,
			}));
			win.render(desktop);
			return win;
		};
		var createWindow = this.createWindow;
		
		if (this.plugins) {
			for (var pluginNum = 0; pluginNum < this.plugins.length; pluginNum++) {
				this.plugins[pluginNum].initWithApp(this);
			};
		};
		
		if (this.user) {
			var user = this.user;
			toolbar.add({ xtype: 'tbfill' });
			toolbar.add({ xtype: 'tbseparator' });
			toolbar.add({
				xtype: 'button',
				iconCls: 'gilbert-icon-user-silhouette',
				text: '<b>' + user.name + '</b>',
				style: 'font-weight: bolder !important; font-size: smaller !important; text-transform: uppercase !important;',
				menu: [
				{
					text: 'Change password',
					iconCls: 'gilbert-icon-change-password',
					handler: function(button, event) {
						var edit_window = createWindow({
							layout: 'fit',
							width: 800,
							height: 300,
							plain: true,
							border: false,
							title: 'Loading...',
							iconCls: 'gilbert-icon-loading',
							items: {
								xtype: 'iframepanel',
								bodyBorder: false,
								loadMask: true,
								defaultSrc: user.change_password_url,
								listeners: {
									domready: function(frame) {
										var doc = frame.getFrameDocument();
										if (doc) {
											edit_window.setTitle(doc.title.replace(/ \| Django site admin$/, ''));
											edit_window.setIconClass('gilbert-icon-change-password');
										};
									},
								},
							},
						});
						edit_window.show(this);
					},
				},
				{
					text: 'Log out',
					iconCls: 'gilbert-icon-logout',
					handler: function(button, event) {
						window.location = user.logout_url;
					},
				},
				],
			});
		};
		
		toolbar.doLayout();
		viewport.doLayout();
	},
});