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

Click here for previous Chapter

Step 9: Define the Panel containing Order Detail Information - Panel2.js

Ext.define('myApp.view.Panel2' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.panel2',
    title: 'Step 2: Order Entry - Header > Detail',
    items: [
 {
    xtype: 'fieldset',
    title: 'Header Information',
    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: 'container',
  margin: '10 0 5 0',
  layout: {
         type: 'hbox'
     },
     width: 450,
  defaults: {
         flex: 1,
     },
  items: [
       {
              xtype: 'button',
                 id: 'add2',
                 text: 'New Detail',
                 iconCls: 'icon-add'
       },
             {
              xtype: 'button',
                 id: 'continue2',
                 text: 'Continue',
                 iconCls: 'icon-go'
             }, 
             {
              xtype: 'button',
                 id: 'back2',
                 text: 'Back',
                 iconCls: 'icon-back'
             }
          ]
 },    
    {
     xtype: 'detailEntry'
    }],
    layout: 'auto'
    
   
});

Step 10: Define the Order Detail model - Detail.js

Ext.define('myApp.model.Detail', {
    extend: 'Ext.data.Model',
    fields: [
             'lineNo',
             'itemNo',
             'desc',
             'quantity',
             'price'
             ]
});

Step 11: Define the Order Detail store - Details.js

var currentLine = 4;

Ext.define('myApp.store.Details', {
    extend: 'Ext.data.Store',
    model: 'myApp.model.Detail',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        api: {
            read: 'data/details.json',
        },
        reader: {
            type: 'json',
            root: 'details',
            successProperty: 'success'
        }
    }
});

Step 12: Sample data for the Order Detail store - details.json

{
    success: true,
    details: [
        {
         lineNo: 1, 
         itemNo: '100100100', 
         desc: 'My Favorite Item# 1', 
         quantity: 10, 
         price: 12.99
        },
        {
         lineNo: 2, 
         itemNo: '200200200', 
         desc: 'My Favorite Item# 2', 
         quantity: 10, 
         price: 19.99
        },
        {
         lineNo: 3, 
         itemNo: '300300300', 
         desc: 'My Favorite Item# 3', 
         quantity: 20, 
         price: 29.99
        },
        {
         lineNo: 4, 
         itemNo: '300300300', 
         desc: 'My Favorite Item# 4', 
         quantity: 20, 
         price: 39.99
        }
   
    ]
}

Step 13: Grid Panel for editing and displaying Detail Items - DetailEntry.js

Ext.define('myApp.view.DetailEntry' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.detailEntry',
    store : 'Details',
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    
    initComponent: function() {
        
     this.columns = [
            {header: 'Line No.',  dataIndex: 'lineNo',  flex: 1},
            {header: 'Item No.',  dataIndex: 'itemNo',  flex: 1,
             editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }},
            {header: 'Description',  dataIndex: 'desc',  flex: 1,
             editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }},
            {header: 'Quantity',  dataIndex: 'quantity',  flex: 1,
             editor: {
                    xtype: 'numberfield',
                    allowBlank: false
                }},
            {header: 'Price',  dataIndex: 'price',  flex: 1,
                 editor: {
                        xtype: 'numberfield',
                        allowBlank: false
                }}
        ];

        this.callParent(arguments);
    }
    
   
});

Click here for next Chapter