Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Initial commit of Ext JS 4.X CRUD demo app.

Signed-off-by: Justin Noel <justin.noel@syniverse.com>
  • Loading branch information...
commit 50b28e40c695a09e9c0c3ed9b877d0ef05a59595 0 parents
Justin Noel authored
22 app.js
@@ -0,0 +1,22 @@
+Ext.application({
+ name: 'DEMO', // Global namespace
+
+ appFolder: 'app',
+
+ controllers: [
+ 'LayoutController',
+ 'CustomerListController',
+ 'VendorListController'
+ ],
+
+ launch: function() {
+ Ext.create('Ext.container.Viewport', {
+ layout: 'border',
+ items: [
+ { xtype: 'ManagementArea' },
+ { xtype: 'ListsContainer' },
+ { xtype: 'AppHeader' }
+ ]
+ });
+ }
+});
59 app/controller/CustomerListController.js
@@ -0,0 +1,59 @@
+Ext.define('DEMO.controller.CustomerListController', {
+ extend: 'Ext.app.Controller',
+
+ stores: ['CustomerListStore'],
+ models: ['CustomerListModel'],
+
+ views: [
+ 'customers.CustomerList'
+ ],
+
+ init: function() {
+
+ this.control({
+ 'CustomerList' : {
+ itemclick: this.customerClicked
+ }
+ });
+ },
+
+
+ customerClicked: function(grid, record) {
+
+ alert('You clicked a record');
+
+ // // Get the selected operators id and update all the operators forms.
+ // // Keep it in name space for use by other non-form based events
+ // GSP.selectedOperatorsId = record.data.operators_id;
+//
+ // enableOperatorToolbarButtons();
+//
+ // // Each time a different operator is selected, make sure the operator
+ // // management section is updated.
+ // var opMgmt = Ext.ComponentQuery.query('OperatorMgmt');
+ // var opMgmtActive = opMgmt[0].getLayout().getActiveItem();
+ // opMgmtActive.enable();
+//
+ // var operName = record.data.operators_name;
+//
+ // // Update all the panels with the name of the current operator
+ // var panels = Ext.ComponentQuery.query('OperatorMgmt panel, form');
+//
+ // if( ! GSP.originalOperatorTitles.hasOwnProperty('origsSaved') )
+ // {
+ // originalTitles(panels, GSP.originalOperatorTitles);
+ // }
+//
+ // Ext.Array.each(panels, function(item) {
+ // var title = item.title;
+ // var xtype = item.xtype;
+//
+ // if(title !== 'Add Operator')
+ // {
+ // item.setTitle(GSP.originalOperatorTitles[xtype] + ' - ' + operName);
+ // }
+//
+ // });
+ }
+
+});
57 app/controller/LayoutController.js
@@ -0,0 +1,57 @@
+Ext.define('DEMO.controller.LayoutController', {
+ extend: 'Ext.app.Controller',
+ views: [
+ 'layout.AppHeader',
+ 'layout.ListsContainer',
+ 'layout.ManagementArea',
+ 'customers.CustomerManagement',
+ 'vendors.VendorManagement'
+ ],
+
+ init: function() {
+
+ this.control({
+ 'ManagementArea' : {
+ tabchange: this.tabChanged
+ }
+ });
+ },
+
+
+ tabChanged: function(tabPanel, tab) {
+ tabXType = tab.getXType();
+
+ var lists_container = Ext.ComponentQuery.query('ListsContainer');
+
+ switch(tabXType)
+ {
+ case 'CustomerManagement':
+ var customers = Ext.ComponentQuery.query('CustomerList');
+ var vendors = Ext.ComponentQuery.query('VendorList');
+
+ vendors[0].setVisible(false);
+ customers[0].setVisible(true);
+
+ lists_container[0].setTitle('Customers');
+
+ break;
+
+ case 'VendorManagement':
+ var customers = Ext.ComponentQuery.query('CustomerList');
+ var vendors = Ext.ComponentQuery.query('VendorList');
+
+ customers[0].setVisible(false);
+ vendors[0].setVisible(true);
+
+ lists_container[0].setTitle('Vendors');
+
+ break;
+
+ default:
+ alert('An unknown tab was clicked.');
+ break;
+ }
+
+ }
+
+});
59 app/controller/VendorListController.js
@@ -0,0 +1,59 @@
+Ext.define('DEMO.controller.VendorListController', {
+ extend: 'Ext.app.Controller',
+
+ stores: ['VendorListStore'],
+ models: ['VendorListModel'],
+
+ views: [
+ 'vendors.VendorList'
+ ],
+
+ init: function() {
+
+ this.control({
+ 'VendorList' : {
+ itemclick: this.vendorClicked
+ }
+ });
+ },
+
+
+ vendorClicked: function(grid, record) {
+
+ alert('You clicked a record');
+
+ // // Get the selected operators id and update all the operators forms.
+ // // Keep it in name space for use by other non-form based events
+ // GSP.selectedOperatorsId = record.data.operators_id;
+//
+ // enableOperatorToolbarButtons();
+//
+ // // Each time a different operator is selected, make sure the operator
+ // // management section is updated.
+ // var opMgmt = Ext.ComponentQuery.query('OperatorMgmt');
+ // var opMgmtActive = opMgmt[0].getLayout().getActiveItem();
+ // opMgmtActive.enable();
+//
+ // var operName = record.data.operators_name;
+//
+ // // Update all the panels with the name of the current operator
+ // var panels = Ext.ComponentQuery.query('OperatorMgmt panel, form');
+//
+ // if( ! GSP.originalOperatorTitles.hasOwnProperty('origsSaved') )
+ // {
+ // originalTitles(panels, GSP.originalOperatorTitles);
+ // }
+//
+ // Ext.Array.each(panels, function(item) {
+ // var title = item.title;
+ // var xtype = item.xtype;
+//
+ // if(title !== 'Add Operator')
+ // {
+ // item.setTitle(GSP.originalOperatorTitles[xtype] + ' - ' + operName);
+ // }
+//
+ // });
+ }
+
+});
28 app/model/CustomerListModel.js
@@ -0,0 +1,28 @@
+Ext.define('DEMO.model.CustomerListModel', {
+ extend : 'Ext.data.Model',
+ fields : [
+ 'customers_id', 'customer_name', 'start_date',
+ {
+ name : 'last_order',
+ type :'date',
+ dateFormat : 'Y-m-d'
+ }
+ ],
+
+ proxy : {
+ type : 'ajax',
+ url : 'customer_list.php',
+ extraParams : {
+ total: 50
+ },
+
+ reader : {
+ type : 'json',
+ root : 'customers',
+ totalProperty : 'totalCount'
+ },
+
+ simpleSortMode : true
+ }
+
+});
28 app/model/VendorListModel.js
@@ -0,0 +1,28 @@
+Ext.define('DEMO.model.VendorListModel', {
+ extend : 'Ext.data.Model',
+ fields : [
+ 'vendors_id', 'vendor_name', 'start_date',
+ {
+ name : 'last_order',
+ type :'date',
+ dateFormat : 'Y-m-d'
+ }
+ ],
+
+ proxy : {
+ type : 'ajax',
+ url : 'vendor_list.php',
+ extraParams : {
+ total: 50
+ },
+
+ reader : {
+ type : 'json',
+ root : 'vendors',
+ totalProperty : 'totalCount'
+ },
+
+ simpleSortMode : true
+ }
+
+});
16 app/store/CustomerListStore.js
@@ -0,0 +1,16 @@
+Ext.define('DEMO.store.CustomerListStore', {
+ extend: 'Ext.data.Store',
+ model: 'DEMO.model.CustomerListModel',
+
+ pageSize: 50,
+ autoLoad: false,
+
+ remoteSort: true,
+ sorters: {
+ property: 'customer_name',
+ direction: 'ASC'
+ },
+
+
+
+});
16 app/store/VendorListStore.js
@@ -0,0 +1,16 @@
+Ext.define('DEMO.store.VendorListStore', {
+ extend: 'Ext.data.Store',
+ model: 'DEMO.model.VendorListModel',
+
+ pageSize: 50,
+ autoLoad: false,
+
+ remoteSort: true,
+ sorters: {
+ property: 'vendor_name',
+ direction: 'ASC'
+ },
+
+
+
+});
22 app/view/customers/CustomerList.js
@@ -0,0 +1,22 @@
+Ext.define('DEMO.view.customers.CustomerList' ,{
+ extend: 'Ext.grid.Panel',
+ alias : 'widget.CustomerList',
+
+ store: 'CustomerListStore',
+
+ initComponent: function() {
+ this.columns = [
+ { header: 'Customer Name', dataIndex: 'customer_name', flex: 2 },
+ {
+ header: 'Last Order', dataIndex: 'start_date', flex: 1,
+ renderer: Ext.util.Format.dateRenderer('Y-m-d')
+ },
+ {
+ header: 'Last Order', dataIndex: 'last_order', flex: 1,
+ renderer: Ext.util.Format.dateRenderer('Y-m-d')
+ }
+ ];
+
+ this.callParent(arguments);
+ }
+});
31 app/view/customers/CustomerManagement.js
@@ -0,0 +1,31 @@
+Ext.define('DEMO.view.customers.CustomerManagement' ,{
+ extend : 'Ext.panel.Panel',
+ alias : 'widget.CustomerManagement',
+
+ layout : 'card',
+ activeItem: 0,
+
+ autoScroll : true,
+
+ items : [
+ // {
+ // xtype : 'CustomerList'
+ // },
+ // {
+ // xtype : 'CustmomerOrders'
+ // }
+ ],
+
+ // Add the top toolbar
+ dockedItems : [{
+ // xtype: 'CustomerMgmtToolbar',
+ // dock: 'top'
+ }],
+
+
+ initComponent: function() {
+ this.callParent(arguments);
+ }
+
+
+});
17 app/view/layout/AppHeader.js
@@ -0,0 +1,17 @@
+Ext.define('DEMO.view.layout.AppHeader' ,{
+ extend: 'Ext.container.Container',
+ alias : 'widget.AppHeader',
+
+ id: 'app-header',
+
+ region: 'north',
+ layout: 'hbox',
+ height: 35,
+ xtype: 'box',
+
+ html : 'XYZ Company - <span class="subtitle">Customer and Vendor Management</span>',
+
+ initComponent: function() {
+ this.callParent(arguments);
+ }
+});
21 app/view/layout/ListsContainer.js
@@ -0,0 +1,21 @@
+Ext.define('DEMO.view.layout.ListsContainer' ,{
+ extend: 'Ext.panel.Panel',
+ alias : 'widget.ListsContainer',
+
+ title : 'Customers',
+ region: 'west',
+ width: 600,
+
+ split: true,
+ collapsible: true,
+
+ layout: 'card',
+ items: [
+ {xtype : 'CustomerList'},
+ {xtype : 'VendorList'}
+ ],
+
+ initComponent: function() {
+ this.callParent(arguments);
+ }
+});
21 app/view/layout/ManagementArea.js
@@ -0,0 +1,21 @@
+Ext.define('DEMO.view.layout.ManagementArea' ,{
+ extend : 'Ext.tab.Panel',
+ alias : 'widget.ManagementArea',
+
+ region : 'center',
+
+ items: [
+ {
+ title : 'Customer Management',
+ xtype : 'CustomerManagement'
+ },
+ {
+ title : 'Vendor Management',
+ xtype : 'VendorManagement'
+ }
+ ],
+
+ initComponent: function() {
+ this.callParent(arguments);
+ }
+});
23 app/view/vendors/VendorList.js
@@ -0,0 +1,23 @@
+Ext.define('DEMO.view.vendors.VendorList' ,{
+ extend: 'Ext.grid.Panel',
+ alias : 'widget.VendorList',
+
+ store: 'VendorListStore',
+
+ initComponent: function() {
+ this.columns = [
+ { header: 'Vendor Name', dataIndex: 'vendor_name', flex: 2 },
+ { header: 'Payment Terms', dataIndex: 'payment_terms', flex: 2 },
+ {
+ header: 'Vendor Since', dataIndex: 'start_date', flex: 1,
+ renderer: Ext.util.Format.dateRenderer('Y-m-d')
+ },
+ {
+ header: 'Last Order', dataIndex: 'last_order', flex: 1,
+ renderer: Ext.util.Format.dateRenderer('Y-m-d')
+ }
+ ];
+
+ this.callParent(arguments);
+ }
+});
31 app/view/vendors/VendorManagement.js
@@ -0,0 +1,31 @@
+Ext.define('DEMO.view.vendors.VendorManagement' ,{
+ extend : 'Ext.panel.Panel',
+ alias : 'widget.VendorManagement',
+
+ layout : 'card',
+ activeItem: 0,
+
+ autoScroll : true,
+
+ items : [
+ // {
+ // xtype : 'CustomerEdit'
+ // },
+ // {
+ // xtype : 'CustmomerOrders'
+ // }
+ ],
+
+ // Add the top toolbar
+ dockedItems : [{
+ // xtype: 'CustomerMgmtToolbar',
+ // dock: 'top'
+ }],
+
+
+ initComponent: function() {
+ this.callParent(arguments);
+ }
+
+
+});
24 css/app.css
@@ -0,0 +1,24 @@
+#app-header {
+ font-family: Arial, sans-serif;
+ color: #596F8F;
+ font-size: 22px;
+ font-weight: 200;
+ padding: 5px;
+ text-shadow: 0 1px 0 #fff;
+}
+#app-header .subtitle {
+ font-size: 14px;
+ color: #369;
+}
+
+.checkbox-labels{
+ margin-left: 10px;
+}
+
+.x-fieldset-header-text{
+ margin: 0 3px;
+}
+
+.dirtyfield {
+ background-color: #ff0;
+}
11 index.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+ <title>Ext JS 4.X Demo App</title>
+
+ <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
+ <link rel="stylesheet" type="text/css" href="css/app.css">
+
+ <script type="text/javascript" src="ext/ext-debug.js"></script>
+ <script type="text/javascript" src="app.js"></script>
+</head>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.