I have some trouble using an Ext.Panel in Sencha Touch 2.2. It works at first, but after building it can't be closed though hideOnMaskTap is true.
Here's my code:
MinPanel.js
Ext.define('MinimalPanelExample.view.MinPanel', {
extend: 'Ext.Panel',
requires: [
'Ext.dataview.List'
],
config: {
id: 'minPanel',
width: '320px',
height: '480px',
modal: true,
hideOnMaskTap: true,
html: 'minimal panel',
items: [
{
xtype: 'list',
width: '100%',
height: '100%'
}
]
}
});
Adding it in Main.js:
var minPanel = Ext.create('MinimalPanelExample.view.MinPanel');
[...]
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2',
items: [
{
xtype: 'button',
text: 'Button',
listeners: {
tap: function(button) {
minPanel.showBy(button);
}
}
}
],
},
What's curious is that the list inside the panel isn't even shown if I run the built package, it just shows the html: 'minimal panel'. There's no warnings in the Javascript console, though.
Any ideas about why that happens?
Also, feel free to tell me if my way of creating / accessing the panel in the first place is wrong.
Figured it out. You can't just Ext.create on top of the Main view file, it has to be somewhere in the Ext.define block. It works if I create the MinPanel in an initialize listener, and then get it via Ext.getCmp('minPanel') when the user presses the button.
Related
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
First of all to stress it: I'm using sencha modern.
Well consider the following view:
Ext.define('myApplication.view.main.OrderView', {
extend: 'Ext.Container',
xtype: 'ordercontainer',
controller: 'order',
requires: [
'Ext.MessageBox',
'Ext.layout.Fit'
],
viewModel: 'main',
defaults: {
tab: {
iconAlign: 'top'
},
flex: 1
},
layout: 'vbox',
items: [
{
xtype: 'button',
text: 'test, to be updated',
height: 30,
flex: 0,
listeners: {
click: 'onClick'
}
},
]
});
With the corresponding controller:
Ext.define('myApplication.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
onClick: function () {
debugger;
alert('onClick');
}
});
now I can see the button when the page is loaded. I expect the onClick function to be called (as per guide). However it is not. I don't see any alert, nor will (when development console is open in chrome) the debugger halt on the onClick function.
If I change the button to use a handle and use code-behind it works. Yet the view controller doesn't work. This shouldn't fail right? Or did I once again fall into the trap of using a guide for classic?
It's because in Modern the components doesn't have event click but tap
So change your code like this:
items: [
{
xtype: 'button',
text: 'test, to be updated',
height: 30,
flex: 0,
listeners: {
tap: 'onClick'
}
},
]
Ext JS : ver 6.5.2.463 theme-classic (6.2.1.167)
Browser : Chrome Version 62.0.3202.94 (64-bit)
OS : Window 10 (64bit)
Few days ago I start my application as usual but encounter an awkward behavior when I opened already collapsed panel in Chrome its title bar text was blank. I tried in on another browser it was working fine there.
I tried it on another machine it was working fine there. but when the Chrome of other machine get updated the same problem is there too.
we updated our Ext JS version from 6.2.1.167(Classic) to 6.5.2.463(Classic) but the problem is still there.
we create the similar UI on the fiddle and link is attached. so you can verify it.
https://fiddle.sencha.com/#fiddle/2acg&view/editor
is there anyone else facing the same issue ?
To reproduce the issue:
1. Open the link to a fiddle.
2. Click on the expand button the title bar content will be shown.
3. Now click on the collapse then expand now content will disappear.
Screenshots are also attached.
title bar is blank there
You need to go though with this config collapseMode and also with code file of collapseMode.
In this FIDDLE, I have used your code and made some change as per your requirement. Hope this will help you or guide you to solve your problem.
Ext.create('Ext.panel.Panel', {
plugins: 'viewport',
title: 'ViewPort Title',
layout: 'fit',
tbar: [{
xtype: 'button',
text: 'Expand',
handler: function () {
var panel = this.up('panel').down('#bottomPanel');
panel.collapseMode = undefined;
panel.expand();
}
}, {
xtype: 'button',
text: 'Collapse',
handler: function () {
this.up('panel').down('#bottomPanel').collapse();
}
}],
items: [{
xtype: 'container',
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel Title',
region: 'center',
html: 'Sample center panel text'
}, {
xtype: 'panel',
itemId: 'bottomPanel',
title: 'Bottom Panel Title',
region: 'south',
height: 150,
collapsible: true,
collapseMode: 'mini',
collapsed: true,
layout: 'fit',
items: [{
xtype: 'panel',
html: 'Sample bottom inner panel text'
}]
}]
}]
});
I'm new in Extjs. I would like to know. Which components I can use, to make a menu and toolbar like in desktop app?
I mean something like this.
I wrote this code, but the result is not similar to desktop app menu.
Ext.define('untitled.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
width: 200,
height: 150,
tbar: [{
xtype: 'button',
text: 'Select',
menu: Ext.create('Ext.menu.Menu', {
items: [{
text: 'JavaScript',
handler: function () {
alert('Selected JavaScript');
}
}, {
text: 'Java',
}, {
text: 'C/C++'
}]
})
}]
});
New -------
Thank you very much, and the last question. How can I remove this arrow?
Here is fiddle for you - desktop-like toolbar (use your iconCls for Icon buttons).
Ask if you need something updated.
i have strange issue with removing item from fieldset. my app success adding new textfield fieldset item, buth when i do remove() my app screen got stuck without any error on my google chrome.
here my source
view js
Ext.define('qms.view.QC23', {
extend: 'Ext.form.FormPanel',
alias: 'widget.QC23View',
id: 'QC23View',
requires: ['Ext.form.FieldSet', 'Ext.Label'],
config: {
items: [
{
xtype: 'fieldset',
//defaults: { labelAlign: 'top' },
Id:'defectAdd',
layout:{
},
items: [
{
xtype: 'button',
text: 'New Defect',
id: 'DefectQC23Button',
ui: 'action'
},
{
xtype: 'button',
text: 'Remove Defect',
id: 'RemoveQC23Button',
ui: 'action'
}
]
}
]
}
and my controler
Ext.define('qms.controller.QC23con', {
extend: 'Ext.app.Controller',
config: {
refs: {
addDefectButton:'#DefectQC23Button',
rmDefectButton:'#RemoveQC23Button'
},
control: {
addDefectButton:{
tap: 'addDefect'
},
rmDefectButton:{
tap: 'removeDefect'
},
}
},
addDefect: function(button){
button.up('fieldset').add({
xtype: 'textfield',
name: 'MyField-' + button.up('fieldset').length
});
//Ext.getCmp('defectAdd').doLayout();
},
removeDefect: function(button){
button.up('fieldset').remove(button.up('fieldset').items.items[0]);
}
the function for adding item work fine, but when i remove the item my screen stuck. i am using google chrome for testing.
please give me solution for this issue.
thanks.
I noticed you are not checking for the xtype before removing an item from the fieldset. The code might be removing the button itself in which case it might cause your screen to freeze. I created a simple sencha fiddle https://fiddle.sencha.com/#fiddle/4tf that does what you are trying to accomplish.
replace the removeDefect function with this:
var lastItem = button.up('fieldset').items.items.length-1;
if(button.up('fieldset').items.items[lastItem].xtype ==='textfield')
button.up('fieldset').remove(button.up('fieldset').items.items[lastItem]);