MVC, ExtJS4.1 - Viewport with TabPanel in a border layout
Tabpanel in a view port with onClose listener in a controller. Form panel with combobox that fires events
by Durtto
HTML
<link rel="stylesheet" type="text/css" href="//extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all-gray.css" />
JavaScript
Ext.define('My.model.Contact', {
extend: 'Ext.data.Model',
fields: [
'name'
]
});
Ext.define('My.view.Contact', {
extend: 'Ext.form.Panel',
alias: 'widget.prospectsfilter',
title: 'Contact',
defaults: {
padding: 5,
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
allowBlank: false},
{
xtype: 'combobox',
displayField: 'name',
fieldLabel: 'Campaign(s)',
itemId: 'campaignsComboBox',
listConfig: {
minWidth: 150
},
listeners: {
select: function() {
this.fireEvent('testEvent');
}
},
multiSelect: false,
queryMode: 'local',
store: [1, 2, 3],
value: null,
valueField: 'id'}
],
buttons: [
{
xtype: 'button',
text: 'Save',
action: 'save',
formBind: true
}
]
});
Ext.define('My.controller.Contact', {
extend: 'Ext.app.Controller',
views: ['Contact'],
init: function() {
this.control({
'viewport > #mainContent': { //search by ID
render: this.onMainReady
},
'viewport #CreateButton': { //search by ID
click: this.create
},
'[action=save]': { //any save button
click: this.saveClick
},
'tabpanel tab': {
close: this.onTabClose
},
'prospectsfilter #campaignsComboBox': {
testEvent: function() {
console.log('Found #campaignsComboBox!');
}
}
});
},
saveClick: function(button) {
var panel = button.up('form');
var form = panel.getForm();
var record = form.getRecord();
form.updateRecord(record);
console.log(record.get('name'));
},
create:...