I have a google map defined in Sencha touch 2. It's showing the map, but it's not responding on touch events. I can't move or pinch it.
Ext.define('AddressBook.view.contact.Show', {
extend: 'Ext.Panel',
xtype: 'contact-show',
requires: [
'Ext.Map'
],
config: {
title: 'Information',
layout: 'card',
items: [
{
xtype: 'map',
mapOptions : {
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
},
centerMap: function(newRecord) {
...
},
setMarkers: function(markers) {
...
}
});
I created it in app.js:
Ext.Loader.setConfig({ enabled: true });
Ext.application({
...
launch: function() {
Ext.Viewport.add({
xclass: 'AddressBook.view.contact.Show'
});
}
});
I include the google script:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"</script>
The thing is that the "Map" example that Sencha is providing seems to work fine. But it's using Ext.setup() and Ext.create() to show the map in app.js. I can't figger out why it's working fine that way. But also I can't use that way of creating the map. Anyone knows what's the problem?
Found the problem.
The 'map' example from Sencha that worked has a script included that does not exist in the sample, but exists in another sample I used as a template for my project.
<link rel="stylesheet" href="css/example.css" type="text/css"/>
BY THE SAKE OF THIS NON EXISTING SCRIPT INCLUDE GOOGLE MAPS IS WORKING IN EXAMPLE 'MAP'.
In other words if you include it in your project with Google maps, it will become irresponsive!
I had to strip the 'map' example down to finally find the problem, cost me a lot of time, thanks to someone not cleaning his code before it becomes an example!
B.t.w. this is the reason that the 'navigationview' example also has a freezed Google Map because it needs this corrupting script to show it's styles.
I ask the Sencha Team to remove this confusing code from their examples.
Related
I have a Sencha Touch 2.3 application that I am helping develop. One of the features I want to implement is uploading a file that I then do various things with using PHP in the back-end. However, I cannot find a way that works to actually complete the upload (or even show a dialog box to select a file to upload!)
I have a navigation bar that looks like the following:
...
navigationBar: {
docked: 'top',
id: 'mainAdminToolbar',
items: [
{ ...
},
{
align: 'right',
hidden: true,
text: 'Import',
itemId: 'ImportBtn',
}
]
...
In my main controller file, I have the following:
ImportBtn: "adminMain #ImportBtn",
"adminMain #ImportBtn": {
tap: "onImportTap"
},
...
I looked at the a lot of examples (such as this one and this one), but I can get none of them to work. I believe the latter might be for a more updated version of the framework, too, but I cannot update as of right now and have to work with version 2.3
What I want to do is the following:
Have a user click the button
Have a dialog window pop up in which a user can select a file
Have the file auto-upload after being selected
Do various server-side things with the file
How can I achieve this using Sencha Touch 2.3?
Try to use
xtype: 'filefield' and it's 'updatedata' event
To select file you can write something like this
{
xtype: 'filefield',
itemId: 'ImportBtn',
listeners: {
change: function (button, newValue, oldValue, eOpts) {
alert(newValue);
}
}
}
And after selecting the file you can get it with this (It works fine in 2.4)
var file = [your-filefield].getComponent().input.dom.files[0];
Here is more about filefield
http://docs.sencha.com/touch/2.3.0/#!/api/Ext.field.File
I have an OpenLayers 2.12/Sencha 2.4 app. On selecting a feature I wish to change to another view - a FormPanel. This works fine using Ext.View.setActiveItem(viewname).
However, there is an issue with Google Chrome on Android, when I change the view from the FormPanel back to the map view, and only after both the virtual keyboard and an Ext.Msg.alert() call have been invoked in the FormPanel.
I've analysed this with Chrome's debugger. When the I click on one of the form fields in the FormPanel, most of the OpenLayers tiles are removed from the DOM. When I set the active item back to the map view, no new tiles are added to the map div so the app ceases to be useful. The svg that is the vector layer also ceases to function usefully.
One version of the app is here: https://treemapp.se/fiddles/sencha/ol-sencha-4.html - all the code is in the html file.
Can anyone help?
Thanks
Mini
I added map.updateSize() to the 'painted' listener, which has mostly solved the problem:
Ext.application({
launch: function() {
container1 = new Ext.Container({
scroll: false,
monitorResize: true,
items: [{
xtype: 'component', //xtype: 'panel' - shows nothing
id: 'map',
width: '100%',
height: '100%',
listeners: {
painted: function(){
console.log( "painted" );
if( !map ) {
init( this.id );
} else {
map.updateSize();
}
}
}
}]
});
});
});
Looks like I might need to add a layer.redraw() or layer.refresh() loop for all the layers, as one or two tiles don't get redrawn after the call to map.updateSize() - they do however get drawn after zooming or moving.
Mini
I have a tab panel and every tab has grid in it, but after loading, data in first tab is missing but it displays fine in 2nd tab , this is working in all the browsers in Extjs 4.2 but it is not working in Extjs 5.0 with IE. ( working fine in chrome ) thee is no errors on console. I am getting crazy with this issue. may be it is a bug in Extjs 5. Thanks in advance.
//main panel class
Ext.define('MyApp.view.MyView', {
extend: 'Ext.tab.Panel',
alias : 'widget.myView',
id : 'myView',
autoScroll : true,
activeTab: 0,
height: 600,
layout: {
type: 'column'
},
requires : [
'MyView.view.FirstTab',
'MyView.view.SecondTab'
],
initComponent : function() {
this.items = [
{
xtype: 'panel',
id: 'fTab',
autoScroll: true,
items: [ { xtype: 'firstTab' }]
},
{
xtype: 'panel',
id: 'sTab',
autoScroll: true,
items: [ { xtype: 'secondTab' } ]
}
];
this.callParent(arguments);
}
});
//controller
var isActivieTabSet = false;
// if store1 has data show the first tab
if(store1Count > 0) {
var tab0 = myView.down('#fTab');
tab0.tab.show();
if (!isActivieTabSet) {
searchSummaryView.setActiveTab(tab0);
isActivieTabSet = true;
}
} else {
myView.down('#fTab').tab.hide();
}
//check if store2 has data
if(store2Count > 0) {
var tab1 = myView.down('#sTab');
tab1.tab.show();
if (!isActivieTabSet) {
myView.setActiveTab(tab1);
isActivieTabSet = true;
}
} else {
myView.down('#sTab').tab.hide();
}
I see these issues with your code:
you should not set a layout on tab panel. Tab panel uses card layout internally, most likely it ignores any passed layout but if you set it it may be confusing for developers
you set ids on components - they are unique in the code you posted but it may not be true for the whole application. The general rule is not to manually set ids - you don't need them.
you overnest - you don't need to wrap 'firstTab' in 'fTab'. We always try to use the most shallow containment chain possible.
hiding tabs is very unusual. I'm not saying that it wouldn't work but if you need to hide a tab then you can use card layout with some simple switching logic. Tab panel is de-facto a card layout with tab "buttons" to switch the active card.
Otherwise the code does not give a clue why it should misbehave. I would suggest a) fix the above and, if it does not help b) prepare a showcase at https://fiddle.sencha.com so that I can run it and find the real culprit.
Thank you!!
1) Right , No need to specify the Layout on tab panel. I took this out
2) Right, it is a good practice to not add the Ids but we are nesting these components and show/hide by using these ids.
3) Right, that was the first thing that came to my mind, take out the wrapper panel from the grid and it works fine and show up the data but with this we have two issues.
a) In the Grid we are using 'pagingtoolbar' and shows at the botton (same in the whole application)
this.dockedItems = [ { xtype: 'pagingtoolbar', store: this.store, displayInfo: true,
dock: 'bottom' } ];
We are using the CARD layout and when we take out the panel this always shows at the botton even though the grid has only 5 records and It looks very weird and we don't want to put this on top (dock: 'top' )
b) Other issue iis sometime Column Header and data are not aligned
{header: 'Number', dataIndex: 'number', flex: 1 }
if i take out the flex:1 then all the columns get too narrow and half of the vertical space on the right is empty.
4) We have this use case that if grid does not have any data then don't show the tab. so we have to manually show/hide the tab.
Let me combine these classes & upload them (but it may time because I have to take out only the necessary objects :( ).
Thanks you again for your help!!
My Grid is inside the panel and this panel is inside the main tabpanel. if i removed the panel over the Gris then it works fine.
//this does not works (does not show data in first tab)
{
xtype: 'panel',
id: 'fTab',
autoScroll: true,
items: [ { xtype: 'firstTab' }]
},
//this works
{
xtype: 'firstTab'
}
I guess this is a bug in Extjs 5.0, same code works in Extjs 4.2 and also in Chrome.
OK, i found the solution, I have to add this on the grid.
bufferedRenderer: false,
In Extjs 5 it is true by default and it is not behaving right in IE when the Grid is inside a Panel with pagination. after this everything works great :) Thanks
All examples that I have found so far explain how to render ExtJS (4.2) MVC application within the "viewport", which in other words means full browser screen, and occupying whole HTML BODY.
I would like to render application within the existing HTML page within named DIV, so that I can have HTML design around the application.
<div id="appdiv"><!-- application runs here --></div>
I've seen some sites with ExtJS 4 examples that use trick to render ExtJS app within the page by using IFRAME.
Is it possible to avoid IFRAME? And, if it is, how skeleton of ExtJS 4.2 application shall look like if it will be rendered within a div.
Notes: In ExtJS 3 I have found the solution by creating a panel as main container which renders within named div. However, version 4.2 (and possibly earlier 4.x's) suggests MVC application approach that seem far superior.
---- Edits
I have realised that I have to put starting points for this question.
Source for this example is generated by ExtJS's CMD command that generates "application" framework skeleton.
Skeleton of application is consisted of many files including engine reference, and other references, so I would not be able to include here all sources in "application" dir/folder. Skeleton of application can be done using cmd in the fashion: sencha -sdk /myuserroot/Sencha/Cmd/3.1.1.274 generate app ExtGenApp /mywebroot/htdocs/extja_genapp This generates files and folders and copies all necessary files in the place.
"User" activity area is in "app" dir. App dir has subdirs for views, controllers, models and additional stuff.
As in many other frameworks you are expected to keep folder structure so that framework can find appropriate files and initialise them.
list of files:
index.html (in the root of the generated application)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>ExtGenApp</title>
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js"></script>
<!-- </x-compile> -->
</head>
<body>
<h1>HTML Before</h1>
<div id="appBox"></div>
<h1>HTML After</h1>
</body>
</html>
app/app.js
/*
This file is generated and updated by Sencha Cmd. You can edit this file as
needed for your application, but these edits will have to be merged by
Sencha Cmd when it performs code generation tasks such as generating new
models, controllers or views and when running "sencha app upgrade".
Ideally changes to this file would be limited and most work would be done
in other places (such as Controllers). If Sencha Cmd cannot merge your
changes and its generated code, it will produce a "merge conflict" that you
will need to resolve manually.
*/
// DO NOT DELETE - this directive is required for Sencha Cmd packages to work.
//#require #packageOverrides
Ext.application({
name: 'ExtGenApp',
views: [
'Main',
'appBoxView'
],
controllers: [
'Main'
],
launch: function() {
new Ext.view.appBoxView({
renderTo: 'appBox'
});; // generates error
}
});
note: originally there is no launch function but there is auto generate viewport (one gets that by default generator)
app/controller/Main.js
Ext.define('ExtGenApp.controller.Main', {
extend: 'Ext.app.Controller'
});
app/view/appBoxView.js
Ext.define('ExtGenApp.view.appBoxView', {
extend: 'Ext.panel.Panel',
requires:[
'Ext.tab.Panel',
'Ext.layout.container.Border'
],
layout: {
type: 'border'
},
items: [{
region: 'west',
xtype: 'panel',
title: 'west',
width: 150
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Center Tab 1'
}]
}]
});
this shall be initial layout on the screen (AFAIK)
and finally:
app/view/Main.js
Ext.define("ExtGenApp.view.Main", {
extend: 'Ext.Component',
html: 'Hello, World!!'
});
which shall, as I understood, be the "content".
as is, it generates an error of not founding "Ext.view.appBoxView" and how it looks to me, framework do not initialise the application.
A viewport is just a specialized Ext.container.Container that auto sizes to the the document body.
As such, you can easily create your own in the launch method:
launch: function(){
new MyContainer({
renderTo: 'myDiv'
});
}
In some of these answers, some suggest using an Ext.Panel with a renderTo. You shouldn't be using an Ext.Panel if you're not going to be utilizing it for anything other than a container if you're going to go this route. You should be using Ext.container.Container instead.
By using Ext.Panel you are adding a bunch of unnecessary things like the title bar and such to your component. Each one of these puts extra place holders there even if you aren't using them.
I liked Evan Trimboli's concise approach but I could not get it to work either (it also told me that MyContainer is not defined). However this approach worked...
launch: function () {
Ext.create('widget.MyContainer', {
renderTo: 'MyDiv'
});
}
...where 'widget.MyContainer' is the alias created inside the view itself, and provided I also did this up top:
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
name: 'MyApp',
views: [
'MyApp.view.MyContainer'
],
...
Have you tried using Ext.panel.Panel or Ext.window.Window as a container?
<div id="appBox">
<script type="text/javascript">
Ext.require('Ext.panel.Panel');
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
title: 'Container Panel',
items: [
{
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
width: '75%'
},
{
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
width: '75%'
}
]
});
})
</script>
</div>
anyone experienced this? I am new to this so I am not sure exactly what is going on here. But I am trying to use jqplot's meter gauge per documentation and it doesn't seem to be working. I can create bar, line, etc graphs just fine.
include the necessary script link (as well as the others needed):
<script type="text/javascript" src="../plugins/jqplot.meterGaugeRenderer.min.js"></script>
markup
<div id='chart6'></div>
js
$(document).ready(function () {
plot6 = $.jqplot('chart6', [[18]], {
title: 'Network Speed',
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'MB/s'
}
}
});
});
firebug says:
TypeError: c.jqplot is undefined - inside the meterGaugeRender js file.
any help would be greatly appreciate as always.
It looks like you did not include the basic jqPlot library, just the meter gauge add on.