Develop Reference

ExtJS 6 - Store $binding is undefined

I need to perform certain operations when a store is loaded. The problem is when the 'load' event of the store is triggered, '$binding' is undefined, and thus the 'owner' property is unavailable.
The store and its listener for the 'load' event are defined in the ViewModel:
Ext.define('App.view.TSegmentacionFrmViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.TSegmentacionFrm',
requires: [
'Ext.data.Store',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
stores: {
oStoreSegmentacion: {
autoLoad: true,
model: 'App.model.oGrid',
proxy: {
type: 'ajax',
extraParams: {
cmd: 'Get',
cCodClass: 'SegmentacionBrw'
},
url: "TGlobalData.ashx",
useDefaultXhrHeader: false,
reader: {
type: 'json',
rootProperty: 'aResultado',
totalProperty: 'nRows'
}
},
listeners: {
load: 'onJsonstoreLoad'
}
}
}
});
The store binding is defined in the View (line 58 of the following code):
Ext.define('App.view.TSegmentacionFrm', {
extend: 'Ext.tab.Panel',
alias: 'widget.TSegmentacionFrm',
requires: [
'App.view.TSegmentacionFrmViewModel',
'App.view.TSegmentacionFrmViewController',
'Ext.tab.Tab',
'Ext.toolbar.Toolbar',
'Ext.toolbar.Separator',
'Ext.grid.Panel',
'Ext.view.Table',
'Ext.grid.column.Action',
'Ext.form.Label',
'Ext.grid.column.RowNumberer'
],
config: {
[...]
},
controller: 'TSegmentacionFrm',
viewModel: {
type: 'TSegmentacionFrm'
},
cls: 'CustomTabs',
itemId: 'TSegmentacionFrm',
activeTab: 0,
deferredRender: false,
initConfig: function(instanceConfig) {
var me = this,
config = {
items: [
{
xtype: 'panel',
itemId: 'oPnlHist',
layout: {
type: 'vbox',
align: 'stretch'
},
bind: {
title: '{lbl_ListadoHist}'
},
dockedItems: [
{
[...]
}
],
items: [
{
xtype: 'TMainBrowseGrid',
cBrwName: 'oBrwSegmentacion',
cCodForm: 'SegmentacionFrm',
cls: 'CustomGrid',
flex: 1,
itemId: 'oGridHistorico',
bind: {
store: '{oStoreSegmentacion}'
},
listeners: {
selectionchange: 'onOGridProductosSelectionChange'
},
columns:
[...]
}
]
},
]
};
[...]
},
});
And this is the onJsonstoreLoad method, in the ViewController:
Ext.define('App.view.TSegmentacionFrmViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.TSegmentacionFrm',
onJsonstoreLoad: function (store, records, successful, operation, eOpts) {
// This '$binding' is undefined
// Uncaught TypeError: Cannot read property 'owner' of undefined at g.onJsonstoreLoad
var oView = store.$binding.owner.getView();
[...]
}
});
What am I doing wrong? The person who wrote this some time ago says it worked, but now it seems to be broken. Thank you.

$binding is some internal property, it's not part of the API, don't use it. By virtue of the callback being in the controller, just call this.getView().

ExtJS 5 first steps, cannot see a simple grid with one store

I'm trying to become familiar with Ext JS 5. I took a sencha generated app as
the start point and modified it to see a grid of one line.
But the page is simply blank.
Can anyone, please, show me what am I doing wrong?
I am not familiar with the MVVM pattern but I want to learn it.
Here's my set of files:
And here are the JS sources.
Applications.js
Ext.define('Admin.Application', {
extend: 'Ext.app.Application',
name: 'Admin'
});
Base.js (base class for models)
Ext.define('Admin.model.Base', {
extend: 'Ext.data.Model',
schema: {
namespace: 'Admin.model'
}
});
Item.js (a simple model)
Ext.define('Admin.model.Item', {
extend: 'Admin.model.Base',
fields: [
{ name: 'id', type: 'int' },
{ name: 'title', type: 'string' }
]
});
ItemList.js (a store of items that I want to show in a grid)
Ext.define('Admin.store.ItemList', {
extend: 'Ext.data.Store',
alias: 'store.itemlist',
model: 'Admin.model.Item',
data: [{id: 1, title: 'title1'}]
});
ItemListGrid.js (the panel with the grid)
Ext.define('Admin.view.main.ItemListGrid', {
extend: 'Ext.grid.Panel',
requires: [
'Admin.store.ItemList'
],
alias: 'widget.itemlistgrid',
bind: {
store: '{itemlist}',
title: '<b>Some title</b>',
columns: [{
text: 'id',
dataIndex: 'id'
},{
text: 'title',
dataIndex: 'title'
}]
}
});
Main.js
Ext.define('Admin.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'Admin.view.main.MainController',
'Admin.view.main.MainModel',
'Admin.view.main.ItemListGrid'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
//region: 'west',
width: '100%',
items: [{
xtype: 'itemlistgrid'
}]
}]
});
MainController.js
Ext.define('Admin.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main'
});
MainModel.js
Ext.define('Admin.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Admin'
},
bind: {
store: '{itemlist}'
}
});
The sencha app build builds the app without errors. But I don't see the grid.
Before this I tried the default generated app and it showed in my browser OK.
Thank you.

