Develop Reference

How to get these two controllers to function together for ionic app?

Todo List: http://codepen.io/BltzLcht/pen/PzdLvz
Custom Timer: http://codepen.io/BltzLcht/pen/qNJmrX?editors=1000
I'm combining a timer with a Todolist. Both function individually but they don't work together. If I try to put a new ng-controller for the tasks, the timer will disappear.
Where and how can I change the controllers so they can do their own things? One thing that I'm wary about is the
<button class="button button-icon" ng-click="newTask()">
<i class="ion-compose icon"></i>
</button>
I put it in the header bar for creating new tasks, but it seemed like the new ng-controller wouldn't span far enough to reach the ion-list, and that was important for the task apps
.controller('mainCtrl', function($scope, $ionicPopup, $ionicListDelegate) {
$scope.tasks =
[
{title: "1.Make a second box in Create Task for a time variable ", completed: false},
{title: "2.Make time variable display on right side", completed: false},
{title: "3. Make a time variable button that leads to this timer", completed: false},
{title: "4. Time variable transfers to next page http://codepen.io/comapedrosa/pen/ONYgzJ", completed: false}
];
$scope.newTask = function() {
$ionicPopup.prompt({
title: "New Task",
template: "Enter task:",
inputPlaceholder: "What do you need to do?",
template1: "Enter time:",
inputPlaceholder1: "How much time do you you require?",
okText: 'Create task'
}).then(function(res) { // promise
if (res) $scope.tasks.push({title: res, completed: false});
})
};
$scope.edit = function(task) {
$scope.data = { response: task.title };
$ionicPopup.prompt({
title: "Edit Task",
scope: $scope
}).then(function(res) { // promise
if (res !== undefined) task.title = $scope.data.response;
$ionicListDelegate.closeOptionButtons()
})
};
})

The best way to communicate between the controllers is "Services" ... ....

rendering iscroll on android / phonegap project

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...

sencha templating in mvc pattern

The code below is for main view i.e main.js , where i have called intro.js i.e another view. Now i am unable to render the data on the template . I am new to sencha , i think i messed up something on declaration
Ext.define("casta.view.Main", {
extend: 'Ext.tab.Panel',
apitoken:'NULL',
requires: [
'Ext.TitleBar',
'Ext.Video',
'casta.view.Intro'
],
config: {
tabBarPosition: 'top',
items: [
{ title:'Intro',
xclass: 'casta.view.Intro' ,
iconCls:'user'
}
]
}
});
intro.js is as below. I think while declaring the variable I messed up some thing . It is showing blank screen
Ext.define('casta.view.Intro', {
extend: 'Ext.tab.Panel',
//alias: 'widget.currentDate', //this makes it xtype 'currentDate'
//store: 'CurrentDateStore',
initComponent: function(){
planetEarth = { name: "Earth", mass: 1.00 };
tpl = new Ext.Template(['<tpl for".">', '<p> {name} </p>', '</tpl>'].join(''));
tpl.compile();
//this.callParent(arguments);
},
html:tpl.apply(planetEarth)
});
below is the console log
tpl is not defined
[Break On This Error]
html:tpl.apply(planetEarth)

initComponent is going to be called at some time after the html var is set. instead define your tpl like so:
Ext.define('casta.view.Intro', {
extend: 'Ext.tab.Panel',
tpl: '<p> {name} </p>',
initComponent: function(){
//Be sure to use the var keyword for planet earth, otherwise its declared as a global variable
var planetEarth = { name: "Earth", mass: 1.00 };
this.setHtml(this.getTpl().apply(planetEarth));
}
});
This will work, following your pattern, but you probably want to define that component more like so:
Ext.define('casta.view.Intro', {
extend: 'Ext.Container',
tpl: '<p> {name} </p>'
});
Then instantiate it like:
Ext.define("casta.view.Main", {
extend : 'Ext.tab.Panel',
apitoken : 'NULL',
requires : ['Ext.TitleBar', 'Ext.Video', 'casta.view.Intro'],
config : {
tabBarPosition : 'top',
items : [{
xclass : 'casta.view.Intro',
title : 'Intro',
iconCls : 'user',
data: {name: "Earth", mass: 1.00 }
}]
}
});

Can anyone here explain Ext.ComponentQuery.query('what here comes?')[0] briefly?

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.

Is the below code applicable in sencha touch 2.0

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).