Blog Archive

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

Click here for previous Chapter


ExtJs 4 Card Layout example with Grid Editing

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


1 comment :

  1. And then we shall start to observe novel utilizes just for wrist-worn wearable computing devices. To comprehend electric power, practically each of the historical factors linked to advancement definitely will disappear. Rescue understanding: cosmetic design and style. The reality is, the luxury look at sector is normally perpetuated by need of men and women to show up far more cool for some reason or possibly one more. Manner is certainly summary, though you will find items individuals will be able to recognize. And most consumers concur that the majority of smartwatches on the market today are not just exactly captivating. It is my opinion part of that is definitely considering we tend to do not find out how to make sure they are hot still. And yet we tend to may. It all only took all the pc enterprise more than twenty years prior to the initially rewarding computer systems released. You are suitable that many of us ordinarily are not fairly furthermore there though, however , there is always next 12 months or maybe all seasons soon after. In truth, to respond to typically the thought presented on the label on this piece of writing. It is my opinion that we all usually are 3-5 numerous years from the a critical contender that the well-known people should seek replica cartier watches uk. To all the timepieces commentators these days that think all of this see have a discussion is usually absurdity, many Groundbreaking, i was declare is definitely you will be targeted much more on the quick. There is a clean appeal to out of individuals to as well as get around on the way to wearable appliances, but also to put solutions to come back on the wrist in case you have regarded all of them away. Very like way once more, this particular range got the country ups and downs and then at long last turn into more potent and even more delightful than previously. At this moment all of us are looking for an incredibly exceptional model for the type: a smallish variation connected with sole 10 articles made available in england coming from looks after replica breitling uk. This unique mannequin can be a charming interconnection around important models on the 1960s and seventies as well as its more contemporary appears to be like. At any time when the observe might be performing, the following aperture offers a particularly today and also dynamic touching on the in any other case vintage seem wax replica watches.

    ReplyDelete