Here's the exact answer to my question https://www.sencha.com/forum/showthread.php?299703-ExtJS-5-first-steps-cannot-see-a-simple-grid-with-one-store&p=1095022&viewfull=1#post1095022

Getting the list of checked items in Ext JS 5 Grid always returns an empty array?

Here is the relevant code from the view file:
Ext.define('MARS.view.listings.SummarySetupView', {
extend: 'Ext.Container',
xtype: 'summarysetupview',
requires: [
'MARS.view.listings.SummarySetupController'
],
controller: 'summarysetup',
title: "Summary",
items: [
{
xtype: 'deliverablesGridPanel'
},
{
xtype: 'button',
text: 'Submit',
handler: 'onSubmit'
}
]
});
Here is the relevant code from the controller file:
Ext.define('MARS.view.listings.SummarySetupController', {
extend: 'Ext.app.ViewController',
alias: 'controller.summarysetup',
onSubmit: function () {
console.log(this.getView().refs.gridDeliverables.getChecked());
// Returns [] - empty array
}
});
And here is the definition of my xtype "deliverablesGridPanel":
Ext.define('MARS.view.DeliverablesGridPanel', {
extend: 'Ext.tree.TreePanel',
xtype: 'deliverablesGridPanel',
title: 'Deliverables',
reference: 'gridDeliverables',
flex: 1,
autoScroll: true,
rootVisible: false,
bind: {
store: '{jobTreeStore}'
},
columns: [
{
xtype: 'treecolumn',
dataIndex: 'Name',
text: 'Name',
width: 200
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description',
flex: 1
}
]
});
It clearly knows that it is a grid because the function works, it just always returns empty...

Checkbox selection columns in grids are usually part of a selection model. I know from old extjs3 days you would do something like grid.getSelectionModel().getSelections() and that would achieve what you are trying to do here.

Sencha touch 2 - list not showing up

I am getting pretty desperate about this code and have no idea why it is not working. I am trying to load list from json file. He is my code:
views:
main view
Ext.define('Alerts.view.Main', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar',
items: [{
xtype: 'button',
text: 'Alerts',
id: 'alertsButton',
handler : function(){
//alert('tap')
var pnl = Ext.getCmp('hiddenPanel');
pnl.showBy(this,"tl-bl");
}
}]
},
{
xtype: 'AlertsList'
},
{
xtype: 'panel',
id: 'hiddenPanel',
// We give it a left and top property to make it floating by default
left: 0,
top: 40,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Make it hidden by default
hidden: true,
// Set the width and height of the panel
width: 400,
height: 400,
// Here we specify the #id of the element we created in `index.html`
contentEl: 'content',
// Style the content and make it scrollable
styleHtmlContent: true,
scrollable: true,
// Insert a title docked at the top with a title
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Add new',
items: [{
iconCls: 'add',
iconAlign : 'right',
id: 'newIcon',
handler : function(){
alert('icon')
//var pnl = Ext.getCmp('hiddenPanel');
//pnl.showBy(this,"tl-bl");
}
}]
}
]
}
]
}
});
AlertsList view:
Ext.define('Alerts.view.AlertsList', {
extend: 'Ext.Container',
requires: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
fullscreen: true,
title: 'list',
layout: 'fit',
items: [
{
xtype: 'list',
store: 'Alert',
itemTpl: '<h1>item<h1>{name}',
}
]
}
});
model:
Ext.define('Alerts.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
store:
Ext.define("Alerts.store.Alert", {
extend: 'Ext.data.Store',
config: {
model: "Alerts.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url : "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});
When i run the code, app loads fine, without any warns/errors - console is clear.

The main reason of the wrong behavior is that the store was not created before. Try to add the following changes. Add alias: 'store.alerts' to Alert store. Then use it as store: {type: 'alerts'} in the AlertsList. As mentioned here, this creates a store instance for you. Also I found some issues with the app layout, so I attach here short version of your code with my changes:
Ext.define('Test.view.Main', {
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Topp Toolbar'
}, {
xtype: 'AlertsList'
}]
}
});
Ext.define('Test.view.AlertsList', {
extend: 'Ext.dataview.List',
xtype: "AlertsList",
config: {
store: {
type: 'alerts'
},
itemTpl: '<h1>item<h1>{name}',
}
});
Ext.define('Test.model.Alert', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'reason', 'enabled', 'notify', 'phone']
}
});
Ext.define("Test.store.Alert", {
extend: 'Ext.data.Store',
alias: 'store.alerts',
config: {
model: "Test.model.Alert",
autoLoad: true,
proxy: {
type: "ajax",
url: "app/store/Alerts.json",
reader: {
type: "json",
rootProperty: "alerts"
}
}
}
});

