Variables between List - sencha-touch-2

My problem is... I have a list who is completed by a store and this store comes from a proxy (json). When i clik in a item of the list i need a detail information, and this detail information comes from anothe json.
For example:
ArtistList and ArtistDetail
When i click in an item of artistList i need a call to
http://localhost/json-detail/45
if i click in another item...
http://localhost/json-detail/50 etc...
My problem is that i can't send the parameter to the other view... or maybe the error is in my concept of lists... :S
This is my list view:
var listaArtistas = {
xtype: 'list',
title: 'Artistas',
height: 240,
store: {
autoLoad: true,
fields: ['node'],
proxy: {
type: 'ajax',
url: 'http://localhost/json-artistas',
reader: {
type: 'json',
rootProperty: 'nodes'
}
}
},
listeners: {
itemtap: function(lista,index,target,record,e,eOpts)
{
var artistDetail = new Ext.create('app.view.ArtistDetail');
artistDetail.setArtistID('45');
panelHomeNav.push(artistDetail);
}
},
itemTpl: tpl
};
This is my detail:
Ext.define('app.view.ArtistDetail',{
extend: 'Ext.Panel',
xtype: 'artistdetail',
style: "background-image:url('/resources/images/fondoartista.png');",
config:{
title: 'Artistas',
iconCls: 'star',
ArtistID: '',
items:
{
title: 'Artistas',
items: [artistDetailPanelContenedor]
}
}});
And need something like this
var listaEspectaculo = {
xtype: 'list',
title: 'Artistas',
store:
{
autoLoad: true,
fields: ['node'],
proxy: {
type: 'ajax',
url: 'http://localhost/json-artistasdetail/'+getArtistID, <<<<<<<<<<------ PROBLEM
reader: {
type: 'json',
rootProperty: 'nodes'
}
}
},
listeners: {
itemtap: function(lista,index,target,record,e,eOpts)
{
var eventDetail = new Ext.create('app.view.EventDetail');
panelHomeNav.push(eventDetail);
}
},
itemTpl: tplEspectaculo
};
THx for help !!!

Maybe this could help:
How to pass value from controller to data store in sencha touch
handler: function () {
Ext.dispatch({
controller: MyApp.controllers.controller,
action: 'myActionOnController',
id: e.get{'id'}
});
}
You can call ext.dispatch from your "itemtap", then in the controller you can call a new view with you parameters, remember use something like this:
myActionOnController: function (options) {
var city = options.id; //if you want to use your parameters
var newView = Ext.create('MyApp.view.viewOfSomething');
this.getMain().push(newView);
},

Related

Sencha nested list with html button

I am quite new to Sencha. My requirement is to add a html button to the nested list each item that will post the selected item to web API.
{
xtype: 'nestedlist',
title: 'Jobs',
iconCls: 'star',
getItemTextTpl: function (node) {
return '<div style="float:left">{text}</div><div style="float:right">
'<input type="button" title="xyz" value="pqr" id="someID"/></div>';
},
store: {
type: 'tree',
fields: [
'text', 'id', 'name', 'title',
{ name: 'leaf', defaultValue: true }
],
root: {
leaf: false
},
proxy: {
type: 'rest',
url: 'http://localhost/AD/api/jobs/',
reader: {
type: 'json',
// rootProperty: 'root'
}
}
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function (nestedList, list, index, element, post) {
debugger;
this.getDetailCard().setHtml('<pre><h4>Log</h4>' + post.get('AuditLog') + '</pre>');
},
}
I want to attach event listener to the button 'SomeID' so that the item should be posted to the web api for further processing and then refresh the nested list after the processing is done.
Thanks in advance
Please try
listeners: {
itemtap: function (nestedList, list, index, element, post,e) {
if (e.getTarget(someID)){
// do something here in button tap
}
else{
this.getDetailCard().setHtml('<pre><h4>Log</h4>' + post.get('AuditLog') + '</pre>');
}
},

Cannot call method 'add' of undefined

I have been try trying to make a dynamic carousal in sencha touch 2.1.1 which fetches the images from wordpress json data..
but when i call the load listener in store it gives and error .
I tasted this on another demo sencha app it was working fine there but when i add it here it shows up the error
Uncaught TypeError: Cannot call method 'add' of undefined
I am sharing my view,model,and store files here
Ext.define('Flugelsoft.view.Portfolio', {
extend:'Ext.Container' ,
xtype: 'portfolio',
fullscreen: true,
//store:'Portfolios',
requires: ['Flugelsoft.store.Portfolios', 'Ext.dataview.List', 'Ext.Img','Ext.carousel.Carousel'],
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "carousel",
id: 'carouselid'
}
]
}
});
store.js file
var token=localStorage.getItem("access_token");
Ext.define("Flugelsoft.store.Portfolios", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP"],
config: {
model: "Flugelsoft.model.Portfolio",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://www.flugelsoft.net/?json=get_category_posts&category_id=2&access_token='+token,
reader: {
type: 'json',
rootProperty: 'posts'
}
},
}
});
var newPanel = Ext.create('Flugelsoft.store.Portfolios', {
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("data loaded", records);
myCarousel = Ext.getCmp('carouselid');
for(var i=0; i<records.length; i++){
//THE ERROR IS GENERATING IN THIS LINE myCarousal.add
myCarousel.add({
xtype: 'image',
src: records[i].get('thumbnail')
});
}
}
}
});
Model.js file
Ext.define('Flugelsoft.model.Portfolio',{
extend:'Ext.data.Model',
config:{
fields: [{name: 'title', type: 'string'},{name: 'content', type: 'string'},{name:'thumbnail',type:'image/png'}]
}
});
Thank you in advance
First of all you should add Portfolio view in viewport before you invoke Ext.getCmp('carouselid');
Model
Ext.define('GoodNews.model.Portfolio',{
extend:'Ext.data.Model',
config:{
fields: [{name: 'title', type: 'string'},
{name: 'content', type: 'string'},
{name:'thumbnail',type:'string'}]
//thumbnail should be url for accessing picture from the server
}
});
Store
Ext.define("GoodNews.store.Portfolios", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP"],
config: {
model: "GoodNews.model.Portfolio",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://www.flugelsoft.net/?json=get_category_posts&category_id=2&access_token='+token,
reader: {
type: 'json',
rootProperty: 'posts'
}
},
}
});
Add the portfolio
Ext.Viewport.add({xtype : 'portfolio'});
var newPanel = Ext.create('GoodNews.store.Portfolios', {
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("data loaded", records);
myCarousel = Ext.getCmp('carouselid');
for(var i=0; i<records.length; i++){
myCarousel.add({
xtype: 'image',
src: records[i].get('thumbnail')
});
}
}
}
});
There is no image/png field type in sencha touch. following types only valid
auto: Object
boolean: Object
date: Object
float: Object
integer: Object
number: Object
string: Object

