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);
},
});
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.