Displaying views that contain 'partial'/'nested' widgets in EXTjs 4

I'm having trouble understanding how I need to define and use the MVC model for my test EXTjs4 app. Consider the following structure.
app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Cards', 'Fourscrum'],
launch: function () {
Ext.create('Ext.container.Viewport', {
defaults: { flex: 1 },
layout: {
type: 'hbox',
align: 'stretch',
},
items:
[
Ext.widget('Fourscrum')
]
});
Controller:
Cards.js
Ext.define('AM.controller.Cards', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['card.List', 'priority.prioritycombo', 'card.Edit'],
Fourscrum.js
Ext.define('AM.controller.Fourscrum', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['scrum.Fourscrum', 'card.List'],
view.scrum.Fourscrum.js
Ext.define('AM.view.scrum.Fourscrum', { // *** Variable
extend: 'Ext.panel.Panel',
alias: 'widget.Fourscrum', // *** Variable
width: 400,
height: 300,
layout: 'column',
title: 'Scrum', // *** Variable
items:
[
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.inprogresscardlist',
title: "In Progress",
store: "InprogressCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.reviewcardlist',
title: "Review",
store: "ReviewCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.donecardlist',
title: "Done",
store: "DoneCards"
})
]
});
My ideal structure for this app is as follows:
Viewport defined (inside app.js)
which contains a Fourscrum.js view (which is just a panel)
which contains 4 different List.js views (which are just grids).
Trying to accomplish this, I currently get a few errors when i start messing with the above code:
Item undefined
namespace undefined
Does anyone know why this doesn't work?
PS. I can get this example to work if I replace my 'cardlist' widgets with panels directly defined in the Fourscrum view.
PPS. This also works properly if I forego the Fourscrum container panel all together :(
EDIT:
I felt my explanation was a little unclear so I've uploaded an image to help describe the program. I'm not sure where I need to define the stores, models, and views with this nested structure. So I've repeated it in both controllers. I hope that's not what is causing the problem.
EDIT2:
Ext.define('AM.view.card.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.cardlist',
//title: 'List',
//store: 'Cards',
//multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'ddzone',
dropGroup: 'ddzone'
}
},
// selType: 'cellmodel',
// plugins: [
// Ext.create('Ext.grid.plugin.CellEditing', {
// clicksToEdit: 1
// })
// ],
columns: [
{
header: 'ID',
dataIndex: 'external_id',
field: 'textfield',
width: 30
},
{
header: 'Name',
dataIndex: 'name',
field: 'textfield',
width: 150
},
{
header: 'Priority',
dataIndex: 'priority_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Priorities").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60,
field: { xtype: 'PriorityCombo' }
},
{
header: 'Size',
dataIndex: 'size_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Sizes").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60
},
{
xtype: 'actioncolumn',
width: 16,
items: [{
icon: 'Styles/Images/zoom.png', // Use a URL in the icon config
tooltip: 'Zoom In',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
}
]
});

I think I see a big problem in your code (if you pasted all of it).
In your view definitions if you are extending Ext components you MUST have the following function that ends in the callParent method like below.
initComponent: function() {
this.items = this.buildMyItems();
this.callParent(arguments);
},
buildMyItems: function(){
//my code
}

Robodude,
According to the Class guide on Sencha.com all widgets must be contained in properly named class files. I don't think you can simultaneously define and create your widgets in the panel definition.
Split out your definitions from the panel config. Also dont forget to enable the auto loader:
Ext.Loader.setConfig({
enabled : true
});