PDA

View Full Version : Passing values for card layout setActiveItem?



basememara
13 Dec 2011, 3:02 PM
I am not sure if this is the right approach, but I am adding all my types to my viewport like this:


Ext.define('MyApp.view.Viewport', {
extend: 'Ext.Panel',


config: {
fullscreen: true,
layout: 'card',
items: [
{
xtype: 'productlist'
},
{
xtype: 'productdetail'
}
]
},


initialize: function() {
this.setActiveItem(0);
}
});

Then in my productlist's itemtap, I have this:


onProductItemTap: function (dataView, index) {
var item = dataView.getStore().getAt(index);
Ext.Viewport.getActiveItem().setActiveItem(1); //HOW TO PASS ITEM TO CARD?
},

How do I pass "item.data" to the card? I plan to take the id of the item and send a server call to retrieve that product data so it can populate productdetail. If there is a better way to do this instead of using a card, please let me know. I am using MVC by the way but I do not know how to render a view in the itemtap if that's the right way. Any help would be greatly appreciated.

Shafnas
15 Mar 2012, 12:58 AM
I am also having the samae problem..Please help to sort this...
basememara, have you found the solutions,,Please share it, it will help others too ..

basememara
15 Mar 2012, 4:32 AM
@Shafnas, what I ended up doing was to update the panel right before switching the card like this:



detail: function(id) {
var store = this.getStore('Products');
var data = store.findRecord('ID', id, 0, false, false, true);

if (data) {
//RENDER DETAIL VIEW
if (this.getDetailPanel()) {
this.getDetailPanel().update(data.data || data);
}

//ACTIVATE VIEW
this.getViewport().getLayout().setActiveItem('productdetail');
}
}


I wrote a couple articles about Touch and Ext JS that may be more help too:
http://blog.falafel.com/blogs/basememara/11-12-15/Building_a_Mobile_Web_App_using_Sencha_Touch_2_and_MVC.aspx
http://blog.falafel.com/blogs/basememara/12-02-17/Building_a_Javascript_MVC_App_using_Sencha_Ext_JS.aspx

Shafnas
21 Mar 2012, 4:10 AM
I used this from your other post :

//ACTIONS detail: function(options) {
//UPDATE STORE WITH USER INFO
var user = Ext.ComponentQuery.query('.clientList#lstDetail')[0];

user.getStore().getProxy().extraParams.UserID = options.Id;

user.getStore().read();


//SELECT USER INFO VIEW
Ext.Viewport.getActiveItem().setActiveItem(1);
},

//EVENTS
onUserItemTap: function (dataView, index) {
var item = dataView.getStore().getAt(index);
this.detail(item.data);
},


It shows error : Uncaught TypeError: Cannot set property 'UserID' of undefined

I have model like:

Ext.define("Mysample.model.clientsModel", {
extend: "Ext.data.Model",
config: {
fields: [
{name: 'ClientInitials', mapping: 'CLIENTINITIALS'}]
)};
My clientList.js
Ext.define('Mysample.view.clientList', {
extend: 'Ext.Container',
xtype:'clientList',

config: {
id:'clientstab',
layout : {
type : 'card',
animation : 'flip'
},
items: [
{
//card1
xtype: 'list',
itemId: 'lstUser',
scrollable:true,
flex:1,
store: 'clientsWithOffers',
itemTpl: '{ClientInitials}',
onItemDisclosure: function(record, btn, index) {
this.up('#clientstab').setActiveItem(1);
}

},
{
//card2
xtype:'list',
itemId: 'lstDetail',
store: 'clientsWithOffers',
//html:'Clients details here',
flex:2,
items: [
{
xtype: 'toolbar',
ui:'neutral',
docked:'top',
items: [
{
text: 'back',
ui: 'back',
handler: function() {
this.up('#clientstab').setActiveItem(0);
}
},
{
text: 'Make an Offer',
ui: 'action',
},
]
},
{
xtype:'panel',html:'Clients details here',
//flex:1,
//store: 'clientsWithoutAgentOffers',
itemTpl: '{ClientInitials}'
}
]
}
]
}
});

I want to show to show the item details on the panel..How can i do, pls help me..

Shafnas
21 Mar 2012, 4:42 AM
can you pls say, what is this UserID in user.getStore().getProxy().extraParams.UserID = options.Id;?

basememara
26 Mar 2012, 7:30 AM
@Shafnas, it looks like you cut and paste too much :) What does your store class look like (the class that is retrieving the data from your data source, ie. ajax, jsonp, etc)?

The extraParams are the parameters that you are passing to your data source. In other words, when you do an AJAX call to a REST service, sometimes the REST service allows you to pass in parameters to alter the response from the data source. For example, the REST service might accept a user id parameter so it gives you back that one user. You will have to find out from the web service what is the AJAX calls it accepts.