Develop Reference

Problems with references and stores in Sencha ExtJS

I’m new here in at Stackoverflow and to Sencha ExtJS development. I’m a student from Germany and I’m current trying to get my degree in media computer sciences. As a part of my final assignment I’m currently developing the UI of a webapp for a local company.
While I was trying out the capabilities of the Sencha ExtJS framework I came across some problems, which is why I’m now reaching out to the community for help ;)
My first problem I had, was when I was playing around with the syntax for instancing classes using xtypes and the association of Stores inside the ViewModel:
For the purpose of easier to read and less cluttered code I wanted to give my stores their own xtype so I could instead of declaring all the stores and their configs inside the ViewModels’ stores config wanted to have every store inside their own file and then just create an instance of them later inside the ViewModel. The code I wrote for this looks like this:
ViewModel:
Ext.define('Example.viewmodel.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myviewmodel',
requires: [
'Example.store.MyStore',
],
stores: {
StoreA: { xtype: 'store_a' },
StoreB: { xtype: 'store_b' },
StoreC: { xtype: 'store_c' }
},
data: {
/* This object holds the arbitrary data that populates the ViewModel and
is then available for binding. */
}
});
StoreA:
Ext.define('Example.store.StoreA', {
extend: 'Ext.data.Store',
xtype: 'store_a',
requires: [
'Example.model.ModelA'
],
storeId: 'StoreA',
autoLoad: false,
model: 'Example.model.ModelA',
listeners: {
load: 'onLoadofStoreA'
}
});
But apparently this isn’t working… My load listener of the store does not seem to fire at the method inside my controller and does not even seem to know about the view that is associated with the ViewModel. What am I doing wrong or is this just not meant to be done like that?
My Second Problem was when I was playing around with some of the UI components. My scenario was like this:
I wanted to have a menu that would slide in, where u could do some inputs that would then load the content for the view.
I found this example for a sliding menu (https://examples.sencha.com/extjs/6.7.0/examples/kitchensink/?modern#menus) and built this:
Inside my ViewController:
getMenuCfg: function (side) {
var cfg = {
side: side,
controller: example_controller',
id: 'topMenu',
items: [
{
xtype: 'container',
layout: 'hbox',
width: '100%',
items: [
{
xtype: 'fieldset',
reference: 'fldSet',
id: 'fldSet',
layout: 'vbox',
width: '50%',
defaults: {
labelTextAlign: 'left'
},
items: [
{
autoSelect: false,
xtype: 'selectfield',
label: 'Selectfield',
reference: 'sfExample',
id: 'sfExample',
listeners: {
change: 'onSFChange'
}
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'end',
pack: 'center'
},
items: [{
xtype: 'textfield',
reference: 'ressource',
id: 'ressource',
flex: 1,
textAlign: 'left',
margin: '0 10 0 0',
label: 'Ressource',
labelAlign: 'top',
labelTextAlign: 'left',
editable: false,
readOnly: true
},
{
xtype: 'button',
shadow: 'true',
ui: 'action round',
height: '50%',
iconCls: 'x-fa fa-arrow-right',
handler: 'openDialog'
}
]
},
{
xtype: 'textfield',
reference: 'tfExample',
id: 'tfExample',
label: 'Textfield',
editable: false,
readOnly: true
}
]
},
}]
}];
The problem I come across now is, that I would no longer be able to easily get the references of components inside the menu (input fields) with this.lookupReference() as if they were just part of the view. In fact to find a workaround I had to trace a way back to the components using a debugger.
For example if another method inside my controller wanted to use a field inside this menu, instead of simply just doing this.lookupReference(‘sfExample’) I now had to do something like this:
var me = this,
vm = me.getViewModel(),
menuItems = me.topMenu.getActiveItem().getItems(),
fieldset = menuItems.getByKey('fldSet'),
selectfieldRessArt = fieldsetLeft.getItems().getByKey('sfExample');
I’m pretty sure that I am missing out on something important here and there has to be a way to do this easier. I’m really looking forward to your answers, thank you in advance ;)

