Results 1 to 6 of 6

Thread: Passing values for card layout setActiveItem?

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Toronto
    Posts
    105
    Vote Rating
    2
      0  

    Default Passing values for card layout setActiveItem?

    I am not sure if this is the right approach, but I am adding all my types to my viewport like this:

    Code:
    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:

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

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Location
    India
    Posts
    49
    Vote Rating
    0
      0  

    Default Same problem ...

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

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Toronto
    Posts
    105
    Vote Rating
    2
      0  

    Default

    @Shafnas, what I ended up doing was to update the panel right before switching the card like this:

    Code:
    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/baseme...2_and_MVC.aspx
    http://blog.falafel.com/blogs/baseme...ha_Ext_JS.aspx

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    India
    Posts
    49
    Vote Rating
    0
      0  

    Default

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

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Location
    India
    Posts
    49
    Vote Rating
    0
      0  

    Default

    can you pls say, what is this UserID in user.getStore().getProxy().extraParams.UserID = options.Id;?

  6. #6
    Sencha User
    Join Date
    Nov 2011
    Location
    Toronto
    Posts
    105
    Vote Rating
    2
      0  

    Default

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •