Ir para conteúdo


Foto

RowWidget Extjs 6.2

extjs 6 rowWidget store dynamic

Melhor Resposta aspisila , 09 February 2017 - 08:53

Obrigado Legolas.

 

 

Se eu usar direto o:

Ext.create(App.store.Comentarios,{
    filters:[{
        property:'post_id',
        value:'{record.id}'
    }]
});

ele não reconhece o filter.

 

Se eu envolver no "bind" ele retorna aquele erro "store.isLoaded is not a function".

 

 

 

No projeto Eu precisei adicionar dois grids no widget... então fiz assim:

Ext.define('Inb.view.orcamento.ServicosGrid', {
    extend: 'Inb.view.base.GridInterno',
    xtype:'orcamento-servico-grid',
    plugins:[
        {
            ptype: 'rowwidget',
            widget:{
                xtype:'container',
                items:[
                    {
                        xtype:'orcamento-servicosinsumo-grid',
                        autoLoad: true,
                        disableSelection:true,
                        border:true,
                        ui:'rowwidget'
                    },
                    {
                        xtype:'orcamento-servico-grid',
                        ui:'rowwidget', 
                        border:true,
                        pluiginWidget:true,
                        autoLoad: true
                    }
                ]
            }
        }
    ]

...

Como o record da linha expandida é adicionado no primeiro elemento, adicionei a store dos grids 'filhos'  dentro do "initComponent" correspondente:

initComponent: function() {
    var me = this;

    if(me.pluiginWidget){
        container = me.up('container');
        record = container._rowContext.record,        
        me.store = {
            model:'Inb.model.orcamento.OrcamentosServico',
            filters: [{
                property: 'orcamentos_servico_id',
                value: record.get('id')
            }],
            autoLoad:true,
            remoteFilter:true
        }
    }

    me.callParent(arguments);
}

Dessa maneira rodou da forma que eu esperava. Carregando cada grid 'filho' no momento que que a linha é expandida.

 

E como eu adiciono o próprio grid pai como elemento filho, consegui a descendência ilimitada que imaginava.

 

 

Não consegui imaginar se teria uma solução mais elegante para isso.

Visualizar todo o conteúdo do post


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

#1 aspisila

aspisila

    Iniciante

  • Membros
  • Pip
  • 2 posts

Postado 04 February 2017 - 11:37

Olá Galera,
 
Estou tentando usar o plugin rowWidget do Extjs 6.2.1 para exibir Posts e seus Comentários, por exemplo.
 
Na configuração do widget, se eu usar a store que vem com o json ele funciona perfeitamente.

Ext.define('App.view.posts.Grid',{
    extend:'Ext.grid.Panel',
    plugins:[
        {
            ptype: 'rowwidget',
            widget:{
                xtype:'grid-comentarios',
                autoLoad: true,
                bind:{
                    store: '{record.comentarios}'
                },
                dockedItems:[
                    {
                        dock: 'bottom',
                        xtype: 'pagingtoolbar',
                        bind : {
                            store: '{record.comentarios}'
                        }
                    }
                ]
            }
        }
    ],

    columns:[...]
});

Mas eu preciso que a store do grid 'filho' seja carregada somente se a linha for expandida.

 

Tentei assim:

Ext.define('App.view.posts.Grid',{
    extend:'Ext.grid.Panel',
    plugins:[
        {
            ptype: 'rowwidget',
            widget:{
                xtype:'grid-comentarios',
                autoLoad: true,
                bind:{
                    store: {
                        model:'App.model.comentarios.Comentario',
                        filters: [{
                            property: 'post_id',
                            value: '{record.id}'
                        }],
                        autoLoad:true,
                        remoteFilter:true
                    }
                }
            }
        }
    ],

    columns:[...]
});

O request para o servidor é feito. O filtro envia o ID correto de cada linha. O servidor retorna o json formatado.

 

Mas ocorre um erro que para a execução e os dados sequer são adicionados no grid filho.

 

ext-all-rtl-debug.js?_dc=1486218420449:201919 Uncaught TypeError: store.isLoaded is not a function
    at constructor.setStore (ext-all-rtl-debug.js?_dc=1486218420449:201919)
    at constructor.onBindNotify (ext-all-rtl-debug.js?_dc=1486218420449:53983)
    at constructor.notify (ext-all-rtl-debug.js?_dc=1486218420449:100305)
    at constructor.react (ext-all-rtl-debug.js?_dc=1486218420449:101626)
    at constructor.notify (ext-all-rtl-debug.js?_dc=1486218420449:97931)
    at constructor.onTick (ext-all-rtl-debug.js?_dc=1486218420449:97962)
    at ext-all-rtl-debug.js?_dc=1486218420449:6889
    at ext-all-rtl-debug.js?_dc=1486218420449:7086
 
 
O que estou fazendo de errado?
 
 
Obrigado.


#2 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3493 posts
  • LocationBelo Horizonte

Postado 08 February 2017 - 11:58

aspisila, seja bem vindo ao nosso fórum, espero que possamos lhe ajudar a sanar as suas dúvidas.

 

Sobre essa, vou ser sincero com você que não sei ao certo o que pode estar acontecendo, pois o erro informado é muito genérico, mas deduzo que seja por causa do reader.

 

Você pode fazer o seguinte, só por questão de teste crie uma classe do Store que tem faz o load dos dados no servidor sem usar o store do ViewModel, tipo criar uma classe mesmo e daí tente fazer assim:

Ext.define('App.view.posts.Grid',{
    extend:'Ext.grid.Panel',
    plugins:[
        {
            ptype: 'rowwidget',
            widget:{
                xtype:'grid-comentarios',
                autoLoad: true,
                store: Ext.create('AQUI_COLOCA_A_CLASSE_DO_SEU_STORE')
            }
        }
    ],

    columns:[...]
});

Tente ver se usando diretamente um objeto do Store configurado com o proxy e tals se funciona. Daí se funcionar você já tem um ponto de partida.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)


#3 aspisila

aspisila

    Iniciante

  • Membros
  • Pip
  • 2 posts

Postado 09 February 2017 - 08:53   Melhor Resposta

Obrigado Legolas.

 

 

Se eu usar direto o:

Ext.create(App.store.Comentarios,{
    filters:[{
        property:'post_id',
        value:'{record.id}'
    }]
});

ele não reconhece o filter.

 

Se eu envolver no "bind" ele retorna aquele erro "store.isLoaded is not a function".

 

 

 

No projeto Eu precisei adicionar dois grids no widget... então fiz assim:

Ext.define('Inb.view.orcamento.ServicosGrid', {
    extend: 'Inb.view.base.GridInterno',
    xtype:'orcamento-servico-grid',
    plugins:[
        {
            ptype: 'rowwidget',
            widget:{
                xtype:'container',
                items:[
                    {
                        xtype:'orcamento-servicosinsumo-grid',
                        autoLoad: true,
                        disableSelection:true,
                        border:true,
                        ui:'rowwidget'
                    },
                    {
                        xtype:'orcamento-servico-grid',
                        ui:'rowwidget', 
                        border:true,
                        pluiginWidget:true,
                        autoLoad: true
                    }
                ]
            }
        }
    ]

...

Como o record da linha expandida é adicionado no primeiro elemento, adicionei a store dos grids 'filhos'  dentro do "initComponent" correspondente:

initComponent: function() {
    var me = this;

    if(me.pluiginWidget){
        container = me.up('container');
        record = container._rowContext.record,        
        me.store = {
            model:'Inb.model.orcamento.OrcamentosServico',
            filters: [{
                property: 'orcamentos_servico_id',
                value: record.get('id')
            }],
            autoLoad:true,
            remoteFilter:true
        }
    }

    me.callParent(arguments);
}

Dessa maneira rodou da forma que eu esperava. Carregando cada grid 'filho' no momento que que a linha é expandida.

 

E como eu adiciono o próprio grid pai como elemento filho, consegui a descendência ilimitada que imaginava.

 

 

Não consegui imaginar se teria uma solução mais elegante para isso.



#4 Legolas

Legolas

    Ext JS - Admin

  • Administrators
  • 3493 posts
  • LocationBelo Horizonte

Postado 09 February 2017 - 11:22

Que bom que conseguiu resolver meu caro.

 

Pelo que entendi a questão mesmo era na criação das referências do Store.

 

Mas o importante é que sair conforme o esperado.


"A verdadeira vitória não é derrotar alguém forte... É ser capaz de proteger alguém que você ama de verdade!" (Maito Dai)






Tópicos que também usam as tags extjs 6, rowWidget, store dynamic:

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

0 membros, 0 visitantes, 0 membros anônimos