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);
   },
   
});

3 comments :

  1. Excellent work.. keep it up..

    ReplyDelete
  2. Awesome work dude thanks ..

    ReplyDelete
  3. It was subsequently outrageous at the time the steel sports activity enjoy the fact that offered for sale for any same value in the form of keep an eye on coming from several other brands. The actual parallel concerning the auto watching is certainly hilarious, as well as figures can be practically an identical for every single. Regrettably, the stunning rendition on the check out which has been blisteringly fast, and really lavish, satisfied her demise. Any timepieces for sure do not! It was subsequently as a result exquisite as well as fashionable. I thought this was a wristwatch destined being an iconic counsel belonging to the type http://www.hotreplicaonline.com. Whilst all people considered this check out was first beautiful, solely several persons extremely understood benefit involving its develop, as well as tremendous firm regarding the software. Rapid ahead that will 2015. the actual wrist watches are usually in manner inside your just before not to mention ceramic is a best content about. Sales is certainly complete with timepieces created from naff, material as well as altered metal.

    ReplyDelete