ExtJS provides lots of ready to use components, those can be customize and configured as per the requirement. These components are configured with Model, Store and Proxy to use it as a real entity on the GUI. Lets take an example of showing list of customers inside a Grid Panel.
Grid Panel View is one of the component. If you are not sure about ExtJs object hierarchy, I would share here a UML showing relationship between its objects.
Above represents a class diagram showing different components, here UIView is actually user defined or created JS object for View purpose, for our example UIView would be a panel or if its uses Grid class to derive it would be a GridPanel.
I think its already so much of text now lets see how we actually create a grid panel and its Model, Store and Proxy.
We will follow step process to complete our example as per following steps
1) Create a Model for Customer.
2) Create a Store by defining its Model and Proxy.
3) Create a View, so called GridPanel.
All above steps can be done in a single Java Script file or in 3 different files, as far as readability is concern 3 different JS files are recommended to use so that maintenance would be easier by tracking code segments, keeping all the three in one big file would mess up every thing, no argument that writing all 3 in one file would definitely save a lots of extra things to do hence a fast development.
Step1) Model
Above hierarchy showing user defined Model, which derived from Ext.data.Model.
2) Store
Above showing relationship between Store, Model and Proxy.
3) View
Lets first define a view as given below
Grid Panel View is one of the component. If you are not sure about ExtJs object hierarchy, I would share here a UML showing relationship between its objects.
I think its already so much of text now lets see how we actually create a grid panel and its Model, Store and Proxy.
We will follow step process to complete our example as per following steps
1) Create a Model for Customer.
2) Create a Store by defining its Model and Proxy.
3) Create a View, so called GridPanel.
All above steps can be done in a single Java Script file or in 3 different files, as far as readability is concern 3 different JS files are recommended to use so that maintenance would be easier by tracking code segments, keeping all the three in one big file would mess up every thing, no argument that writing all 3 in one file would definitely save a lots of extra things to do hence a fast development.
Step1) Model
Ext.require('Ext.data.Model');
Ext.define('kp.customer.CustomerModel', {
extend: 'Ext.data.Model',
id:'customerModel',
fields: [
{name:'customerID', type:'int'},
{name:'customerName', type:'string'},
{name:'customerContact', type:'string'},
{name:'customerPhone', type:'string'}
],
proxy:{
type:'ajax',
reader:{
type:'json',
root:'data',
idProperty: 'customerID',
totalProperty : 'total',
successProperty: 'success'
},
writer: {
type: 'json',
encode: true,
root: 'data',
writeAllFields: true
},
api: {
read: 'customer/retrieveAllCustomer.action',
update:'customer/updateCustomer.action',
destroy:'customer/removeCustomer.action',
create:'customer/createCustomer.action'
},
afterRequest:function(request,success){
var thisView = Ext.getCmp('customerListView');
if(thisView != null){
if(request.method == 'POST'){
if(request.operation.success == false) {
Ext.Msg.alert('Error', 'Unable to process the request - Create OR Remove');
thisView.getStore().removed = [];
}
thisView.getStore().load();
}
}
}
}
});
Above model include proxy within it, doing this in Store is also valid.2) Store
Above showing relationship between Store, Model and Proxy.
Ext.define('kp.customer.CustomerStore', {
extend: 'Ext.data.Store',
model:'ecms.customer.CustomerModel',
id:'customerStore',
autoLoad: true, //set to true so that loads without explicitly calling the load method.
autoDestroy: true,
autoSave: false,
pageSize: 10,
pruneModifiedRecords: true
});
3) View
Lets first define a view as given below
Ext.define('ecms.customer.CustomerListView', {
extend: 'Ext.grid.Panel',
alias: 'widget.CustomerListView',
id:'customerListView',
requires:[
'ecms.customer.details.CustomerDetailModel',
'ecms.customer.details.CustomerDetailStore'
],
title: 'Customer List',
height: 350,
width: 1000,
viewConfig:{forcefit:true},
selType: 'rowmodel',
frame:true,
columnLines: true,
viewConfig: {
stripeRows: true
},
initComponent: function() {
var me = this;
me.columns =[
{
header: "CUSTOMER NAME",
width: 120,
sortable: true,
flex: 1,
dataIndex: 'consigneeName',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: "CUSTOMER CONTACT",
width: 100,
sortable: true,
flex:1,
dataIndex: 'consigneeContact',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: "CUSTOMER CITY",
width: 80,
flex:1,
sortable: true,
dataIndex: 'city',
editor: {
xtype: 'textfield',
allowBlank:false
}
},
{
header: "CUSTOMER COUNTRY",
width: 80,
flex:1,
sortable: true,
dataIndex: 'country',
editor: {
xtype: 'textfield',
allowBlank:false
}
}
]
}
});
4) Controller (this is to assemble all above defined JS objects, create them and put together to form a GridPanel with Customer data.)Ext.Loader.setConfig({enabled: true,
paths: {
'Ext.ux': '/ecms-web/extjs/examples/ux',
'Ext.window': '/ecms-web/extjs/src/window',
'ecms.customer' :'/ecms-web/ecms/customer'
}});
Ext.require('ecms.customer.CustomerListView');
var editorC;
Ext.onReady(function(){
var customerMainStore = Ext.create('ecms.customer.CustomerStore');
var customerListView = Ext.create('ecms.customer.CustomerListView',{
renderTo: 'advanced-customer-grid',
store:customerMainStore,
bbar:pagingBar,
plugins:[editorC],
features: [filters]
});
customerMainStore.load();
})
The above JS code would create a GridPanel Component and load the store to display customer data.
No comments:
Post a Comment