I am capturing geoposition using Cordova API and then on success, I render the current location on a Google map.
When I first do a get_position using I render a form as follows:
var geo_panel = new Ext.form.Panel({
useCurrentLocation: true,
fullscreen: true,
layout: 'fit',
items: obj
});
Where obj is a toolbar defined as
toolbar = Ext.create('Ext.Toolbar', {
docked: 'top',
alias : 'widget.geolocationToolbar',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{
xtype: 'button',
ui: 'back',
text: 'Back',
// destroy form.Panel overlay and return to tree store view
handler: function() {
geo_panel.destroy();
}
},
{
xtype: 'button',
itemId: 'stopWatch',
text: 'StopWatch',
iconCls: 'arrow_right',
iconMask: true,
handler: function() {
EvaluateIt.utils.UtilityService.clear_watch();
}
},
{
xtype: 'selectfield',
itemId: 'accuracy',
autoSelect: false,
placeHolder: 'accuracy',
options: [
{text: ''},
{text: 'high', value: 5},
{text: 'med high', value: 10},
{text: 'medium', value: 15},
{text: 'med low', value: 20},
{text: 'low', value: 66}
],
listeners: {
change: function(field, value) {
if (value instanceof Ext.data.Model) {
value = value.get(field.getValueField());
}
console.log(value);
// set accuracy as config variable
EvaluateIt.config.accuracy = value;
}
}
},
{
iconCls: 'home',
handler: function() {
google_map.getMap().panTo(position);
}
}
]
});
This renders just fine in my form panel.
My onSuccess method then passes an argument to add a google_map to the geo_panel form panel.
I have tried geo_panel.add(toolbar, google_map), which works, but I then get an issue of when I hit the "Back" button in the toolbar above:
{
xtype: 'button',
ui: 'back',
text: 'Back',
// destroy form.Panel overlay and return to tree store view
handler: function() {
geo_panel.destroy();
}
},
I have to click it twice: the first time destroys the google_map and then the second destroys the toolbar. This is a very undesirable behavior. I've tried destroying each of the items in the geo_panel, but that does other weird things. This is acting like there are multiple instances of geo_panel. Any ideas?
I figured it out: I was creating two instances of my geo_panel. I refactored the code and everything now works as desired.
Related
In my SenchaTouch 2.3.1 app I have build a login panel for the user. It looks like this:
Ext.define('MyApp.view.LoginPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.loginPanel',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.Button'
],
config: {
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: 'Business Login',
itemId: 'login',
items: [
{
xtype: 'emailfield',
itemId: 'email',
label: 'E-Mail',
name: 'email',
required: true
},
{
xtype: 'passwordfield',
itemId: 'password',
label: 'Passwort',
name: 'password',
required: true
}
]
},
{
xtype: 'button',
itemId: 'loginButton',
cls: 'button-blue',
text: 'Login'
},
{
xtype: 'panel',
itemId: 'loggedInPanel',
cls: 'logged-in-panel',
tpl: [
'Sie sind eingeloggt als {firstname} {lastname} (ID: {agentId})'
],
hidden: true,
margin: '10 0'
}
]
}
});
In my controller, I want to use a reference to this panel like this:
config: {
refs: {
loginPanel: 'loginPanel',
navigationView: '#morenavigation',
loggedInPanel: '#loggedInPanel',
loginButton: '#loginButton'
}
}
In the launch function of the controller, I want to check if the user already logged in to show his id and show a logout button. But when I try to get the panel ref, it's undefined. But why?
launch: function() {
var me = this,
sessionInfo = Ext.getStore('SessionInfo');
console.log(me.getLoginPanel()); <-- undefined
if (null !== sessionInfo.getAt(0).get('sessionId')) {
me.successfullLogin(sessionInfo.getAt(0).get('sessionId'));
}
}
Is anything actually creating an instance of your view?
Inside your application's launch method, you'll probably have to create an instance of it, and then either give your view the fullscreen: true config, or add it to the viewport. The examples on the Sencha Touch API docs for Ext.app.Application have the main view being created from the application's launch function.
The correct way of using the ref in my example would be:
refs: {
loginPanel: {
autoCreate: true,
forceCreate: true,
xtype: 'loginPanel'
}
}
I have a Panel where I render a search-form. This works.
My problem is rendering a List under that search-form (so in the same Panel).
This is what I've done so far:
Ext.define("TCM.view.UserSearch",
{
extend: "Ext.form.Panel",
requires:
[
"Ext.form.FieldSet",
"Ext.List"
],
xtype: "usersearch",
config:
{
scrollable:'vertical'
},
initialize: function ()
{
this.callParent(arguments);
var clubsStore = Ext.create('TCM.store.Clubs');
clubsStore.load();
var usersStore = Ext.create('TCM.store.Users');
var searchButton =
{
xtype: 'button',
ui: 'action',
text: 'Search',
handler: this.onSearchButtonTap,
scope: this
};
var topToolbar =
{
xtype: 'toolbar',
docked: 'top',
title: 'Search',
items: [
{ xtype: 'spacer' },
searchButton
]
};
var userClub =
{
xtype: 'selectfield',
store: clubsStore,
name: 'clubId',
label: 'Club',
displayField : 'name',
valueField : 'id',
required: true
};
var userList =
{
xtype: 'list',
store: usersStore,
itemTpl: '{name}',
title: 'Search results'
};
this.add([
topToolbar,
{
xtype: "fieldset",
items: [userClub]
},
userList
]);
},
onSearchButtonTap: function ()
{
console.log("searchUserCommand");
this.fireEvent("searchUserCommand", this);
}
});
I can't see anything being rendered under the fieldset (the searchform). What could be wrong?
Most of time, when you don't see a component it's because you did not set a layout to your container or a height.
You can find more about layout here.
In your case, you want to have two components in your container. Therefore, I suggest a Vbox layout.
Here's an example
Hope this helps.
I actually used something like this in a project try this...Put this in the items property of your fieldset...
{
xtype: 'searchfield',
clearIcon: true,
placeHolder: 'Type Some text'
},
{
xtype: 'list',
hidden:true, //Initially hidden populate as user types something
height: '150px',
pressedDelay: 1,
loadingText: '',
store: 'listStore',
itemTpl: '{\'What you want to be displayed as per your model field\'}'
}
In your controller write a handler for the keyup event of the searchfield to load the store with relevant data and toggle the hidden property of the list. Hopefully list should appear with the search results(Worked for me and looked quite good). Hope this helps...
I'm creating a sencha touch app and the design requires a segmented button in the tab bar.
Is there an easy way to do this with sencha built-in features or do I have to create that by myself (add a toolbar with the segmented button as an item and create all the controls to actually get the same thing)?
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton',
],
xtype: 'album',
id: 'album',
fullscreen: true,
config: {
tabBar: {
layout: {
pack: 'center',
},
items: {
xtype: 'segmentedbutton',
allowDepress: false,
listeners: {
initialize: function() {
Ext.SegmentedButton.implement({
setActive: function(activeItem) {
this.setActiveItem(activeItem);
}
});
}
}
}
},
autoDestroy: true,
activeItem: 1,
items: [
{
title: 'HIGHLIGHTS',
xtype: 'highlightview',
id: 'highlightView'
},
{
title: 'KATEGORIEN',
xtype: 'categoryView',
id: 'categoryView',
},
{
title: 'SUCHE',
xtype: 'searchView',
id: 'searchView',
}
],
}
That's what I tried so far. the listener is there to get around the error of [Object] Object has no method 'setActive', but doesn't result in the behaviour I'd like it to have.
//take a tap panel and inside the tap panel create panel as a xtype
//give item id to each button in segmented button to create listener and later on assign a //function to it
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton'
],
xtype: 'album',
id: 'album',
enter code here`enter code here`
fullscreen: true,
config: {
cls:[
'styles'
],
scrollable: 'vertical',
items: [
{
xtype: 'panel',
title: 'Close Case',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
height: 50,
items: [
{
text: 'Option 1',
pressed: true,
handler: function() {
console.log("Picked #1");
alert("foo");
itemId: "newButton11"
}
},
{
text: 'Option 2',
handler: function() {
alert("foo");
}
},
{
text: 'Option 3',
handler: function() {
alert("foo");
}
}
]
}
]
}
],
listeners: [
{
delegate: "#newButton",
event: "tap",
fn: "onNewButtonTap"
}
]
},
onNewButtonTap: function () {
//write your function here and it will work
}
//This is working for me just let me know if it works for you.
I want to dynamically add a (right aligned) button to the active navigation view depending on view Im showing. Is there any proper way to do it? I found many half good examples online, but didnt get them to work. Here is what I tried:
Ext.define('Sencha.view.user.Login', {
extend:'Ext.navigation.View',
//fullscreen: true,
xtype: 'loginview',
requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'Ext.field.Password'
],
config: {
title: 'Log in',
iconCls: 'use',
cls: 'kidsbackground',
scrollable: false,
navigationBar: {
items: [
]
},
items:[
{
xtype: 'loginform'
}
]
},
addRightButton:function(button){
var navigationBar = this.config.navigationBar;
console.log("navigationBar: "+navigationBar);
var rightButton = Ext.Button.create({
xtype: 'button',
ui: 'action',
iconCls: 'action',
iconMask: true,
align: 'right' });
console.log("rightButton: "+rightButton);
//navigationBar.addItem(rightButton);
var oNavigationbar = {
docked: 'top',
backButton : {
margin: 7,
docked: "left",
ui : 'back'
},
items: [
Ext.create("Ext.Button", {
text: "Button1"
}),
Ext.create("Ext.Button", {
text: "Button2",
align: "right"
})
]
};
this.setNavigationBar(oNavigationbar);
/*this.setNavigationBar({
items: [
{
id: 'rightButton',
xtype: 'button',
text: 'yes!'
//placeHolder: 'Search...',
//align: 'right'
}
]
});*/
console.log("wow, no crash, really ?");
}
});
When I run the above code I get strange errors, one of this is this (see attachment):
You can try this code (in Chrome Developer Tools' console) on the Sencha Touch 2 Navigation View example :
Ext.ComponentQuery.query('navigationview')[0].getNavigationBar().add({
xtype:'button',
text:'Right',
align:'right'
});
It basically get the navigationview, then the navigation bar of this view and finally add the button to it.
This is the proper way to add a button to the navigation bar.
Hope this helps
different way
var navigationView = Ext.create('Ext.NavigationView',
{
useTitleForBackButtonText: false,
scrollable: false,
layout:
{
type: 'card',
animation: null
},
navigationBar:
{
items:
[
{
xtype: 'togglefield',
name: 'smsmode',
align: 'right',
value: 0,
disabled: true
},
{
text: '',
iconCls: 'delete',
align: 'right',
ui: 'back',
listeners:
{
tap: function()
{
navigator.app.exitApp();
}
}
}
]
}
});
The controller function
startpage:function(a){
var model1 = this.store.getAt(a.index);
App.views.start.load(model1);
App.views.viewport.reveal('start');
},
how to get the loaded model1 values in the start page
how can i able to pass parameter from controller to a page
App.views.start = Ext.extend(Ext.form.FormPanel, {
initComponent: function(){}
}
As your extending the FormPanel, I believe Sencha will pre-populate your fields.
Your code will looking something similar to this:
App.views.start = Ext.extend(Ext.form.FormPanel, {
initComponent: function(){
var fields = {
xtype: 'fieldset',
id: 'a-form',
title: 'A Form',
instructions: 'Some instructions',
defaults: {
xtype: 'textfield',
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
name : 'title',
label: 'title',
xtype: 'textfield'
},
{
name: 'email',
label: 'email',
xtype: 'emailfield'
}
]
};
Ext.apply(this, {
scroll: 'vertical',
items: [ fields ]
});
App.views.start.superclass.initComponent.call(this);
}
}
Ext.reg('App.views.start', App.views.start);
Note that you will have to substitute in your actual fields and you'll probably need to customise the form somewhat.