ExtJS - Destroying a View Controller
This piece of code demonstrates the ability to destroy an Ext.app.ViewController instance at runtime.
by Alexander Tymchuk
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.1/classic/theme-neptune/resources/theme-neptune-all.css">
<div id="app">
</div>
<div id="command" style="margin-top: 10px">
</div>
<div id="date" style="margin-top: 10px">
</div>
JavaScript
Ext.ns('SM');
Ext.define('SM.User', {
extend: 'Ext.data.Model',
fields: ['name', 'phone']
});
Ext.define('Sm.UserListController', {
extend : 'Ext.app.ViewController',
alias: 'controller.userlist',
init: function(view) {
this.userCount = 0;
var users = [],
i;
for (i = 0; i < 5; ++i) {
users.push(this.getUser());
}
view.getStore().add(users);
},
onAddClick: function() {
this.addUser();
},
onDeleteClick: function() {
var view = this.getView(),
selected = view.getSelectionModel().getSelection()[0],
store = view.getStore();
store.remove(selected);
},
onSelectionChange: function(selModel, selections) {
this.lookupReference('delete').setDisabled(selections.length === 0);
},
getUser: function() {
++this.userCount;
return {
name: 'User ' + this.userCount,
phone: this.generatePhone()
};
},
addUser: function() {
this.getView().getStore().add(this.getUser());
},
generatePhone: function() {
var num = '',
i;
for (i = 0; i < 7; ++i) {
num += Ext.Number.randomInt(0, 9);
if (num.length === 3) {
num += '-';
}
}
return num;
}
});
Ext.define('SM.UserList', {
extend: 'Ext.grid.Panel',
tbar: [{
text: 'Add',
listeners: {
click: 'onAddClick'
}
}, {
text: 'Delete',
disabled: true,
reference: 'delete',
listeners: {
click: 'onDeleteClick'
}
}],
store: {
model: 'SM.User'
},
selModel: {
type: 'rowmodel',
listeners: {
selectionchange: 'onSelectionChange'
}
},
columns: [{
flex: 1,
dataIndex: 'name',
text: 'Name'
}, {
flex:...