Can not fetch store data from table layout in extjs 4

I am trying to fetch data from store.and i want to use it on my table layout in an extjs panel but always get an empty string though the data is printed in the console. Any pointers would be much appreciated.
<code>
Ext.onReady(function(){
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'nooflicenses'
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Account',
autoSync: true,
proxy: {
type: 'ajax',
api: {
read: "accounts"
},
reader: {
type: 'json',
root: 'Account',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'results',
idProperty: 'id'
},
listeners: {
exception: function(proxy, type, action, o, result, records) {
if (type = 'remote') {
Ext.Msg.alert("Could not ");
} else if (type = 'response') {
Ext.Msg.alert("Could not " + action, "Server's response could not be decoded");
} else {
Ext.Msg.alert("Store sync failed", "Unknown error");}
}
}//end of listeners
}//end of proxy
});
store.load();
store.on('load', function(store, records) {
for (var i = 0; i < records.length; i++) {
console.log(store.data.items[0].data['name']); //data printed successfully here
console.log(store.getProxy().getReader().rawData);
console.log(store);
};
});
function syncStore(rowEditing, changes, r, rowIndex) {
store.save();
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
saveText: 'Save',
listeners: {
afteredit: syncStore
}
});
var grid = Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 500,
height:'30%',
store: store,
layout: {
type: 'table',
// The total column count must be specified here
columns: 2,
tableAttrs: {
style: {
width: '100%',
height:'100%'
}
},
tdAttrs: {
style: {
height:'10%'
}
}
},
defaults: {
// applied to each contained panel
bodyStyle:'border:0px;',
xtype:'displayfield',
labelWidth: 120
},
items: [{
fieldLabel: 'My Field1',
name :'nooflicenses',
value: store //How to get the data here
//bodyStyle:'background-color:red;'
},{
fieldLabel: 'My Field',
name:'name',
value:'name'
}],
renderTo: document.getElementById("grid1")
});
});
</code>
Ext.grid.Panel control is totally configurable so it allows to hide different parts of the grid. In our case the way to hide a headers is adding property: hideHeaders:
Ext.create("Ext.grid.Panel", {
hideHeaders: true,
columns: [ ... ],
... other options ...
});
If you still would like to adopt another solution, the more complex solution I have think about is the use of XTemplate for building table dynamically. (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.XTemplate). In this approach you write the template describing how the table will be built.
Otherwise, I still recommend you to deal with the former solution rather than the latter one. The latter approach opposes the basic idea of Sencha ExtJS: use ExtJS library's widgets, customize them in the most flexible way and then automate them by creating store and model.
The most "native" way to show data is by use Ext.grid.Panel.
Example:
Ext.application({
name: 'LearnExample',
launch: function() {
//Create Store
Ext.create ('Ext.data.Store', {
storeId: 'example1',
fields: ['name','email'],
autoLoad: true,
data: [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
});
Ext.create ('Ext.grid.Panel', {
title: 'example1',
store: Ext.data.StoreManager.lookup('example1'),
columns: [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
],
renderTo: Ext.getBody()
});
}
});
The grid can be configured in the way it mostly customized for user's needs.
If you have a specific reason why to use Ext.panel.Panel with a table layout, you can use XTemplate, but it more complicate to bind the data.

Error Store Load

Good evening.
The initial view of my application need to get some data from a Store (autoLoad = true) to change some components of it. At what point can I do this?
View:
Ext.define('App.view.EmpresaPanel', {
extend: 'Ext.Container',
alias: 'widget.empresapanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Menu',
layout: {
align: 'center',
type: 'hbox'
}
},
{
xtype: 'titlebar',
docked: 'bottom',
title: '2012 ©',
layout: {
align: 'center',
type: 'hbox'
}
}
]
}
});
Store:
Ext.define('App.store.Empresa', {
extend: 'Ext.data.Store',
requires: [
'App.model.Empresa'
],
config: {
autoLoad: true,
autoSync: true,
model: 'App.model.Empresa',
storeId: 'EmpresaStore',
proxy: {
type: 'ajax',
url: 'http://URL',
reader: {
type: 'json',
rootProperty: 'empresa'
}
}
}
});
Controller:
Ext.define('App.controller.Empresa', {
extend: 'Ext.app.Controller',
config: {
refs: {
empresaPanel: 'empresapanel'
},
control: {
"empresapanel": {
initialize: 'onContainerInitialize'
}
}
},
onContainerInitialize: function(component, options) {
var store = Ext.getStore("EmpresaStore"),
record = store.findRecord("id", "1");
console.log(store);
console.log(record);
}
});
First appears in console.log: Ext.apply.create.Class
In the second: null
If I put a button in this view and tap the same event I run the same code that is in the function "onContainerInitialize" the record is completed.
Is there a specific time after the creation of view where you can access data from the Store?
Thank you!
You should add listener for store load event to access record from the store.
Here is an example how you can do it. Put following code inside of the onContainerInitialize:
store.on('load', function(t) {
var record = t.findRecord("id", "1");
console.log(record);
}, this, {single: true});

