In this below ExtJS application i want to know how the control goes to PopupForm class when clicked onPopupForm function in MyListViewController. This application use MVC+VM architecture or roughly MVC.
Link for the example in fiddle tool:https://fiddle.sencha.com/#fiddle/1dma&view/editor
Ext.define('Employees', {
extend: 'Ext.data.Store',
alias: 'store.employees',
proxy: {
type: 'ajax',
url: 'data1.json'
}
});
Ext.define('PopupForm', {
extend: 'Ext.form.Panel',
xtype: 'popupform',
controller: 'popupform',
title: 'Update Record',
width: 300,
floating: true,
centered: true,
modal: true,
items: [{
xtype: 'textfield',
name: 'firstname',
label: 'First Name',
bind: '{employee.firstName}'
}, {
xtype: 'textfield',
name: 'lastname',
label: 'Last Name',
bind: '{employee.lastName}'
}, {
xtype: 'textfield',
name: 'phonenumber',
label: 'Phone Number',
bind: '{employee.phoneNumber}'
}, {
xtype: 'textfield',
name: 'office',
label: 'Office Location',
bind: '{employee.officeLocation}',
/* options: [{
text: "Redwood City, CA",
value: 'Redwood City, CA'
}, {
text: "Lawrence, KS",
value: 'lk'
}, {
text: "Frederick, MD",
value: 'fmd'
}],*/
defaultTabletPickerConfig: {
height: 200
}
}, {
xtype: 'toolbar',
docked: 'bottom',
items: ['->', {
xtype: 'button',
text: 'Submit',
iconCls: 'x-fa fa-check',
handler: 'submitUpdate'
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: 'cancelUpdate'
}]
}]
});
Ext.define('PopupFormController', {
extend: 'Ext.app.ViewController',
alias: 'controller.popupform',
cancelUpdate: function () {
var view = this.getView(),
record = view.getRecord();
view.destroy();
record.reject();
},
submitUpdate: function(me) {
var view = this.getView(),
record = view.getRecord();
view.destroy();
record.commit();
}
});
//----------------------------------------------------
Ext.define('MyListViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.listview',
onPopupForm: function (view, index, item, record) {
Ext.Viewport.add({
xtype: 'popupform',
width: 400,
//record: record,
viewModel : {
data: {
employee: record
}
}
});
}
});
Ext.application({
name: 'Sencha Employee Directory',
launch: function() {
Ext.Viewport.add({
xtype: 'tabpanel',
controller: 'listview',
items: [{
title: 'Employee Directory',
xtype: 'grid',
iconCls: 'x-fa fa-users',
grouped: true,
listeners: {
itemtap: 'onPopupForm'
},
store: {
type: 'employees',
autoLoad: true,
sorters: ['firstName', 'lastName', 'officeLocation'],
grouper: 'officeLocation'
},
columns: [{
text: 'First Name',
dataIndex: 'firstName',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lastName',
flex: 1
}, {
text: 'Phone Number',
dataIndex: 'phoneNumber',
flex: 1
}]
},{
title: 'About Sencha',
padding: 20,
iconCls: 'x-fa fa-info-circle',
html: '<h1>About Sencha</h1><br/>More than 10,000 customers and 60% of the Fortune 100 rely on Sencha solutions to deliver innovative applications that drive their businesses. With a longstanding commitment to web technologies, Sencha dramatically reduces the cost and complexity of developing and delivering enterprise applications across multiple device types.<br/><br/><h2>Create feature-rich HTML5 applications using JavaScript</h2><br/>Sencha Ext JS is the most comprehensive MVC/MVVM JavaScript framework for building feature-rich, cross-platform web applications targeting desktops, tablets, and smartphones. Ext JS leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers.<br/><br/>Ext JS features hundreds of high-performance UI widgets that are meticulously designed to fit the needs of the simplest as well as the most complex web applications. Ext JS templates and layout manager give you full control over your display irrespective of devices and screen sizes. An advanced charting package allows you to visualize large quantities of data. The framework includes a robust data package that can consume data from any backend data source. Ext JS also offers several out-of-the-box themes, and complete theming support that lets you build applications that reflect your brand. It also includes an accessibility package (ARIA) to help with Section 508 compliance.'
}]
});
}
});
Uses the following JSON data store:
[{
"firstName": "Jean",
"lastName": "Grey",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(372) 792-6728"
}, {
"firstName": "Phillip",
"lastName": "Fry",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(318) 224-8644"
}, {
"firstName": "Peter",
"lastName": "Quill",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(718) 480-8560"
}, {
"firstName": "Jessica",
"lastName": "Wright",
"officeLocation": "Frederick, MD",
"phoneNumber": "(812) 522-7104"
}, {
"firstName": "Juan",
"lastName": "Stone",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(837) 379-6432"
}, {
"firstName": "Jessica",
"lastName": "Jones",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(662) 494-7517"
}, {
"firstName": "Rose",
"lastName": "Simpson",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(857) 264-9899"
}, {
"firstName": "Mildred",
"lastName": "Ruiz",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(443) 323-9518"
}, {
"firstName": "Ruth",
"lastName": "Murphy",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(516) 884-5081"
}, {
"firstName": "Alan",
"lastName": "Washington",
"officeLocation": "Frederick, MD",
"phoneNumber": "(725) 915-8297"
}, {
"firstName": "Catherine",
"lastName": "Murphy",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(227) 546-3855"
}, {
"firstName": "Helen",
"lastName": "Owens",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(483) 127-7184"
}, {
"firstName": "Eric",
"lastName": "Lee",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(788) 756-7666"
}, {
"firstName": "Donald",
"lastName": "Dean",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(846) 214-2178"
}, {
"firstName": "Ronald",
"lastName": "Edwards",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(342) 146-2793"
}, {
"firstName": "Carlos",
"lastName": "Wright",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(958) 869-8461"
}, {
"firstName": "Rachel",
"lastName": "Kim",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(921) 823-8187"
}, {
"firstName": "Jennifer",
"lastName": "Day",
"officeLocation": "Frederick, MD",
"phoneNumber": "(566) 375-8600"
}, {
"firstName": "Victor",
"lastName": "Reid",
"officeLocation": "Frederick, MD",
"phoneNumber": "(873) 846-5132"
}, {
"firstName": "Charles",
"lastName": "Ramirez",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(260) 431-1648"
}, {
"firstName": "Mary",
"lastName": "Miller",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(197) 844-8417"
}, {
"firstName": "Lawrence",
"lastName": "Ramirez",
"officeLocation": "Redwood City, CA",
"phoneNumber": "(368) 884-2585"
}, {
"firstName": "Roy",
"lastName": "Carroll",
"officeLocation": "Frederick, MD",
"phoneNumber": "(153) 192-7967"
}, {
"firstName": "Christopher",
"lastName": "Rogers",
"officeLocation": "Lawrence, KS",
"phoneNumber": "(286) 360-1439"
}, {
"firstName": "Phyllis",
"lastName": "Patterson",
"officeLocation": "Frederick, MD",
"phoneNumber": "(915) 877-4798"
}]
