Ir para conteúdo


Foto

Aninhar filtros de lista em uma grid

gridfiltering

Melhor Resposta alex_cyro , 12 August 2015 - 13:43

Resolvi usando o método createMenu() após filtrar a store

 

https://fiddle.sencha.com/fiddle/rk2

var cidadeFilter = this.down('#cidadeId').filter;
cidadeFilter.createMenu();

Valeu,

Alex

Visualizar todo o conteúdo do post


  • Por favor, faça o login para responder
6 respostas neste tópico

#1 alex_cyro

alex_cyro

    Novato

  • Membros
  • PipPip
  • 17 posts

Postado 05 August 2015 - 15:55

Pessoal,
 
Quero aninhar filtros de lista em uma grid, por exemplo:
 
Numa grid tem uma coluna de Estados e outra de Cidades com os respectivos filtros de lista.
 
Quando filtrar a lista de Estados quero que o filtro da lista de Cidades exiba somente as cidades relacionadas ao estado filtrado.
 
O problema é que o filtro funciona, mas somente a primeira vez que a lista filtrada é aberta.
 
Alguém saberia uma forma de contornar isso?
 
Reproduzi o exemplo no feddle:
https://fiddle.sencha.com/fiddle/rk2
 

Código da grid:

/**
 * This example illustrates how to use the "gridfilters" plugin.
 */
Ext.define('KitchenSink.view.GridFiltering', {
    extend: 'Ext.grid.Panel',
    xtype: 'grid-filtering',
    requires: [
        'Ext.grid.filters.Filters',
        'Ext.grid.filters.filter.List'
    ],
    
    title: 'Test',
    frame: true,
    width: 600,
    height: 500,
    
    plugins: 'gridfilters',
    
    store: 'Itens',
    
    defaultListenerScope: true,
    
    tbar: [{
        text: 'Clear Filters',
        handler: 'onClearFilters'
    }],
    
    columns: [{
        dataIndex: 'id',
        text: 'Id',
        width: 50,
        filter: 'number'
    }, {
        dataIndex: 'estado_id',
        text: 'Estado',
        flex: 2,
        renderer: function(value, metaData, record) {
            return record.get('estados').estado;
        },
        filter: {
            type: 'list',
            idField: 'id',
            labelField: 'estado',
            store: 'Estados'
        }
    }, {
        dataIndex: 'cidade_id',
        text: 'Cidade',
        flex: 3,
        renderer: function(value, metaData, record) {
            return record.get('cidades').cidade;
        },
        filter: {
            type: 'list',
            idField: 'id',
            labelField: 'cidade',
            store: 'Cidades'
        }
    }],
    
    listeners: {
        filterchange: 'onFilterchange'
    },
    
    onFilterchange: function (store, filters, eOpts) {
        
        Ext.Array.each(filters, function (filter) {
            
            if ('estado_id' === filter.getProperty()) {
                
                var cidadesStore = Ext.getStore('Cidades');
                cidadesStore.clearFilter();
                cidadesStore.filterBy(function (record) {
                    return Ext.Array.contains(filter.getValue(), record.get('estado_id'));
                });                
            }
        });
    },    
    
    onClearFilters: function () {
        this.filters.clearFilters();
    }
    
});


#2 Loiane

Loiane

    Member Avançado

  • Expert User
  • 1013 posts
  • LocationSão Paulo - SP

Postado 10 August 2015 - 08:44

Alex, não vi erro no exemplo.

 

Poderia descrever um pouco mais qual é o resultado que vc quer chegar?


Autora dos livros:

Mastering Ext JS 5 http://bit.ly/1HWeHXh
Mastering Ext JS 4 http://bit.ly/14NZkxg

Ext JS 4: First Look http://bit.ly/o1IP1w
Sencha Architect http://bit.ly/19FVBGs
Curso ExtJS 4 Gratuito http://bit.ly/s5S0Oj (conceitos valem pro Ext 5 e 6 tb)


#3 alex_cyro

alex_cyro

    Novato

  • Membros
  • PipPip
  • 17 posts

Postado 10 August 2015 - 20:23

Olá Loiane,

 

O problema está na lista lista dos filtros, nao nos itens da coluna.

 

