Ir para conteúdo


Foto

[RESOLVIDO] SearchField - bind - store

searchfield bind store

  • Por favor, faça o login para responder
1 resposta neste tópico

#1 treiero

treiero

    Member Avançado

  • Membros
  • PipPipPip
  • 31 posts
  • LocationViçosa - MG

Postado 21 May 2015 - 21:07

Olá pessoal,

 

Já resolvi o problema e gostaria de compartilhar com a comunidade.

 

O componente searchfield é demonstrado em vários exemplos no site oficial, mas em todos eles o store é setado diretamente:

{
    width: 400,
    fieldLabel: 'Search',
    labelWidth: 50,
    xtype: 'searchfield',
    store: 'form-forum-posts'
}

Mas como no ext "quase tudo funciona em qualquer lugar e de qualquer jeito", tentei fazer assim:

        {
            id: 'sf',
            width: 400,
            fieldLabel: 'Busca',
            labelWidth: 50,
            xtype: 'searchfield',
            bind:'{usuarios}'
        }

E depois assim: 

        {
            id: 'sf',
            width: 400,
            fieldLabel: 'Busca',
            labelWidth: 50,
            xtype: 'searchfield',
            bind:{
                store:'{usuarios}'
            },
        }

Mas eu sempre recebia o seguinte erro:

 

Ext.data.Store created with no model.

Uncaught TypeError: proxy.setFilterParam is not a function
 
Então pesquisei bastante e tudo que eu encontrava era outras pessoas procurando a solução para o mesmo problema e várias outras sugerindo que era erro no código ou que deveria se trabalhar de outra forma.
 
Como eu sou teimoso pra burro, continuei na luta e descobri que o "SearchField" não está preparando para usar o "bind", o que não é necessariamente um erro, mas pode levar muita gente à loucura.
 
 
Antes o initComponent dele era assim:
    initComponent: function() {
        var me = this,
            store = me.store,
            proxy;

        me.callParent(arguments);
        me.on('specialkey', function(f, e){
            if (e.getKey() == e.ENTER) {
                me.onSearchClick();
            }
        });
        
        if (!store || !store.isStore) {
            store = me.store = Ext.data.StoreManager.lookup(store);
        }

        // We're going to use filtering
        store.setRemoteFilter(true);

        // Set up the proxy to encode the filter in the simplest way as a name/value pair
        proxy = me.store.getProxy();
        proxy.setFilterParam(me.paramName);
        proxy.encodeFilters = function(filters) {
            return filters[0].getValue();
        }
    }

E eu alterei para isso, seguindo o que encontrei no componente paging:

    mixins: [
        'Ext.util.StoreHolder'
    ]

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
        me.on('specialkey', function(f, e){
            if (e.getKey() == e.ENTER) {
                me.onSearchClick();
            }
        });

        me.bindStore(me.store || 'ext-empty-store', true);
    },

    onBindStore: function() {
        if (this.rendered) {
            var me = this,
                store = me.store,
                proxy = store.getProxy();

            // We're going to use filtering
            store.setRemoteFilter(true);

            // Set up the proxy to encode the filter in the simplest way as a name/value pair
            proxy = me.store.getProxy();
            proxy.setFilterParam(me.paramName);
            proxy.encodeFilters = function(filters) {
                return filters[0].getValue();
            }
        }
    }

E esse é o código completo dele atualizado para aceitar o bind no store:

Ext.define('Ext.ux.form.SearchField', {
    extend: 'Ext.form.field.Text',

    mixins: [
        'Ext.util.StoreHolder'
    ],

    alias: 'widget.searchfield',

    triggers: {
        clear: {
            weight: 0,
            cls: Ext.baseCSSPrefix + 'form-clear-trigger',
            hidden: true,
            handler: 'onClearClick',
            scope: 'this'
        },
        search: {
            weight: 1,
            cls: Ext.baseCSSPrefix + 'form-search-trigger',
            handler: 'onSearchClick',
            scope: 'this'
        }
    },

    hasSearch : false,
    paramName : 'query',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
        me.on('specialkey', function(f, e){
            if (e.getKey() == e.ENTER) {
                me.onSearchClick();
            }
        });

        me.bindStore(me.store || 'ext-empty-store', true);
    },

    onBindStore: function() {
        if (this.rendered) {
            var me = this,
                store = me.store,
                proxy = store.getProxy();

            // We're going to use filtering
            store.setRemoteFilter(true);

            // Set up the proxy to encode the filter in the simplest way as a name/value pair
            proxy = me.store.getProxy();
            proxy.setFilterParam(me.paramName);
            proxy.encodeFilters = function(filters) {
                return filters[0].getValue();
            }
        }
    },

    onClearClick : function(){
        var me = this,
            activeFilter = me.activeFilter;

        if (activeFilter) {
            me.setValue('');
            me.store.getFilters().remove(activeFilter);
            me.activeFilter = null;
            me.getTrigger('clear').hide();
            me.updateLayout();
        }
    },

    onSearchClick : function(){
        var me = this,
            value = me.getValue();

        if (value.length > 0) {
            // Param name is ignored here since we use custom encoding in the proxy.
            // id is used by the Store to replace any previous filter
            me.activeFilter = new Ext.util.Filter({
                property: me.paramName,
                value: value
            });
            me.store.getFilters().add(me.activeFilter);
            me.getTrigger('clear').show();
            me.updateLayout();
        }
    }
});

Segue anexo o arquivo para download.

Arquivo anexado  SearchField.js   2.33K   2 Downloads

 

Espero ter ajudado, grande abraço a todos!


Teiero - André Rodrigues

#2 edson.hh

edson.hh

    Member Avançado

  • Membros
  • PipPipPip
  • 65 posts

Postado 25 January 2016 - 18:19

Estou precisando disso agora. So achei vc com a solução. 

Vou testar e ver como vai ficar. 

Eu tinha colocando pela storeId.. mas sei q nao eh certo, apesar q funciona

 

agradeço.







Tópicos que também usam as tags searchfield, bind, store:

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

0 membros, 0 visitantes, 0 membros anônimos