So, I'm trying to write a little MVC application which uses lists a lot.
I have one view which consists of a Panel with Toolbar docked to top and List:
app.views.SalonListView = Ext.extend(Ext.Panel, {
layout: 'card',
cardSwitchAnimation: 'slide',
dockedItems: [
{
xtype: 'toolbar',
dock: 'top'
}
],
items: [
{
xtype: 'SalonList',
id: 'salon-list'
}
]
});
Ext.reg('ListView', app.views.SalonListView);
I have an xtype for list defined in another file:
app.views.SalonList = Ext.extend(Ext.List, {
layout: 'card',
itemTpl: // some tpl is here
});
Ext.reg('SalonList', app.views.SalonList);
As you may notice, I don't set the Store for my List.
What am I trying to achieve is to set store in any Controller I use with this view.
Something like:
salonList: function() {
app.stores.SalonStore.read();
this.salonsView = this.render({
xtype: 'SalonListView',
// so I need to set store for the list somewhere around here
});
}
Is there any possibility I can set the Store for the List dynamically?
Related
In ExtJS 6.2 classic we usually implement initComponent when we extend a component.
On ExtJS modern, there's no initComponent for Ext.Container, besides constructor which function would replace initComponent in Modern?
I'm having an issue because I implemented the component initialization in the constructor and when I display the component again it runs the constructor again with the config set as the previous updated config, so the component renders things multiple times where it should only render once.
Ext.define('AppName.view.settings.CalloutBox', {
extend: 'Ext.Container',
xtype: 'calloutbox',
layout : {
type : 'hbox',
},
constructor: function(config) {
// Added this to avoid the bug I commented above.
if (config.cls) {
this.callParent(arguments);
return;
}
config.cls = `myclass`;
// Here I programmatically add elements. These cause the bug
// because on next run of this constructor these will be
// added again.
config.items = [{
xtype : 'container',
cls : `alert__icon-box`,
layout: {
type : 'vbox',
pack : 'center',
align : 'middle'
},
items: [{
xtype :'label',
cls : `alert__icon`,
html : `<i class="x-font-icon md-icon-alert"></i>`,
}]
}];
this.callParent(arguments);
}
});
Update
I found out the cause of the duplicating elements bug. It was caused by recreating the modal that the CalloutBox was in every time instead of just showing the one already open.
So we had this:
Ext.Viewport.add({ xtype: 'mymodal' }).show();
And now:
const mymodal = Ext.getCmp('mymodal');
// If component already exists in DOM, just show it.
if (mymodal) {
mymodal.show();
return;
}
// Else we create and show it.
Ext.Viewport.add({ xtype: 'mymodal' }).show();
Check out the initialize template method of Container and other classes in Modern Toolkit. Try running the following code in a fiddle:
Ext.define('MyContainer', {
extend: 'Ext.Container',
xtype: 'mycontainer',
initialize: function () {
this.add({
xtype: 'container',
layout: {
type: 'vbox',
pack: 'center',
align: 'middle'
},
items: [{
xtype: 'label',
html: 'label1',
},{
xtype: 'label',
html: 'label2',
}]});
}
});
Ext.create({
"xtype": "mycontainer",
renderTo: Ext.getBody()
});
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
In my app, I have two pagingtoolbar in two views (separate files), how can I query them both in the controller?
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'User',
dock: 'bottom',
displayInfo: true
}]
bbar: {
xtype: 'pagingtoolbar',
store: this.store,
displayInfo: true
}
Just adding to Alex Tokarev's answer, if you want to select them at run time, lets say, when you click on a button, you can use:
...
handler : function () {
var mytoolbars = Ext.ComponentQuery.query('pagingtoolbar'); // will assign all available toolbars to your mytoolbars array.
}
....
Controllers use ComponentQuery and their selectors are global, so just xtype should work:
Ext.define('MyController', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
pagingtoolbar: {
...
}
});
}
});
I was wondering myself, how it is possible to pass data from a panel to another panel? The panel, to which I want to pass the data, is defined in the items-collection of the panel, which holds the data. So far, I tried to use the getParent()-Funktion, which looks like this:
Ext.define('Sencha.view.MyPanel', {
extend: 'Ext.Panel',
xtype: 'mypanel',
requires: ['Ext.Label', 'Ext.Button'],
config: {
title: 'Details',
styleHtmlContent: true,
scrollable: 'vertical',
layout: 'vbox',
items:
[
{
xtype: 'label',
flex: 3
},
{
xtype: 'panel',
flex: 3,
data: getParent().getData(),
},
As you may suppose, it doesn't work. Does anyone has any idea, how I could forward the data and fill the data-config of the children-panel?
You can use controller to call methods in the view, and pass values to them.
I am new to ExtJS. Currently I have grid implemented as shown below.
But I want to show the same information in a different way like showing in boxes, as shown below. How do I implement this?
You haven't specified which version of Ext JS you are using. So, will give you solution for both versions:
In ExtJS 3.x
You can make use of the Ext.DataView class. Here is an example of dataview. Even though the example makes use of the images, you can easily modify the view, but changing the template. Now, you have to work on the pagination bar. You will have to make use of the bbar property and create a toolbar. This toolbar will have your navigation buttons. So, you will have something like this:
var panel = new Ext.Panel({
id:'person-view',
frame:true,
title:'User Grid',
bbar: [{
text: Prev,
iconCls: 'prev-icon'
},{
text: Next,
iconCls: 'next-icon'
}],
items: new Ext.DataView({
store: yourStore,
tpl: yourTemplate,
autoHeight:true,
multiSelect: false,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No users to display',
})
});
[Obviously, the above code is not complete. You will have to add your store, template, other properties and event listeners according to user needs.]
In ExtJS 4.x
You will have to make use of Ext.view.View class. Here is a skeleton code:
Ext.define('MyApp.view.members.Display',{
extend: 'Ext.panel.Panel',
alias : 'widget.memberslist',
initComponent: function() {
this.template = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="member">',
'Name : {name} <br/>',
'Title : {title}',
'</div>',
'</tpl>'
);
this.store = Ext.create('MyApp.store.Members');
this.bbar = this.buildToolbar();
this.items = this.buildItems();
this.callParent(arguments);
},
buildItems: function() {
return [{
xtype: 'dataview',
store: this.store,
id: 'members',
tpl: this.template,
itemSelector: 'div.member',
overItemCls : 'member-hover',
emptyText: 'No data available!'
}]
},
buildToolbar : function() {
return [{
text: 'Previous',
action: 'prev'
},{
text: 'Next',
action: "next"
}];
}
});
The above code makes use of the new MVC architecture. You will have to add the event listeners etc in your controller.