Setup model, store and views for users model.

nelstrom · Jul 5, 2011 · 9e3ec33 · 9e3ec33
1 parent ee04fdc
commit 9e3ec33
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 0 deletions.
diff --git a/public/app/models/User.js b/public/app/models/User.js
@@ -0,0 +1,27 @@
+App.models.User = Ext.regModel('User', {
+    fields: [
+        {
+            name: 'id',
+            type: 'int'
+        }, {
+            name: 'name',
+            type: 'string'
+        }, {
+            name: 'email',
+            type: 'string'
+        }
+    ],
+
+    validations: [
+        {
+            type: 'presence',
+            name: 'name'
+        }, {
+            type: 'format',
+            name: 'email',
+            matcher: /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
+            message: 'must be a valid email'
+        }
+    ],
+
+});
diff --git a/public/app/stores/Users.js b/public/app/stores/Users.js
@@ -0,0 +1,16 @@
+App.stores.users = new Ext.data.Store({
+    model: 'User',
+    autoLoad: true,
+    proxy: {
+        type: 'localstorage',
+        id: 'sencha-users'
+    }
+});
+
+// temporary data, for use until full CRUD is implemented
+App.stores.users.proxy.clear();
+App.stores.users.add({ name: 'Drew Neil', email: 'drew.neil@example.com' });
+App.stores.users.add({ name: 'James Pearce', email: 'james.pearce@example.com' });
+App.stores.users.add({ name: 'Ed Spencer', email: 'ed.spencer@example.com' });
+App.stores.users.add({ name: 'Tommy Mainz', email: 'tommy.mainz@example.com' });
+App.stores.users.sync();
diff --git a/public/app/views/users/form.js b/public/app/views/users/form.js
@@ -0,0 +1,11 @@
+App.views.UsersForm = Ext.extend(Ext.form.FormPanel, {
+    initComponent: function(){
+        Ext.apply(this, {
+            html: 'user form'
+        });
+
+        App.views.UsersForm.superclass.initComponent.call(this);
+    }
+});
+
+Ext.reg('App.views.UsersForm', App.views.UsersForm);
diff --git a/public/app/views/users/list.js b/public/app/views/users/list.js
@@ -0,0 +1,29 @@
+App.views.UsersList = Ext.extend(Ext.Panel, {
+    initComponent: function(){
+        Ext.apply(this, {
+            html: 'placeholder',
+            layout: 'fit',
+
+            dockedItems: [
+                {
+                    dock: 'top',
+                    xtype: 'toolbar',
+                    title: 'Users',
+                    items: []
+                }
+            ],
+            items: [
+                {
+                    xtype: 'list',
+                    itemTpl: '{name}',
+                    store: App.stores.users,
+                    emptyText: '<div class="emptytext">There are no users in the system at the moment.</div>',
+                }
+            ]
+        });
+
+        App.views.UsersList.superclass.initComponent.call(this);
+    }
+});
+
+Ext.reg('App.views.UsersList', App.views.UsersList);
diff --git a/public/app/views/viewport.js b/public/app/views/viewport.js
@@ -1,7 +1,14 @@
 App.views.Viewport = Ext.extend(Ext.Panel, {
     fullscreen: true,
+    layout: 'card',
 
     initComponent: function() {
+        Ext.apply(this, {
+            items: [
+                { xtype: 'App.views.UsersList' },
+                { xtype: 'App.views.UsersForm' },
+            ]
+        });
         App.views.Viewport.superclass.initComponent.apply(this, arguments);
     }
 });
diff --git a/public/index.html b/public/index.html
@@ -8,7 +8,15 @@
   <script src="lib/sencha-touch-debug.js" type="text/javascript"></script>
   <!-- app, models, stores, views, controllers [in that order!] -->
   <script src="app/app.js" type="text/javascript"></script>
+  <!--models-->
+  <script src="app/models/User.js" type="text/javascript"></script>
+  <!--stores-->
+  <script src="app/stores/Users.js" type="text/javascript"></script>
+  <!--views-->
+  <script src="app/views/users/List.js" type="text/javascript"></script>
+  <script src="app/views/users/Form.js" type="text/javascript"></script>
   <script src="app/views/Viewport.js" type="text/javascript"></script>
+  <!--controllers-->
 
 </head>
 <body>