I have a question about xtypes. When I do this:
// map
var map = new Ext.map({
fullscreen: true,
getLocation: true,
mapOptions: {
zoom: 12
}
});
map.map.setCenter(new google.maps.LatLng(record.attributes.record.data.latitude, record.attributes.record.data.longitude));
Everything is fine, the map is showing up.
Now, when I work with xtypes, the 'map'-variable won't recognize the 'setCenter'-property.
Code:
var map =
{
fullscreen: true,
xtype: 'map',
title: 'Map',
getLocation: true,
useCurrentLocation: true,
mapOptions:
{
zoom: 12
}
};
map.map.setCenter(new google.maps.LatLng(record.attributes.record.data.latitude, record.attributes.record.data.longitude));
With this code, I get this in the console:
Uncaught TypeError: Cannot call method
'setCenter' of undefined
I hope someone can help me. Thanks in advance!
When you are calling map.map.setCenter(), your map object has already been instantiated. By defining your map with xtype, lazy instantiation is used.
You could try somethign along the lines of:
{
xtype: 'map',
fullscreen: true,
getLocation: true,
mapOptions: {
zoom: 12
},
listeners: {
maprender: function(component, map) {
map.setCenter( ... )
}
}
}
Related
I have the following view I have defined:
Ext.define("app.view.stock.SearchValueField", {
extend: "Ext.form.field.Text",
alias: "widget.searchvaluefield",
name: "search_value_field",
enableKeyEvents: true,
allowBlank: false,
listeners: [
{
keyup: {
fn: function(){console.log('logged');}
}
}
],
initComponent: function() {
this.callParent(arguments);
}
});
But on keyup the listener isn't being triggered. I am quite well versed in the mvc architecture so please assume that the other parts of my app are correct.
You have to provide an Object for the listeners config parameter, as described in the Observable documentation.
You used an Array. It works using the following code:
Ext.define("app.view.stock.SearchValueField", {
extend: "Ext.form.field.Text",
alias: "widget.searchvaluefield",
name: "search_value_field",
enableKeyEvents: true,
allowBlank: false,
listeners: {
keyup: function() {
console.log('logged');
},
},
// actually the 'empty' override of initComponent isn't necessary
initComponent: function() {
this.callParent(arguments);
}
});
i am new to sencha touch2. i want display list in a page. binding is happening successful. but i am not able to see data but able to scroll page. please any one can help me. i facing this issue. thank you.
My code is here:
Ext.define("Sencha.view.ProjectListView", {
extend: 'Ext.form.Panel',
xtype: 'projectListepage',
id: 'projectListepage',
requires: [
'Ext.data.JsonP'
],
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'JSONP'
},
{
docked: 'top',
xtype: 'toolbar',
flex: 3,
items: [{
text: 'Project Deatils',
handler: function () {
var list = Ext.getCmp('JSONP'),
tpl = new Ext.XTemplate([
'<tpl for=".">',
'<img src="{MainImageUrl}"/><label>{ProjectName}</label><p class="temp_low">{ShortDescription}</p>', //
'</tpl>',
]);
Ext.data.JsonP.request({
url: 'http://localhost:53985/PropertyService.svc/GetAllProject',
callbackKey: 'callback',
params: {
},
callback: function (success, request) {
var project = request;
if (project) {
list.updateHtml(tpl.applyTemplate(project));
}
else {
alert('There was an error retrieving the weather.');
}
}
});
}
}]
}]
}
});
I do not see anywhere in your code sample where you are creating a list. You need to extend 'Ext.List' or use xtype:'list'. There are a few simple examples in the sencha touch 2 docs on how to create a list. http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.List
I understood that by calling MyDetailView.Update(record.data) I send record.data to MyDetailView and can access them in the xtemplate:
tpl:'<h1>{title}></h1>'
Additionally I want to use record.data in an item of xtype 'map':
items: [
{
xtype: 'map',
getLocation: true,
padding: '20 0 0 0',
mapOptions: {
center : new google.maps.LatLng(lng, lat), // <-- here record.data.lat
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
How can I access the data in MyDetailView?
Thanks
----------------EDIT------------------
I add my complete code. In the list view I call an AppDetailcard.update(record.data).
var AppDetailcard = new Ext.Panel ({
id: 'detailcard',
styleHtmlContent: false,
tpl: 'my {lat}', //<-- here it works
fullscreen: true,
dockedItems: [AppDetailcardToolbar],
items : [
{
xtype: 'map',
getLocation: true,
mapOptions: {
center : new google.maps.LatLng(data.lat, data.lng), //<-- here it does not
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
You have to also push the new record into your items array.
this.down('map').setMapCenter({
latitude: newRecord.data.latitude,
longitude: newRecord.data.longitude
});
I usually push records, not data, into the view and then use the updateRecord event to accept that record and push it further down the items array.
Look at the navigationview example on the Sencha site, in the Show.js view file, where they do exactly that.
(complete re-edit of my previous post)
I'm trying to build my first Sencha touch app and i've got a problem.
In my viewport I have 2 xtype : Home and ContainerListAdress.
When I click on the ContainerListAdress icon the card slides to the list.
here is my code (in listcard.js):
// My List view card
myAPP.views.ListAdressCard = Ext.extend(Ext.List, {
id:'listadresscard',
styleHtmlContent: true,
// cardSwitchAnimation: 'slide',
// items: [{ xtype: 'detailcard' } ],
store: myAPP.ListStore,
itemTpl: '<div>{name}</div>',
grouped: true,
onItemDisclosure: function(){
myAPP.views.containerlistadresscard.setActiveItem('detailcard');
}
});
// My container for both the list and the detail view
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [{xtype:'listadresscard'}, {xtype:'detailcard'}]
});
Ext.reg('listadresscard', myAPP.views.ListAdressCard);
Ext.reg('containerlistadresscard', myAPP.views.ContainerListAdressCard);
Then in detailcard.js I have
DetailcardToolbar = new Ext.Toolbar ({
id:'detailbar',
title: 'station',
dock:'top'
});
myAPP.views.Detailcard = Ext.extend(Ext.Panel, {
id: 'detailcard',
styleHtmlContent: true,
html: 'Made from coffee',
dockedItem:[DetailcardToolbar]
});
Ext.reg('detailcard', myAPP.views.Detailcard);
My error is
Uncaught TypeError: Cannot call method 'setActiveItem' of undefined
If I camelcased containerlistadresscard I got
Uncaught TypeError: Object function (){h.apply(this,arguments)} has no method 'setActiveItem'
But the detailcard I want to set active is referenced in the container ?
Thanks for your help.
---------------------------EDIT----------------------------
I decided to put all in one page, just for clarity, but face the same issue
var myAPPDetailcard = new Ext.Panel ({
id: 'detailcard',
styleHtmlContent: true,
html: 'Made from coffee',
layout: 'fit'
});
var myAPPListAdressCard = new Ext.List ({
id:'listadresscard',
styleHtmlContent: true,
store: myAPP.ListStore,
itemTpl: '<div>{name}</div>',
grouped: true,
onItemDisclosure: function(){
myAPP.views.ContainerListAdressCard.setActiveItem(myAPPDetailcard);
}
});
// My container for both the list and the detail view
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [myAPPListAdressCard, myAPPDetailcard]
});
Ext.reg('containerlistadresscard', myAPP.views.ContainerListAdressCard);
No, Ext.extend() defines a class. Here you created a class this way:
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [myAPPListAdressCard, myAPPDetailcard]
});
Then you create an instance of it like this way:
var mainContainer = new myAPP.views.ContainerListAdressCard({
fullscreen : true
});
You can call setActiveItem() on this mainContainer variable, not on a class definition.
.....
onItemDisclosure: function(){
mainContainer.setActiveItem(myAPPDetailcard);
}
Hope this help.
I am having a very hard time understanding why i can't go back to the previous panel within my application. Enough talk, some code
appsDetails = Ext.extend(Ext.Panel, {
layout: 'fit',
scroll: 'verticall',
initComponent: function() {
this.dockedItems = [{
xtype: 'toolbar',
items: [{
ui: 'back',
scope: 'this',
handler: function() {
console.log(this.ownerCt) //This returns "undefined"
this.ownerCt.setActiveItem(this.prevCard, {
type: 'slide',
reverse: true,
scope: this,
after: function() {
this.destroy();
}
})
}
}]
}];
this.items = [{
styleHtmlContent: true,
tpl: description,
data: this.record.data
}];
appsDetails.superclass.initComponent.call(this);
}
});
I am getting to this view above by using this code below in the previous panel
selection: function(list, index) {
if (index[0] !== undefined) {
var details = new appsDetails({
homeCard: this.appsPanel,
record: index[0],
});
this.setActiveItem(details, {type: 'slide', direction: 'left'})
}
}
I have no problem getting to the desired panel but i can't come back the previous one.
Thx for your help
You are passing a string object with value 'this'. Change this line: scope:'this' in scope:this