I can't put any marker on my google map using sencha touch. This code works correctly:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var position = new google.maps.LatLng(36.830618975720746,10.1987886428833);
var position2 = new google.maps.LatLng(33.7580276912933,10.848312377929688);
var map = new Ext.Map({
mapOptions: {
center: position
},
listeners: {
delay: 500,
afterrender: function(){
var marker = new google.maps.Marker({
position: position,
title: 'helooooooo',
map: map.map
});
var marker2 = new google.maps.Marker({
position: position2,
title: 'helooooooo',
map: map.map
});
}
}
});
var icons = new Ext.TabPanel({
fullscreen: true,
items: [{
iconCls: 'bookmarks',
title: 'page principale',
cls: 'card card3',
html: 'Blaaaaaaaa'
}, {
iconCls: 'search',
title: 'MapTunis',
cls: '',
layout: 'fit',
items: map
}],
tabBar: {
scroll: {
direction: 'horizontal',
scrollbars: false
},
layout: {
pack: 'center'
}
},
});
}
});
I tried this code on its own and it worked fine. But when i tried it with an xtype:Map it wouldnt work no matter what I try.
App.views.Homegeoatm = Ext.extend(Ext.Panel, {
items: [{
xtype: 'map',
id: 'map',
useCurrentLocation: true,
fullscreen: true,
markerDesc: "salam",
markerPos: new google.maps.LatLng (36.830618975720746,10.1987886428833),
mapOptions: {
zoom: 8
},
listeners: {
delay: 500,
afterrender: function(){
var marker = new google.maps.Marker({
position: position = new google.maps.LatLng (36.830618975720746,10.1987886428833),
map: App.views.Homegeoatm.getComponent('map').map,
});
}
}
}]
});
Ext.reg('Homegeoatm', App.views.Homegeoatm);
You need to add the marker on "maprender" event (instead of "afterrender") of the map. Try this one:
listeners: {
maprender: function(extMapComponent, googleMapComp){
var marker = new google.maps.Marker({
position: new google.maps.LatLng (36.830618975720746,10.1987886428833),
map: googleMapComp,
});
}
This should work (not tested).
Related
I try to display PDF stream in separate window and this stream is from database BLOB field. My code is the following:
Ext.define('MyApp.view.ViewPDF', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
requires: [
'Ext.toolbar.Toolbar',
'Ext.button.Button'
],
config: {
title: '',
source: ''
},
itemId: 'SHOW_PDF',
closable: false,
resizable: true,
modal: true,
onClose: function (clsbtn) {
clsbtn.up('window').destroy();
},
initComponent: function () {
var my = this;
Ext.apply(my, {
items: [
{
xtype: 'panel',
layout: 'fit',
width: 640,
height: 780,
items: [
{
items: {
xtype: 'component',
align: 'stretch',
autoEl: {
tag: 'iframe',
loadMask: 'Creating report...please wait!',
style: 'height: 100%; width: 100%; border: none',
src: 'data:application/pdf;base64,' + tutaj.getSource()
}
}
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
height: 30,
items: [
'->',
{
xtype: 'button',
baseCls: 'x-btn-default-large',
cls: 'cap-btn',
handler: my.onClose,
width: 55,
margin: '0, 10, 0, 0',
style: 'text-align: center',
text: 'Close'
}
]
}
]
});
my.callParent();
my.title = my.getTitle();
}
});
and it's working only via FireFox browser. In Chrome I can see empty window. So two questions (can't answer myself):
how to correct above to display this PDF stream in other browsers
how to display text in mask because loadMask in code above can't
work; just display text starting with window open and finishing when PDF is displayed
Be so kind as to prompt me what's wrong in this code.
I have created a FIDDLE using filefield, BLOB and FileReader. I have tested in chrome and Fire Fox. I hope this FIDDLE will help you or guid you to solve your problem.
CODE SNIPPET
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
height: window.innerHeight,
title: 'Iframe Example for PDF',
bodyPadding: 10,
items: [{
xtype: 'fileuploadfield',
buttonOnly: true,
buttonText: 'Choose PDF and show via BLOB',
listeners: {
afterrender: function (cmp) {
cmp.fileInputEl.set({
accept: '.pdf'
});
},
change: function (f) {
var file = document.getElementById(f.fileInputEl.id).files[0];
this.up('form').doSetPDF(file);
}
}
}, {
xtype: 'fileuploadfield',
buttonOnly: true,
buttonText: 'Choose PDF and show via BASE64 ',
listeners: {
afterrender: function (cmp) {
cmp.fileInputEl.set({
accept: '.pdf'
});
},
change: function (f) {
var file = document.getElementById(f.fileInputEl.id).files[0];
this.up('form').doSetViaBase64(file);
}
}
}, {
xtype: 'box',
autoEl: {
tag: 'iframe',
loadMask: 'Creating report...please wait!',
width: '100%',
height: '100%'
}
}],
//Show pdf file using BLOB and createObjectURL
doSetPDF: function (file) {
if (file) {
var form = this,
blob, file;
if (Ext.isIE) {
this.doSetViaBase64(file)
} else {
blob = new Blob([file], {
type: 'application/pdf'
}),
file = window.URL.createObjectURL(blob);
form.getEl().query('iframe')[0].src = file;
}
}
},
//Show pdf file using BASE64
doSetViaBase64: function (file) {
var form = this,
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
form.getEl().query('iframe')[0].src = this.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
});
I'm back on the project of catalogue viewer app, and after updating to the last sencha release, I have the same problem I had a couple of month ago...the carousel don't recognize the onTap event or, it won't load correctly.
The app is quite simple, the structure is the following:
company name
list of catalogues
detailcard with the catalogue pages (3 per row)
carousel starting from the page tapped
The fact that when I use the app NOT compiled with sencha cmd, it work very smoothly, and problemless, but when I build the app (also production and packaging) with sencha cmd, it won't work.
The dataview show all the image, and when I click one of them, it pop-up the carousel, but empty. I tried to debug, and it won't do the initialize, but why only in the build version?
The code that I use is the following:
Ext.define('CIAM_app.view.Cataloghi', {
extend: 'Ext.NestedList',
xtype: 'cataloghi',
requires: ['Ext.data.TreeStore', 'Ext.carousel.Carousel'],
fullscreen: true,
config: {
iconCls: 'doc',
iconMask: true,
title: 'Cataloghi',
styleHtmlContent: true,
store: 'lista_cataloghiStore',
variableHeights: true,
listConfig: {
itemTpl: '<tpl if="leaf == false"><img src="{icon}" alt="{text}" class="cataloghi_img" /></tpl><tpl if="leaf == true"><p class="cataloghi_p">{text}</p></tpl>',
},
listeners: {
leafitemtap: function(nestedList, list, index, target, record) {
var detailCard = nestedList.getDetailCard();
var pagina = record.get('immagini_catalogo');
var n = record.get('pagine_catalogo');
items = [];
if (detailCard.getData() != null) {
detailCard.getStore().removeAll(true, true);
}
for (i = 1; i <= n; i++) {
items.push({
src: 'gallery/' + pagina + '/' + i + '.jpg',
});
}
detailCard.setData(items);
detailCard.refresh();
},
},
detailCard: {
xtype: 'dataview',
itemTpl: '<img src="{src}">',
cls: 'immagine_catalogo',
listeners: {
itemtap: function(dataView, index, target, record, e, eOpts) {
Ext.Viewport.add({
xtype: 'carousel',
extend: 'Ext.Carousel',
defaultType: 'image',
initialize: function() {
this.setItems(dataView.getData());
this.setActiveItem(index);
this.callParent();
this.element.on('tap', this.onTap, this);
},
onTap: function(e, t) {
this.fireEvent('tap', this, e, t);
this.hide();
},
style: {
'background': 'rgba(206,203,203,0.87)'
},
indicator: false,
width: '100%',
height: '100%',
centered: true,
fullscreen: true,
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
},
}).show();
}
}
}
}
});
If you want to see the webapp, here's the link: http://www.ciamcostruzioni.it/CIAM_app/not_compiled/
Thanks in advance.
I have made some changes in your code. Check it:
http://jsfiddle.net/JCarlesVilaseca/NZj3N/
Ext.define('CIAM_app.view.Cataloghi', {
extend: 'Ext.NestedList',
xtype: 'cataloghi',
requires: ['Ext.data.TreeStore', 'Ext.carousel.Carousel'],
fullscreen: true,
config: {
iconCls: 'books',
iconMask: true,
title: 'Cataloghi',
styleHtmlContent: true,
store: Ext.create('CIAM_app.store.lista_cataloghiStore'),
variableHeights: true,
listConfig: {
itemTpl: '<tpl if="leaf == false"><img src="http://www.ciamcostruzioni.it/CIAM_app/not_compiled/{icon}" alt="{text}" class="cataloghi_img" /></tpl><tpl if="leaf == true"><p class="cataloghi_p">{text}</p></tpl>'
},
listeners: {
leafitemtap: function(nestedList, list, index, target, record) {
var detailCard = nestedList.getDetailCard();
var pagina = record.get('immagini_catalogo');
var n = record.get('pagine_catalogo');
items = [];
if (detailCard.getData() !== null) {
detailCard.getStore().removeAll(true, true);
}
for (i = 1; i <= n; i++) {
items.push({
src: 'http://www.ciamcostruzioni.it/CIAM_app/not_compiled/gallery/' + pagina + '/' + i + '.jpg'
});
}
detailCard.setData(items);
detailCard.refresh();
}
},
detailCard: {
xtype: 'dataview',
itemTpl: '<img src="{src}">',
cls: 'immagine_catalogo',
listeners: {
itemtap: function(dataView, index, target, record, e, eOpts) {
Ext.Viewport.add({
xtype: 'catalogues_carousel',
listeners: {
initialize: function() {
this.setItems(dataView.getData());
this.setActiveItem(index);
}
}
}).show()
}
}
}
}
});
Ext.define('CIAM_app.view.Cataloghi_carousel', {
extend: 'Ext.Carousel',
xtype: 'catalogues_carousel',
requires: ['Ext.carousel.Carousel'],
config: {
fullscreen: true,
defaultType: 'image',
style: {
'background': 'rgba(206,203,203,0.87)',
'z-index':10
},
indicator: false,
modal: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
}
},
initialize: function() {
this.element.on('tap',function() {
this.hide();
});
}
});
I want to add panel to one of tabs of tabPanel, I use border layout for panel but when i add panel to tab it can't fill it's parent body.
panel code:
var viewport = Ext.create('Ext.panel.Panel', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true,
anchor:'100%'
},
id:'viewPort',
width:600,
height:600,
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:{
type:'vbox',
align:'stretch'
},
items: [show,treePanel,propGrid]
},tabs]
});
tab code that is parent of panel and when user click on it panel loaded to it dynamically:
var mainTabs = Ext.create('Ext.tab.Panel', {
layout: 'anchor',
id:'mtabs',
defaults: {
split: true,
anchor: '100%'
},
items: [{
title: 'Layout Window',
closeAction: 'hide',
layout: {
type: 'border',
padding: 5
},
//anchor: '100%',
width:600,
height:600,
listeners: {
activate:function (tab) {
}
},
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:'vbox',
items: [historyTreePanel,propGrid]
},tabs]
},{
title: 'History',
//xtype:'panel',
width:2000,
height:1024,
html: 'Please Wait...',
id:'history-tab',
layout:'fit',
layout: 'hbox',
default: {
anchor:'100%'
},
//iconCls: 'favorites',
//cls: 'card1',
listeners: {
activate:function (tab) {
if(!flag){
flag = true;
$.getScript("/FleetManagement/js/history/fleethistory.js", function(data, textStatus, jqxhr) {
Ext.getCmp('history-tab').add(viewport);
});
}
}
}
}],
renderTo : Ext.getBody()
});
});
in the above code tab with id:'history-tab' is my mentioned tab.How can i fix this problem?
It seems your code missing some of the components. Your tab should have correct layout. Sample code. jsfiddle example here . Hope this helps
Ext.onReady(function() { var resultsPanel = Ext.create('Ext.Panel',{
frame:false,
border:false,
collapsible:false,
title:'tab main',
layout:'border',
items:[{
region: 'center',
id:'centerPanel',
title:'center',
xtype:'panel',
layout:'fit',
border: true,
items:[{id:'grid',xtype:'panel'}]
},
{
region: 'west',
id:'westPanel',
title:'facets',
xtype:'panel',
width:'15%',
collapseMode: 'mini',
collapsible:true,
autoScroll: true,
border: false,
baseCls:'x-plain',
split: true ,
items:[{id:'facet',xtype:'panel'}]
}
]
}); var subtab = { xtype:'tabpanel',
title:'moretabs',
activeTab: 0,//tabActive,
closable:true,
border:false,
id:'idd',
items: [{border:false,layout: 'fit',cls: 'inner-tab-custom', autoShow:true, id:'sub1-',title: 'nested1',items:[resultsPanel]}] };
var tabPanel = Ext.create('Ext.tab.Panel', {
layout:'fit',
height:200,
msgDisplay: 'block',
//deferredRender:false,
border:false,
items: [subtab]
}).render(Ext.getBody());
});
Pardon me if this doesnt make much sense as i am still trying to understand certain aspects of extjs.. I m trying to to dynamically fetch a menu when a page is loaded. But seems like my MenuFetch() function does not get called.
Here is my code and here is the page:
http://srikanthrajan.com/test/
Center = Ext.create('Ext.panel.Panel', {
title: "User Admin",
region: 'center',
layout: 'fit',
dockedItems: {
xtype: 'panel',
dock: 'left',
title: 'Main Menu',
width: 160,
layout: 'anchor',
collapsible: true,
collapseDirection: 'left',
items: [
{
defaults: {
width: 140,
layout: 'vbox',
xtype: 'linkbutton'
},
id: 'MainMenu',
xtype: 'panel',
listeners: {
load: function(menu) {
menu.show()
MenuFetch()
this.load()
}
}
}
]
}
});
//function that uses ajax to fetch menu items and add them
function MenuFetch() {
Ext.getBody().mask('loading')
var menu = Ext.ComponentManager.get('MainMenu')
menu.removeAll(true)
Ext.Ajax.request({
url: 'PanelScripts/getMenu.php',
method: 'POST',
callback: function(opt, success, response) {
var text = response.responseText;
var obj = Ext.JSON.decode(text);
if (success && !obj.failure) {
menu.add(obj)
Ext.getBody().unmask()
menu.show()
} else {
obj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('Error',obj.Error)
Ext.getBody().unmask()
}
}
});
}
PS: I am not sure if I even need the load listener. Basically I need to call the menuftech function which fetches the menu items in a json format.
Use the Ext.ComponentLoader (or loader config property) to load remote content for the menu. It seems like the xtype should be 'menu' instead of 'panel' based on what you are trying to accomplish. Try something like this:
var adminPanel = Ext.create('Ext.panel.Panel', {
title: 'User Admin',
region: 'center',
layout: 'fit',
dockedItems: {
xtype: 'panel',
dock: 'left',
title: 'Main Menu',
width: 160,
layout: 'anchor',
renderTo: Ext.getBody(),
items:[
{
xtype: 'menu',
width: 100,
loader: {
url: 'foo.bar',
autoLoad: true,
callback: function(loader, success, response, options) {
var menu = adminPanel.down('menu');
if (success) {
menu.add(response.items);
menu.show();
}
},
scope: this
}
}
]
}
});
I have a panel whose items are a list and a panel like below
When I click on a button, I want to hide this panel. So far, I managed to do that, but this is what I get
I would like to know how to remove this grey space form the bottom of the panel.
I already this but it's not working :
this.toolsPnl.hide({type:'slide', direction:'up'});
this.doComponentLayout();
this.doLayout();
Update : Code
this.pasteBtn = new Ext.Button({
cls:'paste-copy-tools-panel',
text: 'Coller',
ui: 'normal',
handler : this.onPasteBtnTap,
scope:this
});
this.cancelBtn = new Ext.Button({
cls:'cancel-copy-tools-panel',
text: 'Annuler',
ui: 'normal',
handler: this.onCancelBtnTap,
scope:this
});
this.toolsPnl = new Ext.Panel({
layout:{type:'hbox', align:'stretch'},
height:40,
cls:'document-tools-panel',
hidden:true,
items:[this.pasteBtn,this.cancelBtn]
});
this.currentFolderPnl = new Ext.Panel({
cls:'document-current-folder-panel',
html:'/'
});
this.list = new Ext.List({
flex:1,
cls:'document-list',
id: 'document-list',
store: app.stores.Document,
itemTpl: app.templates.document
});
app.views.DocumentList.superclass.constructor.call(this, {
selectedCls : "x-item-selected",
dockedItems: [{
xtype: 'toolbar',
ui:'dark',
title: 'Documents',
items:[this.backBtn,{xtype:'spacer'},this.newBtn]
}],
layout: 'vbox',
items: [
this.currentFolderPnl,
this.list,
this.toolsPnl,
]
});
May help you with some hack. The main trick is in fixListHeight function, but for showing tools panel for the first time I have to call doComponentLayout for its container first. Don't know why this functionality doesn't work out of the box... have the feeling there is something I have missed. Nevertheless, here is the code.
new Ext.Application({
launch: function() {
// helper property
// indicates whether toolsPnl was shown already
this.first = true;
this.viewport = new Ext.TabPanel({
fullscreen: true,
layout: 'card',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'spacer'
}, {
text: 'show',
listeners: {
tap: function (btn) {
var panel = Ext.getCmp('toolsPnl');
if (panel.isHidden()) {
panel.show({type:'slide', direction:'up'});
btn.setText('hide');
} else {
panel.hide({type:'slide', direction:'up'});
btn.setText('show');
this.fixListHeight();
}
},
scope: this
}
}]
}],
tabBar: {
layout: {
type: 'fit'
}
},
tabBarDock: 'bottom',
items: [{
title: 'Some tabs here...',
id: 'docTab',
iconCls: 'favorites',
layout: 'card',
dockedItems: [{
id: 'toolsPnl',
dock: 'bottom',
html: 'Tools panel',
style: {
'background-color': 'lightblue',
'line-height': '2em',
'text-align': 'center',
'height': '40px',
'width': '100%'
},
hidden:true,
listeners: {
show: function () {
if (this.first) {
Ext.getCmp('docTab').doComponentLayout();
this.fixListHeight();
this.first = false;
}
Ext.defer(function () {
this.fixListHeight(-1);
}, 250, this);
},
scope: this
}
}],
items : [{
xtype: 'list',
id: 'docList',
itemTpl: '{item}',
store: new Ext.data.Store({
data: [{item: 'Some data in the list...'}],
fields: ['item']
})
}]
}]
});
this.fixListHeight = function (direction) {
var panel = Ext.getCmp('toolsPnl'),
tab = Ext.getCmp('docTab'),
list = Ext.getCmp('docList'),
el,
h = list.getHeight(),
dh = panel.getHeight(),
dir = direction || 1;
el = tab.getEl().child('.x-panel-body');
el.setHeight(h + dh * dir);
el.child('.x-list').setHeight(h + dh * dir);
el.down('.x-scroller').setHeight(h + dh * dir);
};
}
});
That looks like the default sencha touch grey. A simple work around would be adding the code below to the panel
style:'background-color:White'