sencha touch variables in other views

i have a .js file where i show a list of pools. And when i select a row i store the poolid of the selected row in a variable(this works fine).
And after you have selected a row an other view opens where you can see the guests which belongs to the pool. BUT to show this i need to use the poolid variable from the other view in this view. But how?
//The view where i select a pool
Dashboard = new Ext.Application({
name:'Dashboard',
launch: function(){
var poolId;
var thePanel = "allPool"
//------------------------------------List with Pool info
var detailPanel = new Ext.Panel({
id:'detailPanel',
layout:'fit',
items: [{
fullscreen:true,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
getGroupString : function(record) {
return record.get('name')[0];
},
proxy: new Ext.data.AjaxProxy({
url: 'a.php/pool/listPools',
method:'post',
reader: {
type: 'json',
root: 'data',
totalCount: 'count'
}
})
,autoLoad:true
}),
sorters: [{
property: 'name',
direction: 'asc'
}],
itemTpl:'<font size="4" face="Helvetica, Arial" color="black">{name}</font>',
grouped: true,
onItemDisclosure : true,
listeners : {
itemtap : function(record,index,item,e){
if (e.getTarget('.x-list-disclosure')) {
thePanel = 'guestsofPool';
poolId = this.store.data.items[index];
Ext.Ajax.request({
url : 'a.php/guest/listGuests' ,
params : {
poolId: poolId
},
method: 'POST',
success: function (result, request) {
var redirect = "showpool.php";
window.location = redirect;
},
failure: function ( result, request) {
alert(result.responseText);
}
});
//TopPanel.dockedItems.items[0].setTitle('Guests');
//outer.setActiveItem(1, { type: 'slide', cover: false, direction: 'right'});
}
// else { Ext.Msg.alert("Item clicked!");}
}
}
}]
})
//The view where you should see all the guests of the selected POOLID
ListDemo = new Ext.Application({
name: "ListDemo",
launch: function() {
ListDemo.detailPanel = new Ext.Panel({
id: 'detailpanel',
dock: "top",
items: [{
fullscreen:true,
xtype: 'list',
store: new Ext.data.Store({
model: 'team',
getGroupString : function(record) {
return record.get('name')[0];
},
proxy: new Ext.data.AjaxProxy({
url: 'a.php/guest/listGuests',
extraParams: {
poolId: thepoolid which was selected in the other view
},
method:'post',
reader: {
type: 'json',
root: 'data',
totalCount: 'count'
}
}),autoLoad:true
}),
sorters: [{
property: 'name',
direction: 'asc'
}],
itemTpl:'<font size="4" face="Helvetica, Arial" color="black">{name}</font>',
grouped: true,
onItemDisclosure : true,
listeners : {
itemtap : function(record,index,item,e){
if (e.getTarget('.x-list-disclosure')) {
//Ext.Msg.alert(index);
var redirect = 'showpool.php';
window.location = redirect;
}
// else { Ext.Msg.alert("Item clicked!");}
}
}
}]
});
I din't had patience to go through the complete code you posted. But what I'd suggest is have a variable in index.js file say var selectedPool_id; and in the itemTap set this id. and fetch the value wherever you need it.
NOTE: mak sure that the file index.js is added to your html file prior to the files that are selecting and usent he selectedPool_id.
This was a workaround. I welcome suggestions and improvements.