Hello friends I am creating an app in sencha touch 2.0 in which i have added a search button to the toolbar.Now i want open a search field with transparent background like the below image.
While i run my project the logcat indicates me that error is in controller file.Below i am adding my controller class.
Ext.define('MyApp.controller.search',{
extend: 'Ext.app.Controller',
config: {
refs: {
groupList: "groupList"
},
control: {
groupList: {
searchField: "searchField"
}
}
},
searchField: function(){
// console.log("SearchField Tapped");
if ( ! this.searchView)
{
this.searchView = this.render({
xtype: 'searchView',
});
var cancelSearchBtn = this.searchView.query('#'+cancelSearchBtn)[0];
cancelSearchBtn.setHandler(function(){
this.searchView.hide();
}, this);
}
this.searchView.show({
type: 'slide',
direction: 'up',
duration: 500,
});
},
launch: function(){
alert('Hello search');
},
});
I am getting the following error in logcat:-
TypeError: Result of expression 'this.render' [undefined] is not a function. at
file:///android_asset/www/app/controller/SearchController.js:18
Help me to get rid of the problem.
Thanx in advance.
There is no render method inside the controller. You need to create an instance of that component and then add it to the container you want it visible in (normally called Main).
Related
This is asked previously but not in cordova.
Hi all, I want to get alert when user enters the geofence region and also want alert when user exit from the geofence so that I can make entry.
it should work on all cases foreground, background, and even when the app is killed
I'm getting alert when user enters but not when user exits from region.
Any help would be really appreciated .
CODE:
window.geofence.addOrUpdate({
id: "69ca1b88-6fbe-4e80-a4d4-ff4d3748acdb",
latitude: xx.12345,
longitude: xx.12345,
radius: 100,
transitionType:1,
notification: {
id: 1,
title: "Welcome!",
text: "In.",
openAppOnClick: true
}
}, {
id: "69ca1b88-6fbe-4e80-a4d4-ff4d3748acdc",
latitude: xx.12345,
longitude: xx.12345,
radius: 100,
transitionType:2,
notification: {
id: 1,
title: "Bye!",
text: "Out.",
openAppOnClick: true
}
}).then(function () {
navigator.notification.alert('successfully added', function () { });
}, function (reason) {
navigator.notification.alert('failed', function () { });
})
Transition callback function:
which is getting called only only when i am in within region, it is not called when i'm out of the region
window.geofence.onTransitionReceived = function (geofences) {
alert(JSON.stringify(geofences));
}
Where using this plugin : https://github.com/cowbell/cordova-plugin-geofence and depending on you'r needs, be carefull about the following :
Javascript background execution
This is known limitation. When in background your app may/will be suspended to not use system resources. Therefore, any javascript code won't run, only background services can run in the background. Local notification when user crosses a geofence region will still work, but any custom javascript code won't. If you want to perform a custom action on geofence crossing, try to write it in native code.
We can see this exemple into the plugin documention :
window.geofence.onTransitionReceived = function (geofences) {
geofences.forEach(function (geo) {
console.log('Geofence transition detected', geo);
});
};
And if we search into the plugin code we found this (www/TransitionType.js) :
var TransitionType = {
ENTER: 1,
EXIT: 2,
BOTH: 3,
};
So you have to check if this work :
window.geofence.onTransitionReceived = function (geofences) {
geofences.forEach(function (geo) {
if (geo.TransitionType === 2 ) {
// Do what you want
}
});
};
EDIT 1
After adding your code to your primary code, I noticed two things :
First, the documentation specifies that when you want to add several geofences at once you must do so from an array and therefore with several parameters.
It may be nothing but it's better to trust the documentation.
Then, the documentation also specifies
Geofence overrides the previously one with the same id.
And that exactly what you do That may be why the event can't work properly.
If I follow the documentation correctly, you should have something that looks like this :
window.geofence.addOrUpdate({
id: "69ca1b88-6fbe-4e80-a4d4-ff4d3748acdb",
latitude: xx.12345,
longitude: xx.12345,
radius: 100,
transitionType: 3, // Both (Enter and Exit)
notification: {
id: 1,
title: "Welcome!",
text: "In.",
openAppOnClick: true
}
}
).then(function () {
navigator.notification.alert('successfully added', function () { });
}, function (error) {
navigator.notification.alert('failed', function () { });
});
window.geofence.onTransitionReceived = function (geofences) {
geofences.forEach(function (geo) {
console.log('Geofence transition detected', geo);
// Do what you want
});
};
i am creating option dialog which contains radio buttons on right .this i saw in kitchensink i tried to create my own in other project but it showing error like applybutton(); undefined on button click ,i know that applybutton(); is function we have to define it but in kitchensink it directly shows how is that.
if i have to define function how could i go further,should i use images? please help me i am new to titanium appcelerator
Ti.UI.setBackgroundColor('white');
var win = Ti.UI.createWindow({
title: 'Click window to test',
backgroundColor: 'white',
exitOnClose: true,
fullscreen: false
});
var opts = {
cancel: 2,
options: ['Confirm', 'Help', 'Cancel'],
selectedIndex: 2,
destructive: 0,
title: 'Delete File?'
};
var dialog = Titanium.UI.createOptionDialog(opts);
dialog.addEventListener('click',function(e)
{
label.text = 'You selected ' + e.index;
if (e.button) {
label.text += ' button';
} else {
label.text += ' option';
}});
var button1 = Titanium.UI.createButton({
title:'Show Dialog 1',
height:40,
width:200,
top:10
});
button1.addEventListener('click', function()
{
dialog.androidView = null;
applyButtons();
dialog.show();
});
win.add(button1);
win.open();
the function applyButtons() was originally defined in the KitchenSink example code, be it at the top of the file or imported in via a commonjs module with a require statement.
If you want to call and use this method, place it at the top as a function expression eg.
var applyButtons = function() {
// Do something
};
You are getting a undefined error on the click eventLister as it can't find reference to this function.
Either remove / delete the call to the function or add it at the top of the code with whatever you want applyButtons to do.
I have a Sencha Touch 2 project and everything works great in the web browser. No errors in the console, and everything looks good. Once I package it with Phonegap and run it on a mobile device, however, things don't work as well.
I am using ext.device.notification.show in two places in my application. At first, I was doing requires: 'Ext.device.*' and while it worked in web, the app wouldn't run on mobile and eclipse would give me the error message Uncaught TypeError: Cannot read property 'name' of undefined. I switched over to requires: Ext.device.Notification (exact spelling and capitalization) and now the app runs but when I click a button that should create a message box, I get the error Uncaught TypeError: Cannot call method 'confirm' of undefined. The problem is I have no method called confirm. In one case I have a method called confirmItem, but for the second button that should be invoking a message box I have no method remotely close to "confirm."
I'll post one of the controllers below (this one has the confirmItem method):
Ext.define('MyApp.controller.MainController',
{
extend: 'Ext.app.Controller',
requires: ['Ext.device.Notification'],
config:
{
refs:
{
mainView: 'mainview',
btnConfirm: 'mainview button[action=confirmItem]',
},
control:
{
'btnConfirm':
{
tap: 'confirmItem'
},
mainView:
{
onSignOffCommand: 'onSignOffCommand'
}
}
},
// Transitions
getSlideLeftTransition: function ()
{
return {
type: 'slide',
direction: 'left'
};
},
getSlideRightTransition: function ()
{
return {
type: 'slide',
direction: 'right'
};
},
onSignOffCommand: function ()
{
var me = this;
console.log('Signed out.');
loginView = this.getLoginView();
//MainView.setMasked(false);
Ext.Viewport.animateActiveItem(loginView, this.getSlideRightTransition());
},
confirmItem: function ()
{
Ext.device.Notification.show(
{
title: 'Confirm',
message: 'Would you like to Confirm?',
buttons: ['No', 'Yes'],
callback: function (button)
{
if (button == "Yes")
{
MyApp.app.getController('MainController')
.confirmPickup();
}
else
{
console.log('Nope.');
}
}
});
},
confirmPickup: function ()
{
var me = this;
var loginStore = Ext.getStore('LoginStore');
mainView = this.getMainView();
mainView.setMasked(
{
xtype: 'loadmask',
message: ' '
});
if (null != loginStore.getAt(0))
{
var user_id = loginStore.getAt(0).get('id');
var name = loginStore.getAt(0).get('name');
var winner = loginStore.getAt(0).get('winner');
}
if (winner === 1)
{
console.log('success');
}
else
{
console.log('fail');
}
}
});
I only assume this is a problem because whenever I push the button that should be calling confirmItem I get the error. Am I using Ext.device.Notification correctly, or Have I missed something needed to make it work in Phonegap?
I found the solution! Everything was fine from a Sencha Touch point of view in terms of using requires: Ext.device.Notification but some things were missing on the Phonegap side. Specifically, I needed to install the appropriate plugins.
Open a terminal and type: Phonegap local plugin list to see your currently installed plugins. I had none. I went ahead and installed:
org.apache.cordova.device
org.apache.cordova.dialogs
org.apache.cordova.vibration
by using the following reference: http://docs.phonegap.com/en/3.0.0/cordova_device_device.md.html and selecting options from the menu on the left.
Does anyone know of any android app which uses iscroll. I would like to test it on my device. Reason being that my current phonegap/android project does not work with iscroll4....
I will post details of the same later....but just want to see if iscroll atall works on android...I have my doubts...
Tried all the approaches of calling iscroll but simply does not work..
here is the code for requirejs:
define(['jquery','domready',
function($,domReady){
var menu_iscroll;
function loaded() {
alert("inside loaded for iscroll:dom under hmenu is");
alert($('#hmenu').html());
if ($('#hmenu').length){
alert('setting iscroll');
menu_iscroll = new iScroll('hmenu');}
};
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
domReady(function() {
alert("entered domready for creating iscroll");
loaded();
});
return menu_iscroll;
});
and here is code for main.js:
require.config({
paths:{
jquery:'vendor/jquery/jquery.min',
'jquery.mobile':'vendor/jquery.mobile-1.3.1.min',
'jquery.mobile-config':'jqm-config',
underscore:'vendor/underscore/underscore-min',
backbone:'vendor/backbone/backbone-min',
handlebars:'vendor/handlebars/handlebars',
text:'vendor/text/text',
bootstrap:'vendor/bootstrap/js/bootstrap.min',
iscroll:'vendor/iscroll/dist/iscroll-min',
domready:'vendor/domReady'
},
shim: {
'backbone': {
//These script dependencies should be loaded before loading backbone.js
deps: ['jquery','underscore'],
//Once loaded, use the global 'Backbone' as the module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'handlebars' : {
exports : "Handlebars"
},
'iscroll' : {
exports : "iScroll"
},
'jquery.mobile-config': {
deps: ['jquery']
},
'jquery-mobile': {
deps:['jquery','jquery.mobile-config'],
},
},
waitSeconds:10,
});
require(['jquery','views/menuscroll','index'],function($,scrollView){
new scrollView;
});
and inside scrollview:
define(['jquery','domready','iscroll','test'],
function($,domReady,iScroll,testView){
new testView; //this is where all the rendering of the DOM occurs...
var menu_iscroll;
function loaded() {
alert("inside loaded for iscroll:dom under hmenu is");
alert($('#hmenu').html());
if ($('#hmenu').length){
alert('setting iscroll');
menu_iscroll = new iScroll('hmenu');}
};
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
domReady(function() {
alert("entered domready for creating iscroll");
loaded();
});
return menu_iscroll;
});
I am now pretty confident after debugging that with phonegap/iscroll/requirejs on android platform that the much marketed iscroll module fails to render on android....it simply does not work...
Hello friends I am stuck at a point in sencha touch 2.0.I am creating a screen in my app in which i need to get the checkbox values(checked or unchecked). i am referring this example from sencha documentation,but i am unable to understand how to use Ext.ComponentQuery.query('what here comes?')[0].
EDIT
here's my code:-
Ext.define('MyApp.view.groupList',{
extend : 'Ext.navigation.View',
requires: ['Ext.field.Search', 'Ext.TitleBar'],
alias: "widget.groupList",
itemId: "gList",
initialize: function(){
this.callParent(arguments),
var checkBox = {
xtype: 'checkboxfield',
name : 'all',
// label: 'All',
value: 'all',
lableWidth: "0",
width: 1,
padding: '0 0 15 30',
checked: false
};
var sendBtn = {
itemId: 'sendBtn',
xtype: 'button',
text: 'Send',
ui: 'action',
handler: function() {
var check = Ext.ComponentQuery.query('navigationview')[0],
values = check.getValues();
Ext.Msg.alert(null,
"Selected All: " + ((values.all) ? "yes" : "no")
);
}
};
var topToolbar = {
xtype : "toolbar",
title : "Groups",
docked : "top",
items: [
checkBox,
{xtype: 'spacer'},
// searchBtn,
sendBtn
],
};
var list = {
xtype: "grlist",
store: Ext.getStore("grStore")
};
this.add([list,topToolbar]);
},
config: {
navigationBar: {
hidden: true,
},
}
});
I am getting the following error:-
TypeError: Result of expression 'check.getValues' [undefined] is not a function. at
file:///android_asset/www/app/view/group_list.js
So please make me understand how Ext.ComponentQuery works with some sample code or tutorial.
Thanx in advance.
Ext.ComponentQuery accepts 3 types of parameters:
xtype, eg: Ext.ComponentQuery.query('navigationview')
id, eg: Ext.ComponentQuery.query('my-nav-view-id')
attributes, eg: Ext.ComponentQuery.query('navigationview[name="my nav view"]')
No matter which type the param is of, Ext.ComponentQuery.query() always returns an array of matched components. In the example, they add [0] because it's assured that the result array contains only 1 item.
In your code, it seems that you tried to query a component of xtype navigationview, this kind of component does NOT have getValues methods (which is only available to Ext.form.Panel and derived classes). So if you want to retrieve the values, you have to use queries like this:
Ext.ComponentQuery.query('checkboxfield')[0]
Hope it helps.
Ext.ComponentQuery documentation is here...
It should not be used in this example.
This code would be more resilent and ridiculously faster as wouldn't use a global search method.
var sendBtn = {
itemId: 'sendBtn',
xtype: 'button',
text: 'Send',
ui: 'action',
scope: this,
handler: function() {
var check = this.down('#checkboxfield'),
values = check.getValue();
Ext.Msg.alert(null,
"Selected All: " + ((values.all) ? "yes" : "no")
);
}
};
Also I've corrected the code example, the method is getValue()
Note:
I know that this answer is so out of date it's not relevent, however the accepted method is encouraging the use of Ext.ComponentQuery where it's not needed which is simply awful code and has logical code presuming that ui will remain in the same set format.