Parece que o plugin renderiza a lista somente a primeira vez que ela é exibida.

 

Por exemplo, se eu escolher o estado de Santa Catarina na coluna estado, a "lista de filtro" de cidades deveria exibir somente cidades de Santa Catarina após eu filtrar na store.

 

Se eu limpar os filtros ou escolher outro estado, a lista de cidades não é filtrada mais, continua aparecendo somente as cidades de Santa Catarina.

 

Obrigado,

Alex



#4 Loiane

Loiane

    Member Avançado

  • Expert User
  • 1013 posts
  • LocationSão Paulo - SP

Postado 11 August 2015 - 09:17

Alex, testei no fiddle conforme descreveu e está tudo ok.

 

Selecionei Santa Catarina no filtro de estados e filtrou.

 

Depois, cliquei em Clear filters e a lista voltou ao normal.

 

Voltei na lista de filtros de estado, tirei a seleção de Santa Catarina e coloquei Sao Paulo e filtrou normalmente.

Quando limpa os filtros, vai limpar somente da store, a seleção na lista de filtros não limpa, esse é o comportamento padrão do plugin mesmo.


Autora dos livros:

Mastering Ext JS 5 http://bit.ly/1HWeHXh
Mastering Ext JS 4 http://bit.ly/14NZkxg

Ext JS 4: First Look http://bit.ly/o1IP1w
Sencha Architect http://bit.ly/19FVBGs
Curso ExtJS 4 Gratuito http://bit.ly/s5S0Oj (conceitos valem pro Ext 5 e 6 tb)


#5 alex_cyro

alex_cyro

    Novato

  • Membros
  • PipPip
  • 17 posts

Postado 11 August 2015 - 14:19

Loiane, os dados da grid estão filtrando, mas a lista do filtro está filtrando somente a primeira vez. Veja nas imagens:

 

Aqui filtrei por Santa Catarina

Arquivo anexado  1.png   37.79K   1 Downloads

 

Veja que a lista do filtro de cidades está agora mostrando somente as cidades de SC. Até aqui OK.

Arquivo anexado  2.png   67.48K   0 Downloads

 

Mas se eu limpo o filtro ou seleciono outro estado, veja que a lista continua mostrando somente as cidades de SC

Arquivo anexado  3.png   96.06K   0 Downloads

 

O que eu queria era o comportamento de combos aninhados. 

 

Pelo que eu entendi a lista é renderizada, construindo o menu com os dados da store na primeira vez que é acionada e mesmo que os valores da store sejam modicados não afetará mais a lista.

 

Este é um exemplo hipotético. No meu caso, são classificações arquivísticas, com vários níveis.

 

Vou repensar a estratégia.

 

Obrigado, 

Alex



#6 Loiane

Loiane

    Member Avançado

  • Expert User
  • 1013 posts
  • LocationSão Paulo - SP

Postado 11 August 2015 - 16:41

O filtro somente funciona na store do Grid.

 

Se vc está usando store para renderizar a lista dos dados que aparecem na opção filtro, esses dados não serão filtrados.

 

O que vc pode fazer para ter o comportamento que vc quer é no seu model, ter uma função convert que irá mostrar o nome da cidade ou estado e usar esse campo no dataIndex do seu grid. Aí sim a lista de filtros será renderizada dessa maneira.


Autora dos livros:

Mastering Ext JS 5 http://bit.ly/1HWeHXh
Mastering Ext JS 4 http://bit.ly/14NZkxg

Ext JS 4: First Look http://bit.ly/o1IP1w
Sencha Architect http://bit.ly/19FVBGs
Curso ExtJS 4 Gratuito http://bit.ly/s5S0Oj (conceitos valem pro Ext 5 e 6 tb)


#7 alex_cyro

alex_cyro

    Novato

  • Membros
  • PipPip
  • 17 posts

Postado 12 August 2015 - 13:43   Melhor Resposta

Resolvi usando o método createMenu() após filtrar a store

 

https://fiddle.sencha.com/fiddle/rk2

var cidadeFilter = this.down('#cidadeId').filter;
cidadeFilter.createMenu();

Valeu,

Alex






0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos