When an application is created using Ext.application() (modern toolkit), pull-to-refresh functionality seems to be disabled on the mobile browsers. Is there any way to re-enable it?
Code:
Ext.application({
name : 'Fiddle',
launch : function() {
//Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
Ext.Viewport.add({
xtype: 'panel',
title: 'Title',
html: 'content'
});
}
});
The problem described comes from the Ext.Viewport instance and more precisely - the modifications it makes to the styling of the body element. If i skip the 'normal' app launch process (for example - rendering the initial view directly on the body and return before Ext.application() call which creates the viewport) - it works as expected:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
fullscreen: true,
title: 'Panel',
html: 'My panel text...'
});
return;
Ext.application({...});
});
Related
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}'
}
}]
}
}]
})
}
});
Following code
Ext.define('Fiddle.Panel', {
extend: 'Ext.Container',
layout: 'card',
items: [{
html: 'Check the console. Panel 2.1 fires activate event desipte the panel 1 being active',
xtype: 'panel',
listeners: {
activate: function (){
console.log('1 active');
}
}
},{
xtype: 'panel',
layout: 'card',
items: [{
xtype: 'panel',
// items: [... fieldpanel, fields here]
listeners: {
activate: function (){
console.log('2.1 active');
}
}
},{
xtype: 'panel',
listeners: {
activate: function (){
console.log('2.2 active');
}
}
}
}],
listeners: {
activate: function (){
console.log('2 active');
}
}
}]
});
Will immediately output.
1 active
2.1 active
I would like to focus a text field in the panel 2.1 on activation, but the event is fired even the field respectively whole 2.1 panel is not rendered yet as it is a child of inactive panel 2. Is this a feature or bug ? Should I use different approach ? Thank you for help.
Sencha Fiddle
https://fiddle.sencha.com/fiddle/39vc
Your two card layout panels (containers) will have an active item. So that is why they are both firing the activate event.
I would do the focus on the activeitemchange event and init. Here is a fiddle:
Fiddle
I had to do a defer in the init to be sure the field was rendered. there may be a better way to do this. See the buttons at the bottom to switch between the two panels.
I am attempting to launch a modal window from within a viewcontroller. Consider the following code (also located at https://fiddle.sencha.com/#fiddle/1335):
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('Window1',{
extend: 'Ext.window.Window',
controller: 'winctrl',
xtype: 'window1',
initComponent: function(){
Ext.apply(this,{
title:'Window 1',
width: 400,
height: 400,
layout: {type:'hbox',pack:'center',align:'middle'},
items:[{
xtype: 'button',
text: 'Click Me!',
handler: 'btnClickMeClick'
}]
});
this.callParent(arguments);
}
});
Ext.define('Window2',{
extend: 'Ext.window.Window',
xtype: 'window2',
initComponent: function(){
Ext.apply(this,{
title: 'Window 2',
width: 200,
height: 200,
modal: true,
//renderTo: Ext.getBody(),
layout: {type:'hbox',pack:'center',align:'middle'},
items:[{
html: 'Modal Looks Odd',
listeners:{
afterrender: 'htmlRender'
}
}]
});
this.callParent(arguments);
}
});
Ext.define('WinCtrl',{
extend: 'Ext.app.ViewController',
alias:'controller.winctrl',
btnClickMeClick: function(){
this.dialog = this.getView().add({xtype:'window2'});
this.dialog.show();
},
htmlRender: function(){
console.log(this.dialog);
}
});
Ext.widget('window1').show();
}
});
The problem I am running into is that when window 2 is launched it is modal only to the view that launched it and I need the window to be modal to the entire document. If run as is, the htmlRender function will log the window 2 object correctly. I attempted to set the renderTo: Ext.getBody() on window 2; however, I am unable to access it's object when it is rendered. In this case, htmlRender logs an "undefined" for the window 2 object.
I need some help allowing window 2 to be rendered as a modal to the document while allowing me to reference its object. Thanks for any help.
Don't add the window to that view, replace:
this.dialog = this.getView().add({xtype:'window2'})
With:
this.dialog = Ext.widget('window2');
Working example: https://fiddle.sencha.com/#fiddle/1338
I was able to work around this issue by setting the renderConfig:Ext.getBody() on window, removing the listener on the html item and adding a listener for the show event on window2: https://fiddle.sencha.com/#fiddle/133j
I am using sencha 2.3.1 and the following code (in app.js), to display some html content on page. But nothing is being displayed. Please tell where I am wrong.
Ext.application({
name: 'Sencha',
requires: ['Ext.tab.Panel'],
launch: function() {
//The whole app UI lives in this tab panel
Ext.Viewport.add({
xtype: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
// This is the home page, just some simple html
{
title: 'Home',
iconCls: 'home',
cls: 'home',
scrollable: true,
html: [
'<img height=260 src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>Building the Getting Started app</p>",
'<h2>Sencha Touch (2.0.0)</h2>'
].join("")
}
]
})
}
});
Did a quick check in Sencha Fiddle, and your content seems to display.
https://fiddle.sencha.com/#fiddle/48m
However, I see you attached a cls property to this tabpanel, perhaps this is causing your problem.
Also, often things do not show up in Sencha because the height of the component is zero. Open up your DOM inspector and find your tabpanel and child elements and make sure they have a height of greater than zero. You may need to define a height, or use a different layout such as fit.
I need a little help, I am building an app in Sencha Touch and I need to change the docked items within a container when a button is pressed. I assume this is the best way to alter the content within the app (i.e. switching between pages).
So far I have the following code -
var App = new Ext.Application({
name: 'Test',
useLoadMask: true,
launch: function () {
// Toolbar
Test.views.toolbar = new Ext.Toolbar({
id: 'toolbar',
title: 'Friend Pay'
});
// Content
Test.views.content = new Ext.Panel({
id: 'content',
layout: 'fit',
dockedItems: [{
cls: 'copy',
html: '<h2>Copy block</h2>'
}, {
xtype: 'button',
id: 'buttonPanel',
html: 'Request Payment',
handler: function () {
// Link to newBlock panel
}
}]
});
// Content
Test.views.newBlock = new Ext.Panel({
id: 'content',
layout: 'fit',
dockedItems: [{
cls: 'copy',
html: '<h2>Test 2</h2>'
}]
});
// Container
Test.views.container = new Ext.Panel({
id: 'container',
layout: 'fit',
dockedItems: [Test.views.toolbar, Test.views.content]
});
// Viewport - Entire screen
Test.views.viewport = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
items: [Test.views.container]
});
}
});
What function is required within the function() tag for the button handler to change the dockedItem within the container to be newBlock rather than content.
Many thanks for help in advance.
addDocked and removeDocked.
Test.views.viewport.removeDocked( Test.views.content )
Test.views.viewport.addDocked( Test.views.newBlock )
It seems a little odd you are adding content into dockedItems though, maybe you ment to add them to the normal items collection?
Either way, checkout everything available for Ext.Panel in the main api docs to familiarise yourself with the standard component functions.