use xtype only for components. if you need to define an type/alias for store, use alias config property instead and especify the alias category "store.".
Defining a store with an alias
Ext.define('Example.store.StoreA', {
extend: 'Ext.data.Store',
//use store. to category as a store
alias: 'store.store_a',
requires: [
'Example.model.ModelA'
],
storeId: 'StoreA',
autoLoad: false,
model: 'Example.model.ModelA',
listeners: {
load: 'onLoadofStoreA'
}
});
Instantianting your store by type
Ext.define('Example.viewmodel.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myviewmodel',
requires: [
'Example.store.MyStore',
],
stores: {
StoreA: { type: 'store_a' },
StoreB: { type: 'store_b' },
StoreC: { type: 'store_c' }
},
data: {
/* This object holds the arbitrary data that populates the ViewModel and
is then available for binding. */
}
});
I Hope it can help you

I have a component define by itemid how I can get it in controller

i m new in sencha . i always use id to define my component . but now i want to change it to itemid . and i found the Ext.getcmp('id'), is not work . and when i use Ext.componentquery.query('itemid') ,the console in chrome said Ext.componentquery is not a function. what can i do?
my view code:
Ext.define('ylp2p.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.carousel.Carousel',
'ylp2p.store.datainterests',
'Ext.Label',
'Ext.List'
],
config: {
fullscreen: true,
tabBarPosition: 'bottom',
scrollable: 'vertical',
items: [
{
title: '首页',
iconCls: 'home',
styleHtmlContent: true,
//true to automatically style the HTML inside the content target of this component (body for panels).
scrollable: true,
layout: 'card',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'ylp2p'
},
{
xtype: 'container',
layout: 'vbox',
items:[
{
xtype: 'label',
itemId: 'datalabel',---------this component is what i want
height: 50,
store: 'datainterests',
tpl: '金额：{data},利息：{earn}',
}//end label
]
}
]//end items
}
]
},//end config
//end listeners
});
my controller code :
Ext.define('ylp2p.controller.viewdata',{
extend: 'Ext.app.Controller',
launch: function(){
console.log('hello ! here is controller launch function');
var storeId = Ext.create('ylp2p.store.datainterests');
storeId.load({
callback: function(records, operation, success){
Ext.each(records, function(record) {
Ext.ComponentQuery.query("main > datalabel").setData({----it cant work . why?
data : record.get('data'),
earn : record.get('earn')
});
});
}
});
}
});
the console error said:
Uncaught TypeError: Ext.ComponentQuery.query(...).setData is not a function

i got it
var label = Ext.ComponentQuery.query('main #datalabel')[0];
label.setData({
data : record.get('data'),
earn : record.get('earn')
});

I found Sencha's own code to use menu.down('#groupMenuItem') to access itemId:'groupMenuItem'. So you should be fine using:
Ext.ComponentQuery.query('#itemid')

Use this.
var label = Ext.ComponentQuery.query('main #datalabel'); -- check on console label should not undefined
label.tpl.updateData -- you will find methods with tpl

ExtJs DataView height inside a vbox

I've got a profile home view (Home2). In this view a want to show a top docked title bar, a user profile info and user's posts.
Ext.define('FreescribbleApp.view.Home2', {
extend: 'Ext.Panel',
xtype: 'homepage2',
config: {
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items:[
{
xtype: 'titlebarview'
},
{
xtype: 'userinfoview',
itemId: 'userInfoWrapper',
height: 150
},
{
itemId: 'homeStage',
autoScroll: true
}
]
}
});
I also have a DataView:
Ext.define('FreescribbleApp.view.PostList', {
extend: 'Ext.dataview.DataView',
xtype: 'postlist',
config: {
scrollable: false,
defaultType: 'postitem',
useComponents: true
}
});
which lists DataItems:
Ext.define('FreescribbleApp.view.PostItem', {
extend: 'Ext.dataview.component.DataItem',
xtype: 'postitem',
requires: ['Ext.field.Text'],
config: {
style: 'background-color: #f00',
height: 100,
styleHtmlContent: false,
authorName: {
height: 30,
style: 'background-color: #0f0'
},
dataMap: {
getAuthorName: {
setHtml: 'userName'
}
},
},
applyAuthorName: function(config) {
return Ext.factory(config, Ext.Component, this.getAuthorName());
},
updateAuthorName: function(newAuthorName, oldAuthorName) {
if (newAuthorName) {
this.add(newAuthorName);
}
if (oldAuthorName) {
this.remove(oldAuthorName);
}
}
});
in my HomeController I create a PostStore, fill it with some posts and add to the DataView. After that I add the DataView to my Home2-View Element HomeStage:
var postStore = Ext.create('FreescribbleApp.store.PostStore', {
params: {
user: localStorage.getItem('userId'),
token: localStorage.getItem('token'),
target: localStorage.getItem('userName')
}
});
postStore.load();
postStore.on('load', function(){
var currentView = Ext.create('FreescribbleApp.view.PostList');
currentView.setStore(postStore);
homeStage.add(currentView);
});
I can't see any items till I set height of the DataView. It is a common issue, bun in my case I cannot set my HomeStage to 'fit' since it's only a part of Home2 and the item userinfo should get scrolled with the posts. So how can I set size of my DataView dynamicly?
I also see in my Sencha debuger for Chrome that between my DataView-List and my DataItems is a Container, which has the right heigh of all the items inside. can I just get the size of this container and set i for my DataView? Will it work and will it be a good practice?

