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 }
}]
}
});
Related
I am learning secha touch, I want to create a page where after user enter login credentials the JSON response will be received which is as follows
{"items":[{"id":"78e221c8-bbc1-4754-8471-48c863886869","createTime":"2014-05-22T14:57:39.039Z","createUser":"Jon","status":"SAVED","changeTime":"2014-05-22T14:57:39.039Z","changeUser":"Jon","projectId":"63886869-bbc1-4754-8471-48c878e221c8","reportVersionNumber":"1","reportVersionName":"First Version","reportName":"FooBarBaz","reportHash":"qiyh4XPJGsOZ2MEAyLkfWqeQ"}],"totalItems":1
}
currently i have created a page where i have used a listItem and displaying the items in it from the Simple array where data has been given harcoded
and using itemTPL to get it
like this <div class="arHeadline">{projectId}
my current store is
data: [
{
Headline: 'Panel',
Author: 'Sencha',
Content: 'Panels are most useful as Overlays - containers that float over your appl..'
}
but i want to get the data from the json so i created a JSON store
Ext.define('MobileChecklist.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MobileChecklist.model.MyModel',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json',
'Ext.data.Field'
],
config: {
autoLoad: true,
data: [
{
items: [
{
id: '78e221c8-bbc1-4754-8471-48c863886869',
createTime: '2014-05-22T14:57:39.039Z',
createUser: 'Jon',
status: 'SAVED',
changeTime: '2014-05-22T14:57:39.039Z',
changeUser: 'Jon',
projectId: '63886869-bbc1-4754-8471-48c878e221c8',
reportVersionNumber: '1',
reportVersionName: 'First Version',
reportName: 'FooBarBaz',
reportHash: 'qiyh4XPJGsOZ2MEAyLkfWqeQ'
}
],
totalItems: 1
}
],
model: 'MobileChecklist.model.MyModel',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'data/getPort.json',
reader: {
type: 'json',
idProperty: 'id',
rootProperty: 'items',
totalProperty: 'totalItems',
record: 'items'
}
},
fields: [
{
name: 'reportName'
},
{
name: 'projectId'
}
]
}
});
and my model is
Ext.define('MobileChecklist.model.MyModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
mapping: 'items.reportName',
name: 'reportName',
type: 'string'
},
{
mapping: 'items.projectId',
name: 'projectId',
type: 'string'
}
]
}
});
I want to decode the json response and display it in the ListItem the way i did with the string array
how can I do it please help
EDIT:
if I remove the items from my json response and make it like an array rather than object it works and displays it in the list view
[{"id":"78e221c8-bbc1-4754-8471-48c863886869","createTime":"2014-05-22T14:57:39.039Z","createUser":"Jon","status":"SAVED","changeTime":"2014-05-22T14:57:39.039Z","changeUser":"Jon","projectId":"63886869-bbc1-4754-8471-48c878e221c8","reportVersionNumber":"1","reportVersionName":"First Version","reportName":"FooBarBaz","reportHash":"qiyh4XPJGsOZ2MEAyLkfWqeQ"}],"totalItems":1}]
Set the store data with data.items in your controller, like this: -
Ext.Ajax.request({
url: someurl,
params: {
format: "json"
},
success: function(response) {
Ext.getStore("MyJsonPStore").setData(response.items);
},
failure: function(err) {
console.log("Error", err);
}
});
This is the way to work with json data.
Found your problem, change your store proxy to this:-
proxy: {
type: 'rest', //change it
url: 'data/getPort.json',
reader: {
type: 'json',
idProperty: 'id',
rootProperty: 'items',
totalProperty: 'totalItems'
}
}
No need to map the datas.
I've never worked with the secha touch framework before but JSON Parsing is quite simple. If you already have the JSON coming to your device, try this:
http://developer.android.com/reference/android/util/JsonReader.html
Then create an adapter to your ListView
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);
},
});
My View (MyFormPanel)
var controllers = Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
var formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
scrollable: 'vertical',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Login Form'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'fieldset',
title:'Enter user name & password',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '50%'
},
items: [
{
xtype: 'textfield',
name : 'username',
label: 'User Name',
allowBlank:false,
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
allowBlank:false,
useClearIcon: false
},
{
xtype: 'checkboxfield',
required:false,
id: 'RememberMe',
name: 'RememberMe',
label: 'Remember Me',
labelWidth: '50%'
},
{
xtype: 'button',
ui: 'confirm-round',
text: 'Log In' ,
handler: function() {
//Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
Ext.ControllerManager.get('formcontroller').ControllerMethod({myaction: myaction});
}
}
]
}],
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
});
My controller (FormController)
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
I am using Sencha touch2 with Phonegap 1.4 on android 2.3. When i try to move view to controller on Login button click on handler function to invoke controller , i am getting error , Ext.dispatch is not defined as function .
Tell me the actual way how to move view to controller and vice versa.
Thanks
Ext.dispatch is not the recommended way to use in Sencha Touch 2. It might be removed...
Anyway, the best way to listen to & handle events on your views from controllers is:
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
loginButton: "#login-button" // set an id for your login button and this ref works
},
control: {
loginButton: {
tap: 'handleLogin',
}
handle_login: function(){whatever you want to do here}
}
And in Architect...
a. you go to the button's config, and
b. search for Event Handlers, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.
And in Architect...
a. you go to the button's config, and
b. search for Event Bindings, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.
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.
I want to build an android app which is written in Sencha with Phonegap.
Works fine but Ext.List is not displayed. Does anyone had the same problem and a solution?
I have a TabPanel with 5 Elements. One of them is Home which is a Ext.List. The data from the list comes from a store. This is working fine in the browser but if I try to build it for Android with PhoneGap this list does not appear. Just the HTML which is mentioned further down.
var mainMnu = new Ext.TabPanel(
{tabBar : {
dock : 'bottom',
layout : {
pack : 'center'
}
},
items : [
{
title : 'Home',
html : '<h1>Welcome Home</h1>',
iconCls : 'home',
cls : 'card1',
dockedItems: [pnlLstHome]
}, .....
lstHome = new Ext.List( {
grouped : false,
indexBar : false,
id : 'idLstHome',
cls: 'homeList',
store : lstStoreMnu,
itemTpl : '<div class="list">{item}</div>',
onItemDisclosure : false,
onItemSelect : function(record, btn, index) {
// console.log(record.data);
switch (record.data.item) {
case constStoreMnuGalerie:
pnlLstHome.setActiveItem('idPnlGalerie');
// detailPanel.update(record.data);// detailPanel.doLayout();
break;
case constStoreMnuTrends:
pnlLstHome.setActiveItem('idPnlTrends');
// detailPanel.update(record.data);
break;
default:
console.log('You clicked Unknown Item!');
return;
}
}
});
DataStore
lstStoreMnu = new Ext.data.Store({
model: 'list',
//sorters: 'item', //Sortierung
getGroupString : function(record) {
return record.get('item')[0];
},
data: [
{ item: constStoreMnuGalerie},
{ item: constStoreMnuTrends},
{ item: constStoreMnuPreise},
{ item: constStoreMnuProdukte},
{ item: constStoreMnuOpen},
{ item: constStoreMnuShare}
]
});
You have added the list as a dockedItem
Try adding it as an item ie
{
title : 'Home',
// html : '<h1>Welcome Home</h1>',
iconCls : 'home',
cls : 'card1',
items: [pnlLstHome]
}
Hope it will help...