Commit f451650c authored by Frank Bergmann's avatar Frank Bergmann

- Sencha Touch Notes:

  Finshed demo app
parent 26040b8c
Ext.application({
name: 'PO',
requires: [
'Ext.MessageBox',
'Ext.data.Store',
'Ext.List',
'Ext.plugin.PullRefresh'
],
models: [
'Category',
'Note',
'User'
'Note'
],
stores: [
'NoteStore',
'UserStore',
'ContactStore',
'CategoryNoteTypeStore'
'NoteStore'
],
views: [
'SplashPage',
'UserList',
'UserDetail',
'BlogList',
'NoteList',
'UserNavigationView',
'NoteNavigationView',
'ContactPage',
'NoteDetail',
'NoteList',
'NoteNavigationView'
],
controllers: [
'UserNavigationController',
'NoteNavigationController'
],
......@@ -39,11 +23,9 @@ Ext.application({
fullscreen: true,
tabBarPosition: 'bottom',
items: [
// The application consists of two pages only:
{xtype: 'splashPage'},
// {xtype: 'blogList'},
{xtype: 'noteNavigationView'},
{xtype: 'userNavigationView'},
{xtype: 'contactPage'}
{xtype: 'noteNavigationView'}
]
});
}
......
......@@ -7,7 +7,7 @@ Ext.define('PO.controller.NoteNavigationController', {
},
control: {
'noteNavigationView': {
activate: 'onActivateNavigationView'
initialize: 'onInitializeNavigationView'
},
'noteList': {
disclose: 'showDetail'
......@@ -17,7 +17,7 @@ Ext.define('PO.controller.NoteNavigationController', {
// Initialization of the Container - add a button
// The NavigationView itself doesn't seem to allow for this type of customization
onActivateNavigationView: function(navView) {
onInitializeNavigationView: function(navView) {
var navBar = Ext.ComponentQuery.query('noteNavigationView')[0].getNavigationBar();
navBar.add({
xtype: 'button',
......
Ext.define('PO.controller.UserNavigationController', {
extend: 'Ext.app.Controller',
xtype: 'userNavigationController',
config: {
refs: {
userNavigationView: 'userNavigationView'
},
control: {
'userList': {
disclose: 'showDetail'
}
}
},
showDetail: function(list, record) {
console.log('disclose details');
var view = this.getUserNavigationView();
view.push({
xtype: 'userDetail',
title: record.fullName(),
data: record.data
});
}
});
Ext.define('PO.model.Category', {
extend: 'Ext.data.Model',
config: {
idProperty: 'category_id',
fields: [
{type: 'string', name: 'category_id'},
{type: 'string', name: 'tree_sortkey'},
{type: 'string', name: 'category'},
{type: 'string', name: 'aux_string1'},
{type: 'string', name: 'aux_string2'},
{type: 'string', name: 'category_type'},
{type: 'string', name: 'category_translated'},
{type: 'string', name: 'sort_order'},
{type: 'string', name: 'indent_class',
// Determine the indentation level for each element in the tree
convert: function(value, record) {
var category = record.get('category_translated');
var indent = (record.get('tree_sortkey').length / 8) - 1;
return 'extjs-indent-level-' + indent;
}
},
{type: 'string', name: 'tree_category_translated'}
],
proxy: {
type: 'rest',
url: '/intranet-rest/im_category',
appendId: true, // Append the object_id: ../im_ticket/<object_id>
timeout: 300000,
extraParams: {
format: 'json' // Tell the ]po[ REST to return JSON data.
},
reader: {
type: 'json', // Tell the Proxy Reader to parse JSON
rootProperty: 'data', // Where do the data start in the JSON file?
totalProperty: 'total' // Total number of tickets for pagination
}
}
}
});
......@@ -5,6 +5,7 @@ Ext.define('PO.model.Note', {
'id',
'note',
'object_id',
'note_status_id',
'note_type_id'
],
proxy: {
......
Ext.define('PO.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [
'id',
'first_names',
'last_name'
],
proxy: {
type: 'rest',
url: '/intranet-rest/user',
appendId: true, // Append the object_id: ../im_ticket/<object_id>
timeout: 300000,
extraParams: {
format: 'json', // Tell the ]po[ REST to return JSON data.
deref_p: '0',
columns: 'first_names,last_name'
},
reader: {
type: 'json', // Tell the Proxy Reader to parse JSON
root: 'data', // Where do the data start in the JSON file?
totalProperty: 'total' // Total number of tickets for pagination
},
writer: {
type: 'json' // Allow Sencha to write ticket changes
}
}
},
fullName: function() {
var d = this.data;
return d.first_names + ' ' + d.last_name;
}
});
Ext.define('PO.store.CategoryNoteTypeStore', {
extend: 'Ext.data.Store',
storeId: 'categoryNodeTypeStore',
config: {
model: 'PO.model.Category',
autoLoad: true,
sorters: [{
property: 'sort_order',
direction: 'ASC'
}, {
property: 'tree_sortkey',
direction: 'ASC'
}],
proxy: {
type: 'rest',
url: '/intranet-rest/im_category',
appendId: true,
extraParams: {
format: 'json',
category_type: '\'Intranet Notes Type\''
},
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
});
Ext.define('PO.store.ContactStore', {
extend: 'Ext.data.Store',
config: {
fields: ['first_names', 'last_name'],
autoLoad: true,
sorters: 'first_names',
grouper: {
groupFn: function(record) {
var fn = record.get('first_names');
if (fn == null) { return 'a'; }
return fn[0];
}
},
proxy: {
type: 'rest',
url: '/intranet-rest/user',
appendId: true,
extraParams: {
format: 'json'
},
reader: {
type: 'json',
rootProperty: 'data'
}
}
/*
data: [
{ first_names: 'Ed', last_name: 'Spencer' },
{ first_names: 'Tommy', last_name: 'Maintz' },
{ first_names: 'Aaron', last_name: 'Conran' },
{ first_names: 'Jamie', last_name: 'Avins' }
]
*/
}
});
......@@ -9,8 +9,8 @@ Ext.define('PO.store.NoteStore', {
grouper: {
groupFn: function(record) {
var fn = record.get('note');
if (fn == null) { return 'a'; }
return fn[0];
if (fn == null) { fn = 'a'; }
return fn.toLowerCase()[0];
}
},
......
Ext.define('PO.store.UserStore', {
extend: 'Ext.data.Store',
requires: ['PO.model.User'],
config: {
model: 'PO.model.User',
autoLoad: true,
sorters: 'last_name',
grouper: {
groupFn: function(record) {
var fn = record.get('last_name');
if (fn == null) { return 'a'; }
return fn[0];
}
},
proxy: {
type: 'rest',
url: '/intranet-rest/user',
appendId: true,
extraParams: {
format: 'json'
},
reader: {
type: 'json',
rootProperty: 'data'
}
}
/*
data: [
{ first_names: 'Ed', last_name: 'Spencer' },
{ first_names: 'Tommy', last_name: 'Maintz' },
{ first_names: 'Aaron', last_name: 'Conran' },
{ first_names: 'Jamie', last_name: 'Avins' }
]
*/
}
});
Ext.define('PO.view.BlogList', {
extend: 'Ext.NestedList',
xtype: 'blogList',
config: {
title: 'Blog',
iconCls: 'star',
displayField: 'title',
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('content'));
}
},
store: {
type: 'tree',
fields: [
'title', 'link', 'author', 'contentSnippet', 'content',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
}
});
Ext.define('PO.view.ContactPage', {
extend: 'Ext.form.Panel',
xtype: 'contactPage',
config: {
title: 'Contact',
iconCls: 'user',
// xtype: 'formpanel',
id: 'contactFormPanel',
url: 'http://www.project-open.net/intranet-crm-tracking/contact',
layout: 'vbox',
items: [{
xtype: 'fieldset',
title: 'Contact Us',
instructions: '(email address is optional)',
items: [{
xtype: 'textfield',
name: 'first_names',
label: 'Name'
}, {
xtype: 'emailfield',
name: 'email',
label: 'Email'
}, {
xtype: 'textareafield',
name: 'message',
label: 'Message'
}
]
}, {
xtype: 'button',
text: 'Send',
ui: 'confirm',
handler: function() {
// var form = Ext.getCmp('contactFormPanel').getValues();
var form = this.up('formpanel');
form.submit({
method: 'GET',
url: 'http://www.project-open.net/intranet-crm-tracking/contact',
success: function() {
alert('form submitted successfully!');
},
failure: function() {
alert('form submission failed');
}
});
}
}
]
}
});
......@@ -29,10 +29,15 @@ Ext.define('PO.view.NoteDetail', {
}, {
xtype: 'hiddenfield',
name: 'id'
}, {
xtype: 'hiddenfield',
name: 'note_status_id',
value: 11400
}, {
xtype: 'hiddenfield',
name: 'object_id',
label: 'Object ID'
label: 'Object ID',
value: 0 // Magic value: 0 is the ID of the "guest" object
}
]
}, {
......@@ -53,8 +58,13 @@ Ext.define('PO.view.NoteDetail', {
rec = Ext.ModelManager.create(values, 'PO.model.Note');
}
// Save the model - generates PUT or POST to REST backend
rec.set(values);
rec.save();
// reload the store
var noteStore = Ext.data.StoreManager.lookup('NoteStore');
noteStore.load();
// Return to the list of notes page
var navView = this.up('noteNavigationView');
......
Ext.define('PO.view.UserDetail', {
extend: 'Ext.Panel',
xtype: 'userDetail',
config: {
styleHtmlContent: true,
scrollable: 'vertical',
title: 'User Details',
tpl: 'Hello, {first_names}'
}
});
Ext.define('PO.view.UserList', {
extend: 'Ext.List',
xtype: 'userList',
requires: ['PO.store.UserStore'],
config: {
title: 'UserList',
iconCls: 'star',
itemTpl: '<div class="contact2"><strong>{first_names}</strong> {last_name}</div>',
disclosure: true,
grouped: true,
indexBar: true,
store: 'UserStore',
onItemDisclosure: true
}
});
Ext.define('PO.view.UserNavigationView', {
extend: 'Ext.navigation.View',
xtype: 'userNavigationView',
requires: [
'PO.view.UserList',
'PO.view.UserDetail'
],
config: {
title: 'Users',
iconCls: 'star',
items: [{
xtype: 'userList'
}]
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment