View Full Version : Xtype semantic in controllers and how do they work?

8 Feb 2013, 12:14 PM
Perhaps you help me understand something. Below in the controller code I see in the refs section 'usertlist' that is also referenced in in the init function, so this sort of makes sense to me. However, what is this dataview and what is the useredit button xtypes? Can you explain to me how these work and is there a list of reserved names? It is not intuitive and I can't seem to find any good examples with explanations. It sort of looks like dataview and button reference something real, but useredit is made up. If "useredit" was part of the "refs" section is might make some sense, but it all seems so arbitrary. I can't connect the dots.

Is there a good place to understand how this "hidden" stuff works?

-Denis Putnam

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',

config: {
stores: ['Users'],

models: ['User'],

views: ['user.Edit', 'user.List'],

refs: [{
ref: 'usersList',
selector: 'userlist'

init: function(app) {
'userlist dataview': {
itemdblclick: this.editUser
'useredit button[action=save]': {
click: this.updateUser
'useredit button[action=cancel]': {
click: this.cancelEditUser

app.on('departmentselected', function(app, model) {
this.getUsersList().setTitle(model.get('name') + ' Users');
}, this);

editUser: function(grid, record) {
var edit = Ext.create('AM.view.user.Edit').show();


updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();

cancelEditUser: function(button) {
var win = button.up('window');

8 Feb 2013, 2:44 PM
That's very simple:
useredit is an xtype of one of the views, i.e. mentioned as alias: 'widget.useredit'
followed by any descendant components can be mentioned with their type/xtypes/itemIds etc... in general they are all valid selectors

To know about how selectors can be formed, here is the reference API:

10 Feb 2013, 11:06 AM
I was interested in the userlist dataview. I don't know where the dataview is. It is not specified anywhere in the code. Is this something to do with the viewport? What is the dataview?

10 Feb 2013, 12:19 PM
Dataview is a component that can display a list of data models:

You must be having a dataview component inside your userlist view.

11 Feb 2013, 4:23 PM
Okay, so I see this which explains the "userlist" reference. So do all the panels, grids, and so forth inherit from the Ext.view.View component? How does one know that the xtype should be dataview in this case? How does one determine these xtype relationships? Are they defined in one place in the documentation?

It's not immediately obvious that the xtype should be "dataview".

Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',

title: 'All Users',
store: 'Users',

columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}

tools: [
type: 'refresh',
tooltip: 'Refresh',
handler: function () {
var pnl = this.up('userlist');
pnl.setTitle('All Users');

filterUsersByDepartment: function (deptCode) {

11 Feb 2013, 5:08 PM
The example is a bit confusing. Internally, a grid contains a single child item which is a grid view (which extends Ext.view.View).

However, it's not necessary since the grid relays all of the UI events from the view up to the grid, the user shouldn't need to know the internal structure.

As such, the selector could just be written as:

userlist: {
itemdblclick: ...

Also, in future please use code tags if you're posting code to make it legible.