PDA

View Full Version : Need Comments...



Brat.Pidd
22 Feb 2009, 3:05 AM
Hi again, I would like to get comments about my Application which I currently write.
Thanks!....


// File: Application.js

Ext.ns('Application', 'Application.West', 'Application.East', 'Application.Center', 'Application.South', 'Application.North');

// Global variables
Application.root = 'jookla/';

// reference local blank image
Ext.BLANK_IMAGE_URL = Application.root + 'ext/resources/images/default/s.gif';

/// Path Icon Filter
Ext.menu.RangeMenu.prototype.icons = {
gt: Application.root + '/img/icons/greater_then.png',
lt: Application.root + '/img/icons/less_then.png',
eq: Application.root + '/img/icons/equals.png'
};
Ext.grid.filter.StringFilter.prototype.icon = Application.root + '/img/icons/find.png';

Ext.onReady(function() {
Ext.QuickTips.init();

// Realtime clock information
var ClockRunner = new Ext.util.TaskRunner();
var ClockTask = {
run: function(){
Ext.fly('clock').update(new Date().format('D, t F Y, h:i:s A'));
}
,interval: 1000 //1 second
};
ClockRunner.start(ClockTask);
// eo-clock

var CenterVp = new Ext.TabPanel({
id: 'id_application_centervp'
, region: 'center'
, activeItem: 0
, enableTabScroll: true
, items: [{title: 'Home'}]
});

var NorthVp = new Ext.Panel({
id: 'id_application_northvp'
, xtype: 'panel'
, region: 'north'
, items: [{xtype: 'box', applyTo: 'header0'}, {xtype: 'box', applyTo: 'header'}]
, height: 60
});

// Tree1 code
var WestTree1 = new Ext.tree.TreePanel({
id: 'id_application_westtree1'
, title: 'Your Class Management'
, border: false
, split: true
, autoScroll: true
, iconCls: 'icon_class'
, rootVisible: false
, lines: false
, singleExpand: false
, useArrows: true
, root: new Ext.tree.AsyncTreeNode()
, loader: new Ext.tree.TreeLoader({
dataUrl: Application.root + '/resources/faculty/navClass.json'
})
});

// Tree2 code which most configs are the same with WestTree1 ???
var WestTree2 = new Ext.tree.TreePanel({
id: 'id_application_westtree2'
, title: 'Academic'
, border: false
, split: true
, autoScroll: true
, iconCls: 'icon_class'
, rootVisible: false
, lines: false
, singleExpand: false
, useArrows: true
, root: new Ext.tree.AsyncTreeNode()
, loader: new Ext.tree.TreeLoader({
dataUrl: Application.root + '/resources/faculty/navAcademic.json'
})
});

// Event on WestTree1
WestTree1.on({
scope : this
, click: function(node, event) {
event.stopEvent();
alert(node.text);
}
});

// Event on WestTree2 which has the same action ???
WestTree2.on({
scope : this
, click: function(node, event) {
event.stopEvent();
alert(node.text);
}
});

var WestVp = new Ext.Panel({
id: 'id_application_westvp'
, region: 'west'
, title: 'Navigation'
, split: true
, collapsible: true
, collapseMode: 'mini'
, width: 200
, minSize: 200
, maxSize: 200
, margins: '0 0 0 5'
, layout: 'accordion'
, layoutConfig: {animate:true}
, items: [WestTree1, WestTree2]
});

// EastTask1 code
var EastTask1 = new Ext.Panel({
border: false
, id: 'id_application_easttask1'
, frame: true
, title: 'Available Action'
, titleCollapse: true
});

// EastTask2 code which most configs are the same with EastTask1 ???
var EastTask2 = new Ext.Panel({
border: false
, id: 'id_application_easttask2'
, frame: true
, title: 'Information'
, titleCollapse: true
});

var EastVp = new Ext.Panel({
id: 'id_application_eastvp'
, region: 'east'
, split: true
, collapsible: true
, collapseMode: 'mini'
, width: 200
, minWidth: 200
, maxWidth: 200
, baseCls: 'x-plain'
});

var SouthVp = new Ext.Panel({
id: 'id_application_southvp'
, region: 'south'
, split: true
, height: 125
, minSize: 100
, maxSize: 200
, collapsible: true
, title: 'Widget'
, margins: '0 0 0 0'
});

var viewport = new Ext.Viewport ({
layout: 'border'
, items: [CenterVp, NorthVp, WestVp, EastVp, SouthVp]
});
});

// eof

22 Feb 2009, 5:34 AM
Read up on XTypes and Ext.apply. Also abstract that listener methods into one. And for god's sake, stick wit one way of doing commas in your code!

Brat.Pidd
22 Feb 2009, 5:38 AM
Read up on XTypes and Ext.apply. Also abstract that listener methods into one. And for god's sake, stick wit one way of doing commas in your code!

XTypes and Ext.apply ... do you mean pre-configuring like saki tutorial right?

Allright... At least I got three key points for learning today. Thanks!

22 Feb 2009, 5:41 AM
No, i'm just talkinga bout plain xtypes and ext.apply :)

Pre-configuring = creating an extension classes to 'pre-configure' widgets.

Have you seen my book? The first four chapters (though unedited) go through this in great detail and will help you :).

Also, have you seen my screencasts at http://tdg-i.com?

Brat.Pidd
22 Feb 2009, 5:48 AM
Allright... I'll read it now. And screenies too...