I'm sorry, i just had to set scrollable: null, and not false in my DataView!

Extjs 4 cellEditing plugin doesn't work with more then one grid

I have a simple page with 2 or more grids and I want to use CellEditing plugin to edit cells of those grids.
If I have only a grid all works well, but if I make 2 grids (or more) CellEditing plugin stop to work.
Anyone know how to solve this problem?
I have made a little minimized example that is affected with this problem.
In this example you can try to add a row to the first grid and double click to edit that grid. As you can see cell editing doesn't work at all.
If you add and edit the cell in the second grid, it work.
here you can found the example in jsfiddle:
http://jsfiddle.net/eternasparta/amHRr/
and this is the javascript code:
Ext.require([
'Ext.form.*',
'Ext.tip.*']);
var store = Ext.create('Ext.data.Store', {
fields: ['label'],
data: []
});
Ext.define('AM.view.editpanel.CustomList', {
extend: 'Ext.container.Container',
alias: 'widget.sclist',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'grid',
plugins: [],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Add',
actionId: 'add',
handler: function (th, e, eArg) {
var store = th.up('grid').store;
var r = Ext.create(store.model.modelName);
store.insert(0, r);
}
}],
height: 200,
store: store,
columns: [{
text: 'Name',
dataIndex: 'label',
flex: 1,
editor: {
xtype: 'numberfield',
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
actionId: 'delete',
header: 'delete',
items: [{
tooltip: 'tool'
}]
}],
flex: 1
}],
flex: 1,
initComponent: function () {
this.items[0].plugins.push(Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
}));
this.callParent(arguments);
var sto = Ext.create('Ext.data.Store', {
fields: ['label'],
data: []
});
this.down('grid').bindStore(sto);
this.down('grid').columns[0].text = 'Name';
this.down('grid').columns[0].dataIndex = 'label';
}
});
Ext.onReady(function () {
Ext.QuickTips.init();
var grid1 = Ext.create('AM.view.editpanel.CustomList', {
renderTo: Ext.getBody()
});
var grid2 = Ext.create('AM.view.editpanel.CustomList', {
renderTo: Ext.getBody()
});
});
Any help is appreciated, thank you!

Just put configs of Object or array type (in your case - items) inside initComponent: demo.
For more info see my answer here.

You can create separate objects for each grid like
//For grid 1
var rowEditing1 = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});
//For grid 2
var rowEditing2 = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: true
});
It will create different instances for the different grids. Tested Working fine :)

getter returning undefined

i am using sencha touch 2 to build an app.
i Have the following view:
Ext.define("DRT.view.Pbox", {
extend: 'Ext.form.Panel',
xtype: 'pboxcard',
config: {
floating: true,
centered: true,
modal: true,
height: 200,
wifth: 300,
styleHtmlContent: true,
html: 'Hi this is a popup',
items: [
{
xtype: 'button',
action: 'hide',
ui: 'confirm',
docked: 'bottom'
}
]
}
});
in my controller i have the follow ref:
config: {
refs: {
home: 'homecard',
pbox: 'pboxcard',
}
}
and i have one the following function:
showError: function(){
var popup = this.getPbox();
console.log(popup);
Ext.Viewport.add(popup);
popup.show();
}
but for some reason popup is undefined. and i cant seem to find out what the problem is

sorry guys i figured it out ... posted it a little too soon i guess. had to do this instead
pbox: {
selector: 'formpanel pboxcard',
xtype: 'pboxcard',
autoCreate: true
},