timefields inside components inside componentdataviews will expand than instantly close when the 'clock' icon is pressed. this only occurs on Ext.os.deviceType = Phone. below is a link to an example fiddle that demonstrates the bug. this only occurs on 'mobile' or 'Phone' devices so you need will need use dev tools to set the device as 'mobile' before you 'run' the fiddle. Is there a known workaround or fix?
https://fiddle.sencha.com/#fiddle/3ke1&view/editor
Ext.application({
name: 'Fiddle',
launch: function () {
console.log(Ext.os.deviceType)
var panel = new Ext.panel.Panel({
title: `device type - ${Ext.os.deviceType} (bug only exists on 'Phone')`,
fullscreen: true,
items:[{
xtype: 'componentdataview',
store:[{
label:'test1'
},{
label:'test2'
},{
label:'test3'
}],
itemConfig:{
viewModel:true,
xtype:'container',
items:[{
xtype:'timefield',
picker: 'floated',
labelAlign: 'left',
labelTextAlign: 'right',
bind:{
label:'{record.label}'
}
}]
}
}]
})
}
});
Related
Using ExtJS7.x with the modern toolkit.
For various reasons, I'm trying to data-bind the titles of panels in a TabPanel, this seems to work fine, if not for a single caveat. The binding only applies as soon as the tab becomes active. Trawling around the official forums I found that this was previously marked as a bug in ExtJS6 years ago, and was reported as being fixed. And yet I still run into similar behavior in 7.
Basic overview of what I'm trying to do:
{
xtype: 'tabpanel',
defaults: {
iconAlign: 'left',
},
items: [
{
xtype: 'panel',
border: true,
padding: 5,
iconCls: 'x-fa fa-ellipsis-v',
title: 'Overview',
bind: {
title: '{anonymous.overview.title}'
}
},{
xtype: 'panel',
iconCls: 'x-fa fa-envelope-open',
bind: {
title: 'Test'
}
}, {
xtype: 'panel',
reference: 'auditgrid',
iconCls: 'x-fa fa-clipboard-list',
title: 'Audits',
}
]
}
Available here in fiddle format.
Binding a hard-coded string here for testing purposes. It'll be a more variable string eventually, but I was trying to figure out if it was an issue with the timing of the data being available in the ViewModel since the strings get loaded from an external source (doesn't seem to be)
The first tab correctly has it's title overwritten by the data in the binding, as it is automatically activated. The second one however, just has an icon and no title, until it is clicked.
I've tried to sneakily force all panels to activate in a beforeShow event handler, but this doesn't trigger the binding. Which leads to the question. Does anyone have a reasonable workaround or fix for this issue? I've tried to reverse-engineer the override provided for ExtJS6, but haven't had any luck making it work.
Or am I just being a dingus and am I doing something wrong here?
Try to use tab config property to bind the title, something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
viewModel: {
data: {
someTabTitle: 'Some Tab Title'
}
},
defaults: {
iconAlign: 'left',
},
items: [{
xtype: 'panel',
border: true,
padding: 5,
iconCls: 'x-fa fa-ellipsis-v',
title: 'Overview',
bind: {
title: 'Test 1'
}
}, {
xtype: 'panel',
iconCls: 'x-fa fa-envelope-open',
tab: {
bind: {
title: '{someTabTitle}'
}
}
}, {
xtype: 'panel',
reference: 'auditgrid',
iconCls: 'x-fa fa-clipboard-list',
title: 'Audits',
}]
});
}
});
I want to implement a route for my basic view in ExtJS so that when display it (on a button click) the URL changes and when i want to return back to the initial view it works by displaying the right view.
Giving my view class :
Ext.define('Traccar.view.newDashboard', {
extend: 'Ext.Container',
alias: 'widget.newDashboard',
id: 'geoAfricaDashboard',
routes : {
'dashboard' : ''
},
layout: {
type: 'border',
align: 'stretch '
},
height: 620,
style: {
'backgroundColor': '#909090 !important'
},
items: [{
// xtype: 'panel' implied by default
title: 'Geo-Africa Administration',
region: 'west',
xtype: 'panel',
//margin: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit',
items: [{
xtype: 'treelist',
store: {
root: {
expanded: true,
children: [{
text: 'Options',
leaf: true,
iconCls: 'fas fa-address-book'
}, {
text: 'Administration',
expanded: true,
iconCls: 'far fa-id-badge',
children: [{
text: 'Configuration',
leaf: true,
iconCls: 'fas fa-address-card'
}, {
text: 'User',
leaf: true,
iconCls: 'fas fa-child'
}]
}]
}
},
renderTo: Ext.getBody()
}]
}, {
xtype: 'basic-panels'
// width: '100%'
}]
Which i render on button click like so :
var dash = Ext.create('widget.newDashboard', {
renderTo: Ext.getBody(),
hideMode: 'visibility'
});
dash.show();
How can i assign a route URI to that view in ExtJS (6.2.0)?
Thank you for the great help ?
PS : i tried with
routes : {
'dashboard' : ''
},
or else this.redirectTo("dashboard"); But neither works.
The route is similar to firing an event. The end result is a function is called. The hash is passed to the function based on how the route is setup. You can either call a different function for each hash or you can use the hash, or other parts of the URI to determine what to do.
Router Documentation This web page describes how the router is used. It is a very quick read.
A common way the examples (admin dashboard, coworkee app) do it by having the hash be the xtype for the panel (view) you want to display.
So your main panel extends 'Ext.navigation.View'. Then based on the hash you create a new instance of the view, add it to the main panel and make it the active item. You can also check to see if the xtype has already been added to the navigation view and just make it the active panel.
Fiddle showing use of router (this is not mine). Here is a fiddle that shows how to use a router. I would recommend reading the docs first. THe sencha docs are actually pretty good and you can learn how to use the Extjs library as it was intended and really speed up your development.
I have a toolbar with buttons that are hidden by default, and then shown based on the user's privileges. They appear and function after I call .show(), but do not appear in the overflow menu when the window is resized. The items that are initially shown appear in the overflow menu correctly.
Any advice on how I can fix this problem?
Thanks
Edit: Here's the simplest example I could come up with that works with fiddle for the problem. https://fiddle.sencha.com/#fiddle/877
Ext.onReady(function(){
var toolbar1 = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'textfield',
emptyText: 'FIX ME'
},{
xtype: 'button',
text: 'Test Lists',
id: 'testListsButton',
hidden: true
},{
xtype: 'button',
text: 'All Lists',
id: 'allListsButton',
},{
xtype: 'button',
text: 'Other Lists',
id: 'otherListsButton',
hidden: true
},{
xtype: 'button',
text: 'Email Lists',
id: 'emailListsButton',
hidden: true
}]
});
Ext.getCmp('emailListsButton').show();
Ext.getCmp('otherListsButton').show();
Ext.getCmp('testListsButton').show();
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
autoRender: true,
items: [
toolbar1
]
});
})
I found a work-around.
I set the items to be visible initially, hide them before they're rendered, and then show them again when checking the user's privileges. This properly displays the items in the overflow menu.
It looks like this is a bug, all be it a minor one.
I am making a basic application in Sencha Architect 3, and trying to add a menu button in the style of touch-tomatoes http://docs.sencha.com/touch/2.3.0/touch-build/examples/touchtomatoes/index.html
The code for adding the menu in the Touch Tomatoes project is an addition in the app.js file of Sencha Touch project as below, but I am unable to figure out how to do this in Sencha Architect, as it says that the app.js file would be over-ridden each time the project is saved
Ext.application({
name: 'TouchTomatoes',
requires: ['Ext.device.Storage','Ext.Menu', 'TouchTomatoes.components.MenuButton'],
controllers: ['TouchTomatoes.controller.Main'],
views: ['TouchTomatoes.view.Main', 'TouchTomatoes.view.WelcomeOverlay'],
launch: function() {
Ext.getBody().removeCls('loading');
Ext.create('TouchTomatoes.view.Main');
if (Ext.device.Storage.getItem('isFirstTime') !== "false") {
Ext.device.Storage.setItem('isFirstTime', false);
var overlay = Ext.create('TouchTomatoes.view.WelcomeOverlay');
Ext.Viewport.add(overlay);
overlay.show();
}
var menu = Ext.create("Ext.Menu", {
defaults: {
xtype: "menubutton"
},
width: '80%',
scrollable: 'vertical',
items: [
{
text: 'Opening',
iconCls: 'time',
menu:"opening"
},
{
text: 'Theatres',
iconCls: 'locate',
menu: "theatres"
},
{
text: 'Upcoming',
iconCls: 'team',
menu:"upcoming"
},
{
text: 'Top',
iconCls: 'bank',
menu:'top'
},
{
text: 'Search',
iconCls: 'search',
menu:"search"
}
]
});
Ext.Viewport.setMenu(menu, {
side: 'left',
reveal: true
});
}
});
You already have launch defined, so simply paste your two statements within it within architect.
In architect,
click on Application in the inspector
click on the launch action in the config pane to bring it up in the editor (Or, if you don't have launch defined, click on the + icon next to launch in the Config pane to add it.)
paste your code into the editor beneath your overlay code:
var menu = Ext.create("Ext.Menu", {
defaults: {
xtype: "menubutton"
},
width: '80%',
scrollable: 'vertical',
items: [
{
text: 'Opening',
iconCls: 'time',
menu:"opening"
},
{
text: 'Theatres',
iconCls: 'locate',
menu: "theatres"
},
{
text: 'Upcoming',
iconCls: 'team',
menu:"upcoming"
},
{
text: 'Top',
iconCls: 'bank',
menu:'top'
},
{
text: 'Search',
iconCls: 'search',
menu:"search"
}
]
});
Ext.Viewport.setMenu(menu, {
side: 'left',
reveal: true
});
You'll end up with exactly the code you listed above, and it wont be overwritten since it's part of the app's config.
Be aware that, since you include an xtype of 'menubutton,' that you'll have to create a button at the class level and give it a userAlias of 'menubutton,' or the app will throw an error stating, roughly, "I can't create widget with xtype.menubutton."
I am creating an app in which I have to create the popup like sencha touch theming expample to select the navigation items.
I tried to see its code on github for a hint but don't know what I am missing hare is my code for header bar and the list button.
Ext.define('ov_app.view.HeaderBar', {
xtype : 'HeaderBar',
extend:'Ext.Toolbar',
config: {
// xtype : 'toolbar',
ui: 'plain',
docked: 'top',
cls: 'menuBar',
border:0,
defaults:{
border: 0,
},
items: [
{
iconCls: 'list',
iconMask: true,
ui: 'plain',
action: 'ShowMoreOption',
},{
xtype: 'spacer'
},{
xtype: 'container',
html: '<img src="resources/images/logo.png">'
},{
xtype: 'spacer'
},{
iconCls: 'home',
iconMask: true,
id: 'homeBtn',
ui: 'plain',
action: 'push-view'
}
]
}
});
`
and code for my controller main.js to Handel the tab action on list button.
Ext.define('ov_app.controller.MainController', {
extend: 'Ext.app.Controller',
config:{
control: {
'button[action=push-view]': {
tap: 'pushViewFunction'
},
'button[action=ShowMoreOption]':{
tap: 'togglMenu'
},
},
},
pushViewFunction: function() {
ov_app.container.setActiveItem(0);
},
togglMenu: function(){
console.log("hello");
}
togglMenu: function(button) {
this.getStyleBubble().showBy(button)
},
});
`
when I try to click on the list button on the top the error i see in my console is this
Uncaught TypeError: Object [object Object] has no method 'getStyleBubble'
and also I didn't see any definition for this 'getStyleBubble' function in any of the file in model, views, controller, store directories. So is it defined in any touch directories files or I am missing something.
There is no getStyleBubble() function deceleration in the controllers file also not in any file if you download the whole source code zip folder I think they have not uploaded complete source code. But i found solution to my answer. I have to create a new panel and make it toggle with the click of the list button like this.
togglMenu: function(button){
if(!this.overlay) {
this.overlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
},
height: 200,
width: 200,
//centered: true,
styleHtmlContent: true,
html: '<p>hello dummy content in the pop up box </p>',
scrollable: true
});
}
this.overlay.showBy(button);
`