Sencha filter data from store

Question

I am a new user of sencha touch

I have this store

Ext.define('Final.store.Fotos',{
extend: 'Ext.data.Store',
requires: ['Final.model.Foto'],
config:{
    model: 'Final.model.Foto',
    storeId: 'Fotos',
    autoLoad: true,
    proxy: {
        type:'ajax',
        url: '../../../prueba/index.cfm',
        reader:'json'
    }
}
});

A model

 Ext.define('Final.model.Foto',{
extend: 'Ext.data.Model',
config:{
    fields:[
        {name: 'caja', type: 'string'},
        {name: 'foto_id', type: 'int'},
        {name: 'id_caja', type: 'int'},
        {name: 'foto', type: 'string'}
    ]
}
});

And a controller

Ext.define('Final.controller.controladorCaja',{
extend: 'Ext.app.Controller',
config: {
    stores: ['Cajas', 'Fotos'],
    models: ['Caja', 'Foto'],

    refs: {
        cajaLista: 'list'
    },

    control: {
        cajaLista: {
            itemtap: 'clickCaja'
        }
    }
},

clickCaja: function(series, item, evento, caja){
    var idcaja = caja.data.caja;
    var vista = Ext.getCmp('principal');
    vista.push({
        title: ' Fotos',
        items : [{
            extend: 'Ext.navigation.View',
            config: {
                id: 'fotos'
            },
            items: [{
                xtype: 'button',
                text: 'fsf'
            }]
        }]
    });
}
});

And in my database, I have 2 tables one with cajas or boxes and other with images that are relational by the id_caja or id_box

So, in other view into sencha, I show the name of the boxes in a xtype: list. So, my question is when I click on an item of the list and function clickCaja is fired, get the id of the element clicked and filter the images by the id box

Adrian Adrian · Accepted Answer · 2014-01-10T09:06:59

If your foto-list shows all fotos by default and should be limited to a specific 'caja' if one is clicked you could use the built in store filter.

var idcaja = caja.data.caja;
Ext.getStore('Fotos').filterBy(function(record, id){
   return record.data.id_caja == idcaja;
}, this);

Edit: If you are using a default Ext.tab.Panel you can switch between tabs using the setActiveItem method to switch between tabs.

Example:

In your main view

Ext.define('App.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    id : 'mainpanel', //set an id for your tab panel
    ...
}

In your controller:

refs: {
  ...,
  mainPanel :'#mainpanel' //get a reference to the main panel
},

In your eventhandler you could then use something like...

this.getMainPanel().setActiveItem('fotoList'); //fotoList = xtype of your foto view

... to switch to your foto-list.

Sencha filter data from store

1 Answers