Click here for previous Chapter
So far we have discussed the directory structure of an ExtJs MVC application and the index.html file that will be starting point of our application. Also we have defined the context.xml for our JDBC resource to connect to a Database Server. Lets see how our app.js will look.
Step 4: Source for app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'IN',
appFolder: 'app',
controllers: [
'Items'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
xtype: 'itemlist',
}
]
});
}
});
Ext.application creates a new instance of Application class, to which we passed the name "IN". This automatically sets up a global variable IN for us, and registers the namespace to Ext.Loader, with the corresponding path of 'app' set via the appFolder config option.
The Application launch function runs automatically when everything is loaded. Here the launch function creates a Viewport which contains a single item with xtype as itemlist(still needs to be defined).
Step 5: Define the model - Item.js
A Model represents some object that your application manages. In this example we are going to use the model to represent out Product Table. Models are defined as a set of fields and any arbitrary methods and properties relevant to the model.
Ext.define('IN.model.Item', {
extend: 'Ext.data.Model',
fields: [
'status',
'item',
'desc1',
'desc2',
'weight',
]
});
Step 6: Define the store that will contain the data - Items.js
Creating a Store is easy - we just tell it the Model and the Proxy to use to load and save its data. The Store class encapsulates a client side cache of Model objects. In the example below we configured an AJAX proxy to load data from the url 'ItemMaintenance'. Proxy uses a JsonReader to parse the response from the server into Model object.
Ext.define('IN.store.Items', {
extend: 'Ext.data.Store',
model: 'IN.model.Item',
autoLoad: true,
pageSize: 10,
proxy: {
type: 'ajax',
url: 'ItemMaintenance',
extraParams: {
company: 1
},
reader: {
type: 'json',
totalProperty: 'totalCount',
root: 'items',
successProperty: 'success'
},
},
listeners: {
//After loading the store just commit all the records so only changes are sent when the store is synced
load : function(store) {
store.each(function(record) {
record.commit();
});
}
}
});
Step 7: Create the Grid View Layout so that we can display list of Items - List.js
Grids are composed of two main pieces - a Store full of data and a set of columns to render. Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged <table>, GridPanel makes it easy to fetch, sort and filter large amounts of data.
In the store below we have added Paging using pagingtoolbar and a single button to Add a new Item.
Ext.define('IN.view.item.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.itemlist',
title : 'List of Items',
store : 'Items',
loadMask: true,
autoheight: true,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'Items',
dock: 'bottom',
displayInfo: true,
items: [
{
xtype: 'tbseparator'
},
{
xtype : 'button',
text: 'Add Item',
action: 'add'
}
]
}],
initComponent: function() {
this.columns = [
{header: 'Item Number', dataIndex: 'item', flex: 1},
{header: 'Description 1', dataIndex: 'desc1', flex: 1},
{header: 'Description 2', dataIndex: 'desc2', flex: 1},
{header: 'Weight', dataIndex: 'weight', flex: 1}
];
this.callParent(arguments);
}
});
Step 8: Create the Window Layout so that we can Add or Edit and Item - Edit.js
The window display the Item Number, Decsription1, Description 2 and weight so we can edit them. It has fit layout and also if you see the weight field has custom xtype named mynumberfield. This was done to display the weight in 2 decimal places. Click on the link below to get source for mynumberfield or just change the xtype to numberfield. In the window we have 2 buttons, one for saving the changes and the other one to close the window without making changes.
Ext.define('IN.view.item.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.itemedit',
addMode : false,
title : 'Edit Item Information',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = this.buildItems();
this.buttons = this.buildButtons();
this.callParent(arguments);
},
buildItems: function(){
return [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
itemId: 'itemNumber',
name : 'item',
allowBlank: false,
msgTarget: 'side',
fieldLabel: 'Item Number',
size: 11,
maxLength: 10
},
{
xtype: 'textfield',
name : 'desc1',
allowBlank: false,
msgTarget: 'side',
fieldLabel: 'Description 1',
size: 31,
maxLength: 30
},
{
xtype: 'textfield',
name : 'desc2',
fieldLabel: 'Description 2',
size: 31,
maxLength: 30
},
{
xtype: 'mynumberfield',
name : 'weight',
value: 0,
minValue: 0,
fieldLabel: 'Weight',
decimalPrecision:2,
step:0.01
}
]
}
];
},
buildButtons: function(){
return [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}];
}
});
Click here for next Chapter
