Blog Archive

ExtJs 4 Card Layout example with Grid Panel and Navigation - Part 3

Click here for previous Chapter


Step 14: Define the Panel containing the Payment Information - Panel3.js

Ext.define('myApp.view.Panel3' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.panel3',
    title: 'Step 3: Order Entry - Header > Detail > Payment',
    items: [
 {
     xtype: 'panel',
     layout: {
         type: 'column'
     },
     items: [
         {
             xtype: 'fieldset',
             title: 'Order Header Information',
             columnWidth: 0.5,
             defaults: {
                 bodyPadding: 4,
                 width: 400
             },
              items: [
                {
                    xtype: 'displayfield',
                    itemId: 'orderNo',
                    fieldLabel: 'Order No'
                },
                {
                    xtype: 'displayfield',
                    itemId: 'customerId',
                    fieldLabel: 'Customer No',
                },
                {
                    xtype: 'displayfield',
                    itemId: 'myDate',
                    fieldLabel: 'Order Date',
                }]
         },
         {
             xtype: 'fieldset',
             title: 'Order Summary Information',
             columnWidth: 0.5,
             defaults: {
                 bodyPadding: 4,
                 width: 400
             },
              items: [
                {
                    xtype: 'displayfield',
                    itemId: 'itemCount',
                    fieldLabel: 'No of Lines'
                },
                {
                    xtype: 'displayfield',
                    itemId: 'qtyCount',
                    fieldLabel: 'Quantity Total'
                },
                {
                    xtype: 'displayfield',
                    itemId: 'orderTotal',
                    fieldLabel: 'Order Total',
                }]
         }
     ]
 },
 {
  xtype: 'container',
  margin: '10 0 5 0',
  layout: {
         type: 'hbox'
     },
     width: 450,
  defaults: {
         flex: 1,
     },
  items: [
       {
              xtype: 'button',
                 id: 'continue3',
                 text: 'Continue',
                 iconCls: 'icon-go'
             }, 
             {
              xtype: 'button',
                 id: 'back3',
                 text: 'Back',
                 iconCls: 'icon-back'
             }
          ]
 },    
    {
     xtype: 'paymentEntry'
    }],
    layout: 'auto'
    
   
});

Step 15: Define the Payment Information form - PaymentEntry.js

Ext.define('myApp.view.PaymentEntry', {
    extend: 'Ext.form.Panel',
    alias : 'widget.paymentEntry',
    height: 250,
    width: 600,
    bodyPadding: 10,
    
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
        
         defaults: {
          labelWidth: 200,
         },
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Card Holder Name',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Payment Type',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Card Number',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Expiration Date',
                    anchor: '100%'
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Security Code',
                    anchor: '100%'
                }
            ]
        });

        me.callParent(arguments);
    }
});

Step 16: Finally the application controller - MyController.js

