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.
Related
This question already has answers here:
Query based on multiple where clauses in Firebase
(8 answers)
Closed 5 years ago.
Solution:
As Frank already states, I had to create a separate filed for this sorting to work. As suggested, I created a filed "sortField" which combines the
"clubKey" + "_" + "startDate"
To modify my existing data sets, I made a quick java script function like this:
function createTestDataSet(){
evd = dbAllEventsListRef;
evd.on('child_added', function(snap, previous){
console.log(snap.val());
data = snap.val();
data.sortField = data.clubKey + "_" + data.startDate;
testDiv = document.getElementById("divCarSummary");
testDiv.innerHTML = testDiv.innerHTML + "<br/>"+data.sortField;
evd.child(snap.key).set(data);
});
}
I tested this using the following code:
function testSort(){
key = "manualClubKey-1";
testEvents = dbTesting.child('eventList').orderByChild("sortField").startAt(key+"_").endAt(key+"a");
testEvents.on('child_added', function(snap, previous){
data = snap.val();
testDiv = document.getElementById("divCarSummary");
testDiv.innerHTML = testDiv.innerHTML + "<br/>"+data.startDate+", "+data.name+", "+snap.key+", "+data.clubKey;
console.log(snap.val());
});
}
The tricky part was, that the manual for "endAt" states:
The ending point is inclusive, so children with exactly the specified value will be included in the query
But this does not seem to be true.
If I give the same value for startAt() and endAt(), I get no results.
So I modified the query, that I look for the "clubKey" + the separator. For the Separator I gave a character right after the "_". thus it works like a charm.
I modified my android Code, so every time the startDate, or the clubKey is written, I update the "sortFiled", small change, works like a charm.
Original Question
I have some event data.
Sample data:
{
"modeltruckerManualEventID-96" : {
"canceled" : false,
"clubKey" : "manualClubKey-1",
"endTime" : "17:00:00",
"eventOpenForWeightData" : false,
"link" : "",
"locationID" : "manualLocationID-4",
"name" : "Fahrtag TuHaKi",
"startDate" : "2012-06-17",
"startTime" : "10:00:00"
},
"modeltruckerManualEventID-97" : {
"canceled" : false,
"clubKey" : "manualClubKey-2",
"endTime" : "17:00:00",
"eventOpenForWeightData" : false,
"link" : "",
"locationID" : "manualLocationID-4",
"name" : "Fahrtag TuHaKi",
"startDate" : "2012-06-17",
"startTime" : "10:00:00"
},
"modeltruckerManualEventID-98" : {
"canceled" : false,
"clubKey" : "manualClubKey-2",
"endTime" : "16:00:00",
"eventOpenForWeightData" : false,
"link" : "",
"locationID" : "manualLocationID-4",
"name" : "Fahrtag TuHaKi",
"startDate" : "2012-03-11",
"startTime" : "10:00:00"
},
"modeltruckerManualEventID-99" : {
"canceled" : false,
"clubKey" : "manualClubKey-1",
"endTime" : "16:00:00",
"eventOpenForWeightData" : false,
"link" : "",
"locationID" : "manualLocationID-4",
"name" : "Fahrtag TuHaKi",
"startDate" : "2011-11-27",
"startTime" : "10:00:00"
}
}
I now want to filter, so I only get events from one "clubKey"
which I could achieve using:
.orderByChild("clubKey").equalTo("manualClubKey-1")
That works fine.
But is there any way, that I can order the results also by child "startDate"?
So I want to have the filtered results ordered by startDate finally.
As far as I know this does not work.
I use Firebase on Android with Firebase UI.
Any Ideas how to achieve that?
I do not want to restructure the data or duplicate it further.
Hope there is a way, maybe force the ordering already on storage?
If you want to orderByChild(especificdate), is not possible without restructuring the data.
However, lets say you want to get the latest added nodes, just use limitToLast(numberOfChildren)
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 }
}]
}
});
I need to render a template in sencha in mvc pattern , so on InitComponent i have declared some variable but i am unable to acess those variable outside init function . I did following try
Ext.define('casta.view.Intro', {
extend: 'Ext.tab.Panel',
//alias: 'widget.currentDate', //this makes it xtype 'currentDate'
//store: 'CurrentDateStore',
initComponent: function(){
this.planetEarth = { name: "Earth", mass: 1.00 };
this.tpl = new Ext.Template(['<tpl for".">', '<p> {name} </p>', '</tpl>'].join(''));
this.tpl.compile();
this.callParent(arguments);
},
html:this.tpl.apply(this.planetEarth)
});
ERROR
this.tpl is undefined
[Break On This Error]
html:this.tpl.apply(planetEarth)
I'm pretty sure that is not how JavaScript scoping works...
In your example there are 2 ways to do what you would want to do:
//this is the bad way imo, since its not really properly scoped.
// you are declaring the planeEarth and tpl globally
// ( or wherever the scope of your define is. )
var plantetEarth = { name: "Earth", mass: 1.00 }
var tpl = new Ext.Template(['<tpl for".">', '<p> {name} </p>', '</tpl>'].join(''));
tpl.compile();
Ext.define('casta.view.Intro', {
extend: 'Ext.tab.Panel',
//alias: 'widget.currentDate', //this makes it xtype 'currentDate'
//store: 'CurrentDateStore',
initComponent: function(){
this.callParent(arguments);
},
html:tpl.apply(planetEarth)
});
or
//I would do some variation of this personally.
//It's nice and neat, everything is scoped properly, etc etc
Ext.define('casta.view.Intro', {
extend: 'Ext.tab.Panel',
//alias: 'widget.currentDate', //this makes it xtype 'currentDate'
//store: 'CurrentDateStore',
initComponent: function(){
this.tpl = new Ext.Template(['<tpl for".">', '<p> {name} </p>', '</tpl>'].join(''));
this.tpl.compile();
this.tpl.apply(this.planetEarth);
this.html = this.tpl.apply(this.planetEarth)
this.callParent(arguments);
},
});
I am stuck at a situation in which i have to 'check' all the checkboxes present in the list by 'checking' a checkbox situated in toolbar.
Here's code to create checkbox list:-
itemTpl: '<input type="checkbox" name="box" enabled="enabled" value="open"
name="comment_status" id="status" <tpl if="active">checked="checked"</tpl> />
{groupName}{#}',
Here's my checkbox code:-
var checkBox = {
xtype: 'checkboxfield',
name : 'all',
// label: 'All',
itemId: 'all',
value: 'all',
lableWidth: "0",
width: 1,
padding: '0 0 15 30',
checked: false,
listeners: {
check:function() {
// alert("check");
item = Ext.get("status");
console.log("item:-"+Ext.JSON.encode(item));
chkBox = item.down('input').dom;
var checkboxes = Ext.getStore('group');
console.log(checkboxes.getCount());
for(var i=0;i<checkboxes.getCount();i++){
chkBox.checked = true;
}
},
uncheck:function(){
// alert("uncheck");
}
}
};
On the above checkbox check , I want that all the checkboxes defined in "itemTpl" will be checked and vice versa .I know my code inside the check : function(){} is no that good that solve my problem(Both the codes in different views).
So, please advise me some solution of this problem.
Thanx in advance.
Ok, I updated your senchafiddle to make it work.
In substance, here is what I added to your code :
Add 2 functions to your list Controller, to manage actions on the checkbox in the toolbar :
checkAll:function(){
this.getCheckboxList().getStore().each(function(record){record.set('active', true);});
},
uncheckAll:function(){
this.getCheckboxList().getStore().each(function(record){record.set('active', false);});
}
And add the toolbar with the checkbox to rule them all (XD) above your list :
{
xtype : 'toolbar',
docked: 'top',
title: 'Check !',
items:[{
xtype: 'checkboxfield',
name : 'all',
value: 'checkAll',
listeners:{
check:function(){
MyApp.app.getController('MainViewController').checkAll();
},
uncheck:function(){
MyApp.app.getController('MainViewController').uncheckAll();
}
}
}]
}
This will need some css on your part to make the ckeckbox nice, but the behaviour is here.
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).