Permalink
Browse files

updating example8 with commenting and style changes

  • Loading branch information...
1 parent a44e8d9 commit 0d01a8bf5f0ecddcd917e2f420c13147f9c3c395 @enygma committed Jun 3, 2012
@@ -1,12 +1,20 @@
+/**
+ * Define the main application index
+ */
Ext.application({
+
+ /** Name the example */
name: 'example8',
+ /** Set up the base folder for the app */
appFolder: '/js/examples/example8/app',
+ /** Autload these controllers */
controllers: [
'Index'
],
+ /** Launch the application and define the default Viewport */
launch: function() {
console.log('Launch application "example8"');
@@ -1,36 +1,47 @@
+/**
+ * Define the Index (main) controller
+ */
Ext.define('example8.controller.Index', {
+ /** Extend the default Controller */
extend: 'Ext.app.Controller',
+ /** Autolod these models */
models: [
'User',
'Userlist',
'Message'
],
+ /** Autolod these views */
views: [
'index.Userwin',
'index.Userlist',
'index.Chatwin',
'index.Messagelist',
'index.Chatinput'
],
+ /** Autoload these stores */
stores: [
'Currentuser',
'Userlist',
'Messagelist'
],
+ /** Initialize the controller */
init: function() {
console.log('init Index controller');
+ /** Set up some defaults */
indexController = this;
indexController.messageParams = {};
indexController.currentUser = {
name: 'enygma',
id: 1
};
+ /** Define the interactions for the controller and view components */
this.control({
+ /** Submit the message field on Enter */
'#chatMessage': {
specialkey: function(field,e) {
if(e.getKey() == e.ENTER && field.getValue().length > 0) {
@@ -40,9 +51,12 @@ Ext.define('example8.controller.Index', {
}
}
},
+ /**
+ * When the item on the Current User list is clicked,
+ * the current messages will be filtered by that username
+ */
'userlistgrid': {
itemclick: function(element,record,item,index,evt) {
- // filter our grid based on the username
var filterUser = record.data.id;
var messageStore = Ext.getCmp('messagelist').getStore();
@@ -52,6 +66,7 @@ Ext.define('example8.controller.Index', {
});
}
},
+ /** Submit the "change username" form, complete with validation */
'#userwinsubmit': {
click: function(el) {
var form = Ext.getCmp('userform').getForm();
@@ -75,6 +90,10 @@ Ext.define('example8.controller.Index', {
cp.renderUserLink(formValues.username)
);
+ /**
+ * Reload the store (refreshes the Current User list view)
+ * and close the window
+ */
Ext.getCmp('userlistgrid').getStore().load();
Ext.getCmp('userwin').close();
@@ -88,7 +107,8 @@ Ext.define('example8.controller.Index', {
}
}
});
-
+
+ /** Define a task to execute periodically - this updates the Message List store */
var task = Ext.TaskManager.start({
run: function(){
Ext.getCmp('messagelist').getStore().load({params: indexController.messageParams});
@@ -97,10 +117,12 @@ Ext.define('example8.controller.Index', {
});
},
+ /** Create the "change username" window */
loadUserWin: function() {
Ext.create('example8.view.index.Userwin');
},
+ /** Update the "Current Messages" */
updateMessages: function() {
var formValues = Ext.getCmp('chatForm').getValues();
@@ -1,6 +1,12 @@
+/**
+ * Define the structure for the Current Messages model
+ */
Ext.define('example8.model.Message', {
+ /** Extend the default Model */
extend: 'Ext.data.Model',
+
+ /** Define the model structure */
fields: [
{ name: 'message', type: 'string' },
{ name: 'posted', type: 'string' },
@@ -1,6 +1,12 @@
+/**
+ * Defaine the model for the data on the current user
+ */
Ext.define('example8.model.User', {
+ /** Extend the default data Model */
extend: 'Ext.data.Model',
+
+ /** Define the model's fields */
fields: [
{name:'name',type:'string'},
{name:'id', type:'int'}
@@ -1,12 +1,18 @@
+/**
+ * Defaine the model structure for the current user list
+ */
Ext.define('example8.model.Userlist', {
+ /** Extend the default Model */
extend: 'Ext.data.Model',
fields: [
- {
+ {
+ /** Username value */
name:'username',
type:'string',
},
{
+ /** ID value */
name: 'id',
type: 'int'
}
@@ -1,8 +1,15 @@
+/**
+ * Define the store for the data for the Current user
+ */
Ext.define('example8.store.Currentuser', {
+ /** Extend the default data Store */
extend: 'Ext.data.Store',
+
+ /** Link to a model for structure */
model: 'example8.model.User',
+ /** Include some default data */
data: [
{name:'enygma', id:1}
]
@@ -1,8 +1,15 @@
+/**
+ * Define the store for the current message list
+ */
Ext.define('example8.store.Messagelist', {
+ /** Extend the default Store */
extend: 'Ext.data.Store',
+
+ /** Link to a model for structure */
model: 'example8.model.Message',
+ /** Set the store's data source */
proxy: {
type: 'ajax',
url: '/example/example8read/format/json',
@@ -11,6 +18,8 @@ Ext.define('example8.store.Messagelist', {
root: 'messages'
}
},
+
+ /** Set the store to autload and autosync */
autoLoad: true,
autoSync: true
@@ -1,8 +1,15 @@
+/**
+ * Define a store for the current Users list
+ */
Ext.define('example8.store.Userlist', {
+ /** Extend the default Store */
extend: 'Ext.data.Store',
+
+ /** Link to a model for structure */
model: 'example8.model.Userlist',
+ /** Define the store's source */
proxy: {
type: 'ajax',
url: '/example/example8users/format/json',
@@ -11,6 +18,8 @@ Ext.define('example8.store.Userlist', {
root: 'users'
}
},
+
+ /** Set the store to autoload and autosync */
autoLoad: true,
autoSync: true
});
@@ -1,14 +1,29 @@
+/**
+ * Define the Panel that contains the form field and button
+ * for entering new chat messages
+ */
Ext.define('example8.view.index.Chatinput',{
+ /** Extend the default Panel */
extend: 'Ext.panel.Panel',
+
+ /** Give the panel an alias */
alias: 'widget.chatinput',
+
+ /** Turn off the panel's border */
border: false,
+
+ /** Give the panel a height and ID */
height: 30,
id: 'chatpanel',
+ /** Initialize the component, creating the chat form */
initComponent: function() {
+
+ /** Get the current user */
this.currentUser = this.getCurrentUser();
+ /** Define the panel's items (form) */
this.items = [
{
xtype: 'form',
@@ -19,19 +34,22 @@ Ext.define('example8.view.index.Chatinput',{
bodyStyle: 'padding: 3px',
items: [
{
+ /** Display a link for the current username */
html: this.renderUserLink(this.currentUser),
border: false,
bodyStyle: 'padding:4px',
id: 'postingastxt'
},
{
+ /** Hidden field to contain the chat user's ID */
xtype: 'hiddenfield',
name: 'chatUser',
id: 'chatUser',
required: true,
value: indexController.currentUser.id
},
{
+ /** Define the textfield for the message */
xtype: 'textfield',
name: 'chatMessage',
id: 'chatMessage',
@@ -45,14 +63,15 @@ Ext.define('example8.view.index.Chatinput',{
this.callParent(arguments);
},
+ /**
+ * Get the current user from the Index controller
+ */
getCurrentUser: function() {
- //var user = indexController.getStore('Currentuser').getAt(0).data.name;
- console.log(indexController.currentUser);
-
var user = indexController.currentUser.name;
return user;
},
+ /** Renderer for the username link */
renderUserLink: function(username) {
var link = 'posting as: <a href="#" onClick="indexController.loadUserWin()">'
+'<b>'+username+'</b></a>';
@@ -1,9 +1,22 @@
+/**
+ * Define the Window container for the current message list
+ * and the form to add a new message
+ */
Ext.define('example8.view.index.Chatwin', {
+ /** Extend the default Panel */
extend: 'Ext.panel.Panel',
+
+ /** Give it an alias */
alias: 'widget.chatwin',
+
+ /** Give the window a title */
title: 'Latest Chat Messages',
+
+ /** Use the border (region) layout */
layout: 'border',
+
+ /** Items inside the panel */
items: [
{
xtype: 'messagelist',
@@ -1,20 +1,32 @@
+/**
+ * Define a grid for the current message list
+ */
Ext.define('example8.view.index.Messagelist', {
+ /** Extend the default Grid */
extend: 'Ext.grid.Panel',
+
+ /** Give it an alias */
alias: 'widget.messagelist',
- //title : 'Sample Grid',
+ /** Link it to a store */
store : 'Messagelist',
+
+ /** Give the grid an ID */
id: 'messagelist',
+
+ /** Hide the grid's headers */
hideHeaders: true,
+ /** Configure the view - in this case, turn off the "loading" mask */
viewConfig: {
loadMask: false
},
+ /** Initialize the grid */
initComponent: function() {
- // column definition for the grid
+ /** Column definition for the grid */
this.columns = [
{header:'Date',dataIndex:'posted',width:100},
{header:'User',dataIndex:'username',width:90},
@@ -1,3 +1,6 @@
+/**
+ * Define a Grid for the current users list
+ */
Ext.define('example8.view.index.Userlist', {
/** Extend the default grid */
@@ -12,15 +15,17 @@ Ext.define('example8.view.index.Userlist', {
/** The store to pull data from */
store : 'Userlist',
+ /** Give the grid an ID */
id: 'userlistgrid',
+ /** Hide the column headers */
hideHeaders: true,
/** Initialize the grid */
initComponent: function() {
console.log('init sample grid');
- // column definition for the grid
+ /** Column definition for the grid */
this.columns = [
{header:'Username',dataIndex:'username',flex:1}
];
Oops, something went wrong.

0 comments on commit 0d01a8b

Please sign in to comment.