Ext.define('myApp.controller.MyController', {
   extend : 'Ext.app.Controller',
   
   stores: ['Orders','Details'],
      views : ['OrderEntry','Panel1','HeaderEntry',
               'Panel2','DetailEntry','Panel3','PaymentEntry'],
    
   init : function() {
    console.log("Controller init called");
    this.control({
     'orderEntry' : {
      render : this.onPanelRendered
     },
   
     'headerEntry' : {
      render : this.onHeaderRendered,
      edit: this.editHeader
     },
              'panel1 button[id=continue]': {
               click: this.headerContinue
              },
              'panel1 button[id=add]': {
                  click: this.addHeader
              },
     'panel2' : {
      render : this.onDetailRendered,
      destroy: this.onDetailDestroyed 
     },
     'panel2 button[id=back2]': {
                  click: this.detailBack
              },
              'panel2 button[id=add2]': {
                  click: this.addDetail
              },
              'panel2 button[id=continue2]': {
                  click: this.detailContinue
              },
              'panel3' : {
      render : this.onPaymentRendered,
      destroy: this.onPaymentDestroyed 
     },
              'panel3 button[id=back3]': {
                  click: this.paymentBack
              },
              'panel3 button[id=continue3]': {
                  click: this.paymentContinue 
              }
    });
   },

   onPanelRendered : function(myPanel) {
    console.log('The Order Entry Panel was rendered');
   },
      
   onHeaderRendered : function(myPanel) {
    console.log('The header panel was rendered');
   },
   
   editHeader : function() {
    console.log('Editing Header');
   },
   
   headerContinue : function(button) {
    console.log('Continue on Header');
    panel = button.up('orderEntry');
    grid = panel.down('headerEntry');
    selectedRecords = grid.getSelectionModel().getSelection();
    if(selectedRecords.length === 0){
     Ext.MessageBox.alert('Slow down', 
       'Please select an Order first!'); 
     return;
    }
    panel.getLayout().setActiveItem(1);
    panel.down('panel2 #orderNo')
     .setValue(selectedRecords[0].get('orderNo'));
    panel.down('panel2 #customerId')
     .setValue(selectedRecords[0].get('customerId'));
    panel.down('panel2 #myDate')
     .setValue(Ext.Date.dateFormat(selectedRecords[0]
     .get('myDate'), 'M d, Y'));
    panel.down('panel3 #orderNo')
     .setValue(selectedRecords[0].get('orderNo'));
    panel.down('panel3 #customerId')
     .setValue(selectedRecords[0].get('customerId'));
    panel.down('panel3 #myDate')
     .setValue(Ext.Date.dateFormat(selectedRecords[0]
     .get('myDate'), 'M d, Y'));
    
   },
   
   addHeader : function(button) {
    currentOrder++;
    var r = Ext.create('myApp.model.Order', {
                    orderNo: currentOrder,
                    customerId: 'Please enter Customer Id',
                    myDate: Ext.Date.clearTime(new Date())
                });
    this.getOrdersStore().insert(0, r);
    panel = button.up('orderEntry');
    grid = panel.down('headerEntry');
    grid.editingPlugin.startEditByPosition({row: 0, column: 1});
    
   },
   
   onDetailRendered : function(myPanel) {
    console.log('The detail panel was rendered');
   },
   
   onDetailDestroyed : function(myPanel) {
    console.log('The detail panel was destroyed');
   },
   
   detailBack : function(button) {
    console.log('Back to Header');
    panel = button.up('orderEntry');
    panel.getLayout().setActiveItem(0);
    
   },
   
   addDetail : function(button) {
    currentLine++;
    var r = Ext.create('myApp.model.Detail', {
     lineNo: currentLine,
                    itemNo: 'Please enter Item Number',
                    desc: '',
                    quantity: 1,
                    price: 10.99
                });
    this.getDetailsStore().insert(0, r);
    panel = button.up('orderEntry');
    grid = panel.down('detailEntry');
    grid.editingPlugin.startEditByPosition({row: 0, column: 1});
    
   },
   
   detailContinue : function(button) {
    console.log('Continue on Detail');
    var panel = button.up('orderEntry');
    var grid = panel.down('detailEntry');
    var store = grid.getStore();
    var totalLines = 0;
    var qtyCount = 0;
    var orderTotal = 0;
    store.each(function(record,idx){
     totalLines++;
     qtyCount = qtyCount + record.get('quantity'); 
     orderTotal = orderTotal + 
     (record.get('quantity') * record.get('price'));
    });
    
    panel.getLayout().setActiveItem(2);
    panel.down('panel3 #itemCount').setValue(totalLines);
    panel.down('panel3 #qtyCount').setValue(qtyCount);
    panel.down('panel3 #orderTotal').setValue(orderTotal);
    
   },
   
   onPaymentRendered : function(myPanel) {
    console.log('The payment panel was rendered');
   },
   
   onPaymentDestroyed : function(myPanel) {
    console.log('The payment panel was destroyed');
   },

   paymentContinue : function(button) {
    Ext.MessageBox.alert('End of Order...', 
      'Submitted successfully!'); 
   },
   
   paymentBack : function(button) {
    console.log('Back to Detail');
    panel = button.up('orderEntry');
    panel.getLayout().setActiveItem(1);
   },
   
});

2 comments :

  1. Excellent work.. keep it up..

    ReplyDelete
  2. Awesome work dude thanks ..

    ReplyDelete