Mistpad

by justjohn

HTML

<link rel="stylesheet" href="http://phpfoundry.com:9999/rc/sencha-touch-1.1.0/resources/css/sencha-touch.css">
<script src="http://phpfoundry.com:9999/rc/sencha-touch-1.1.0/sencha-touch-debug.js"></script>

JavaScript

Ext.regModel('Doc', {
    fields: ['title', 'body', 'author', 'date', '_id']
});
 
var store = new Ext.data.Store({
    model  : 'Doc',
    sorters: 'date',
    getGroupString : function(record) {
        return record.get('title')[0];
    },
    proxy: {
        type: 'ajax',
        url : 'http://phpfoundry.com:9999/docs',
        reader: {
            type: 'json',
            root: 'docs'
        }
    },
    autoLoad: true,
});
 
Ext.ns('mistpad', 'mistpad.views');
 
mistpad.App = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    tabBar: {
        ui: 'gray',
        dock: 'bottom',
        layout: { pack: 'center' }
    },    
    cardSwitchAnimation: false,
    initComponent: function() {
        if (navigator.onLine) {
            this.items = [{
                xtype: 'docs',
                iconCls: 'time',
                title: 'Docs'
            }, {
                title: 'Settings',
                iconCls: 'team1',
                xtype: 'docs'
            }];
        } else {
            this.on('render', function(){
                this.el.mask('No internet connection.');
            }, this);
        }
        
        mistpad.App.superclass.initComponent.call(this);
    }
    
});
 
mistpad.views.Docs = Ext.extend(Ext.Panel, {
    layout: 'card',
    
    initComponent: function() {
        
        this.list = new Ext.List({
            grouped: true,
            indexBar: true,
            itemTpl : '{title}',
            store: store,
            listeners: {
                selectionchange: {fn: this.onSelect, scope: this}
            }
        });
        
        this.listpanel = new Ext.Panel({
            layout: 'fit',
            items: this.list,
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Documents'
            }],
            listeners: {
                activate: { fn: function(){
                    this.list.getSelectionModel().deselectAll();
                    Ext.repaint();
      ...