I'm working on a little app which uses Sencha Touch 2 for the user interface. Right now I'm running it in Safari on my iPad and iPhone.
My problem is that whenever I tap a text field, Safari brings up the virtual keyboard and pushes the whole web view upwards, off the screen.
This doesn't look very natural, since the top-toolbar is not visible anymore.
Here are two screenshots which demonstrate the problem.
In the second screenshot you can see the effect when the keyboard is visible.
Is there a way to prevent this behavior, and have Safari resize the user interface instead?
Unfortunately, Apple wants this behavior, but someone suggested a little hack using window.scrollTo():
listeners: {
focus: function() {
window.scrollTo(0,0);
}
}
Putting this code in launch function in app.js worked for me:
if (Ext.os.is.Android) {
Ext.Viewport.on('painted', function () {
Ext.Viewport.setHeight(window.innerHeight);
});
}
if (Ext.os.is.iOS) {
Ext.Viewport.on('painted', function () {
Ext.Viewport.setHeight(window.innerHeight);
});
}
I have found a solution that works for me.
You move the topbar into the container.
xtype: 'container',
docked: 'top',
height: '100%',
html: '',
itemId: 'MyContainer',
width: '100%',
items: [
{
xtype: 'titlebar',
docked: 'top',
itemId: 'topBar',
title: 'Obec Webchat',
layout: {
type: 'hbox',
align: 'start'
},
items: [
{
xtype: 'button',
action: 'back',
id: 'BackButton',
itemId: 'BackButton',
margin: '5 70% 5 15',
ui: 'back',
text: 'Home'
}
]
},
{
xtype: 'container',
docked: 'bottom',
height: '95%',
html: '<iframe src="http://webim.obec.local/" width="100%" height="100%" scrolling="yes"></iframe>',
itemId: 'MyContainer1',
width: '100%'
}
]
}
Hope this helps.
You will need to call the blur() method on textfield
// Assuming the id of textfield - "textFieldId"
Ext.getCmp('textFieldId').blur();
Attempts to forcefully blur input focus for the field.
If you this using html into Sencha elements must remove something tag html. Or can you put tag in the source html code. I hope help you. :)
Related
I crated a tab view using TabNavigator. Here is the library I used. Total I have 3 tabs. So Initial tab is loading & rendering fine without hassle. But the problem is coming with 3rd Tab. I checked with console.log() in every method in that 3rd tab component. Every method is executing but not showing results ( Showing blank screen) until I interact with it. When I start interacting with it, then only data is re-rendering(I think so).
How can I solve this problem? Any help?
Thanks
I solved it by configuring tab navigator with prop lazy true. Below is the code I modified. It's working now.
const TabView = TabNavigator({
feed: { screen: Feed },
info: { screen: Info },
members: {screen: Members}
}, {
tabBarPosition: "top",
tabBarOptions: {
activeTintColor: "#4A90E2",
inactiveTintColor: "#4A4A4A",
style: {
backgroundColor: 'white',
height:56,
alignItems: 'center',
shadowColor: '#000000',
shadowOpacity: 0.1,
shadowRadius: 0,
shadowOffset: {
height: 2,
width: 1
}
},
tabStyle: {
height: 40,
},
labelStyle: {
fontSize:12,
fontFamily:'HelveticaNeue-Medium'
}
},
lazy:true
});
I am working in Sencha Extjs 6.1 where i need to load document (pdf) in uxiframe, its working fine (scrolling) with IOS version below 10, but not in IOS 10 Ipad. it stuck it after small scroll of pdf page, but in IOS below 10 it scroll to complete page.
Following is my code :
Ext.define('MapViewer.view.main.HTMLPanel.HTMLPanel', {
extend: 'Ext.panel.Panel',
xtype: 'htmlpanel',
height:300,
header: false,
style: '-webkit-overflow-scrolling: touch !important;',
requires: ['MapViewer.view.main.HTMLPanel.HTMLPanelController'],
controller: 'htmlpanelcontroller',
tbar: {
items: [
{
cls: 'selectedButtonCls',
reference: 'iframePlanTekst',
itemId: 'iframePlanTekst',
header: false,
//glyph: 'xe902#icomoon', // plantekst
iconCls: 'icon-viewer_plantekst',
listeners: {
click: 'onButtonClick'
}
},
{
reference: 'iframeDiagram',
itemId: 'iframeDiagram',
header: false,
hidden: true,
//glyph: 'xe901#icomoon', // diagram
iconCls: 'icon-viewer_diagram',
listeners: {
click: 'onButtonClick'
}
}
]
},
items: [
{
xtype: 'uxiframe',
height: '99%',
cls:'textTouchCss',
itemId: 'htmluxpanel',
style: 'padding:10px 10px 5px 10px',
reference: 'htmluxpanel',
header: false
}
]
});
Where cls : textTouchCss is like:
.textTouchCss{
-webkit-overflow-scrolling: touch !important; overflow: scroll !important;
}
putting scrollable: true or scrollable :'y' will freezes the panel.
I am loading the path in uxiframe like
Ext.ComponentQuery.query("htmlpanel")[0].down('#htmluxpanel').load(path);
Can any one has idea, what should be done to make this scroll better in IOS 10 ? Please help.
thanks
(sencha fiddle for filefield inside fieldset)
I have a filefield inside a fieldset in extjs6. Fieldset is collapsed initially and I made filefield as button only. If I open the fieldset in chrome button shown and I don't see the button in firefox.
If I comment out line no 19 in the attached fiddle or make the fieldset open when starting, filefield looks good in both firefox and chrome.
Please refer the attached sencha fiddle and tell whats wrong.
Mohan, it sure does look like a bug.
I noticed that if you start out not collapsed then it works OK. So as a workaround you can chage your config to start out not collapsed and then collapse it in the afterrender:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'Fieldsets with Files',
//labelWidth: 75,
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
//layout: 'column', // arrange fieldsets side by side
items: [{
xtype : 'fieldset',
name : 'docAttachment',
border: 2,
title : '<b>Attach your document</b>',
collapsible : true,
//collapsed : true,
//layout : {
// type : 'hbox',
// align : 'center',
// pack : 'center'
//},
items :[{
xtype: 'fileuploadfield',
name: 'fileuploads',
buttonOnly: true,
buttonText : 'Select a File...'
}],
listeners:{
'afterrender':function(){this.collapse();}
}
}]
});
}
});
How to use custom content to show the grid's tooltip? I want to show the tooltio ofcoloumn 2 and coloumn 3 ,and the content is a span which id called spanid or div which is called divid?
var tooltip = $("#Grid").kendoTooltip({
filter: "td",
width: 120,
position: "top",
content: value
}).data("kendoTooltip");
I try to write this,but it seems wrong.
var tooltip = $("#Grid").kendoTooltip({
filter: "td[3n]||td[2n]",
width: 120,
position: "top",
content: divid.html
}).data("kendoTooltip");
This is a working code for my scenario, it will work tool tip for all product names with class pLink
$(".pLink")
.kendoTooltip(
{
content: kendo.template($("#toolTipTemplate").html()),
position: "top",
width: "auto",
height: "auto",
animation: {
close: { effects: "fadeOut zoom:out", duration: 300 },
open: { effects: "fadeIn zoom:in", duration: 300 }
}
});
<script id="toolTipTemplate" type="text/x-kendo-template">
<p class="tooltipProductName">#=target.data('title')#</p>
</script>
//show the tooltip
tooltip = $("#grdData").kendoTooltip({
filter: 'td:not(:first-child, :nth-child(2), :empty)',
})
this will allow you to select first column , second column and it will also filter out empty cells. You can use the nth child selector. As this is a CSS3 selector, it will work from IE9+, chrome and firefox won't be an issue.
Hope this helps !
I'd like to change the placement of the "exporting" buttons. In the moment they are positioned at the top right, and thus hiding pieces of a longer title. I'd like to change that, but don't see in the references a parameter for that.
Thanks for any hints!
There are many options to style buttons, you just have to take a look the reference.
Using exporting, you can directly style the button, like:
exporting: {
buttons: {
exportButton: {
align: 'left',
x: 40
}
}
}
demo
Using navigation you can style all buttons:
navigation: {
buttonOptions: {
align: 'center'
}
}
demo
Reference:
http://api.highcharts.com/highstock#exporting.buttons.exportButton
Ricardo's answer is almost correct. I believe the syntax has changed since he answered.
exporting button documentation
exporting: {
buttons: {
contextButton: {
align: 'left',
x: 0,
y: 380,
verticalAlign: 'top'
}
}
},
This works for me:
exporting: {
buttons: {
contextButton: {
align: 'center',
x: 50
}
}
},
You can use x/y or align parameter: ExportButton Align