[CLOSED] Problem trying to customise the PagingToolbar of the ComboBox

  1. #1

    [CLOSED] Problem trying to customise the PagingToolbar of the ComboBox

    Daniil,

    I'm trying to do the same thing i did with the PagingToolbar of the GridPanel with the PagingToolbar of the ComboBox. Do you remember the scenario of that Thread (http://forums.ext.net/showthread.php...em-with-paging)?

    The problem is, i don't have the PagingToolbar inside the ComboBox. This way i can't use do the things i want to do with it.

    Example:
    Script:
        <script type="text/javascript">
    
            Ext.toolbar.Paging.prototype.onLoad = Ext.Function.createInterceptor(Ext.toolbar.Paging.prototype.onLoad, function () {
    
                //Resgata o argumento correto de retorno do ajax proxy
                //Se os dados foram recuperados para aquela página ou não
                var success = arguments[2];
    
                //Se o sucesso da operação tiver sido definido (com verdadeiro ou falso)
                if (success != undefined) {
    
                    //Se for falso
                    if (success === false) {
                        //Modifica o  valor na caixa de texto pra o número da ultima página carregada
                        this.child("#inputItem").setRawValue(this.pageToRestore);
                        //Atribui a página corrente do Store como sendo a ultima página carregada
                        this.getStore().currentPage = this.pageToRestore;
                    }
    
                    //Reotorna o sucesso da operação
                    return success;
                }
                //Se o sucesso da operação não tiver nem sido definido
                else {
    
                    //retorne verdadeiro
                    return true;
                }
            });
    
    
            var FalhaCargaDeRegistros = function (proxy, response, operation) {
            
                Ext.Msg.alert("Erro", operation.error);
    
                return true;
            }
    
        </script>
    Page:
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:ComboBox ID="ComboBox1" runat="server" Width="570" PageSize="5" MinChars="1">
                <ListConfig LoadingText="Searching...">
                    <ItemTpl ID="ItemTpl1" runat="server">
                        <Html>{test}</Html>
                    </ItemTpl>
                </ListConfig>
                <Store>
                    <ext:Store runat="server" AutoLoad="false" PageSize="5" ShowWarningOnFailure="false">
                        <Listeners>
                            <Exception Handler="FalhaCargaDeRegistros(proxy, response, operation);">
                            </Exception>
                        </Listeners>
                        <Proxy>
                            <ext:AjaxProxy Url="/Example/GetDataForRemotePaging/">
                                <Reader>
                                    <ext:JsonReader Root="data" TotalProperty="total" MessageProperty="message" ReadRecordsOnFailure="false" />
                                </Reader>
                            </ext:AjaxProxy>
                        </Proxy>
                        <Model>
                            <ext:Model ID="Model1" runat="server">
                                <Fields>
                                    <ext:ModelField Name="test" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
            </ext:ComboBox>
    AjaxProxy method:
            public ActionResult GetDataForRemotePaging(int start, int limit)
            {
    
                StoreResult resultado = new StoreResult();
    
    
                int quantidadeDeRegistros = limit;
    
                int numeroDaPagina = (limit + start) / quantidadeDeRegistros;
    
                List<object> listaDeEntidades = new List<object> { new { test = "Page 1" }, new { test = "Page 1" }, new { test = "Page 1" } , new { test = "Page 1" } , new { test = "Page 1" } ,
                                                                   new { test = "Page 2" }, new { test = "Page 2" }, new { test = "Page 2" } , new { test = "Page 2" } , new { test = "Page 2" } ,
                                                                   new { test = "Page 3" }, new { test = "Page 3" }, new { test = "Page 3" } };
    
                if (listaDeEntidades.Count > start)
                {
                    int quantidadeNaUltimaPagina = (listaDeEntidades.Count - start);
    
                    if (quantidadeNaUltimaPagina > limit)
                    {
                        quantidadeNaUltimaPagina = limit;
                    }
    
                    listaDeEntidades = listaDeEntidades.GetRange(start, quantidadeNaUltimaPagina);
                }
                else
                {
                    listaDeEntidades = new List<object>();
                }
    
                //Se retornou algum resultado
                if (listaDeEntidades.Any())
                {
                    //Cria variável que irá armazenar o total de entidades na lista até o momento
                    int total;
    
                    //Se a quantidade de elementos na lista de entidades é menor que tamanho da página
                    if (listaDeEntidades.Count < quantidadeDeRegistros)
                    {
                        //Total é igual ao número de entidades nas páginas anteriores mais o número de entidades nessa página
                        total = (numeroDaPagina - 1) * quantidadeDeRegistros + listaDeEntidades.Count;
                    }
                    //Se a quantidade de elementos na lista de entidades é igual ao tamanho da página
                    else
                    {
                        //Total é igual ao máximo valor possível de elementos pois não sabemos nesse momento quantas páginas faltam
                        total = int.MaxValue;
                    }
    
                    //Atribui como data a lista de entidade
                    resultado.Data = listaDeEntidades;
                    //Atribui o total como sendo o total calculado acima
                    resultado.Total = total;
                }
                //Se não houver resultados
                else
                {
                    resultado.Success = false;
                    resultado.Message = "Não há registros na página informada.";
                }
    
                return resultado;
            }
    I need to:
    Remove the last button. Solution applied to the PagingToolbar on the GridPanel:
    pagingToolbar.Listeners.BeforeRender.Handler = "this.getComponent('last').hidden = true;";
    Remove the text related to page count. Solution applied to the PagingToolbar on the GridPanel:
    pagingToolbar.AfterPageText = string.Empty;
    pagingToolbar.BeforePageText = string.Empty;
    Save the page number BeforeChange to change it back just in case the page returned has no records to show. Solution applied to the PagingToolbar on the GridPanel:
    pagingToolbar.Listeners.BeforeChange.Handler = "this.pageToRestore = this.getStore().currentPage;";
    I think that's enough to do what i want. Is it possible to do those things with the pager inside the ComboBox?
    Last edited by Daniil; May 29, 2012 at 4:40 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Yes, I remember it yet. Though you are totally right when post a related thread link. It always helps to refresh things in our mind.

    Well, in this case you should apply these changes client side. The following should work.

    Example
    <ext:ComboBox>
        <Listeners>
            <AfterRender Handler="var pt = this.getPicker().pagingToolbar;
                                  pt.on('beforerender', function () {
                                      this.getComponent('last').hidden = true;
                                  });
                                  pt.afterPageText = '';
                                  pt.beforePageText = '';
                                  pt.on('beforechange', function () {
                                      this.pageToRestore = this.getStore().currentPage;
                                  });" />
        </Listeners>
    </ext:ComboBox>
  3. #3
    Thanks for your reply.

    Well, You see... It's not 100% working... the beforePageText it's not coming empty (don't know why, coz this code is executed) and the beforechange it's not called (put an alert to test it).

    var ConfigurarPagingToolbar = function (pagingToolbar) {
    
    
        pagingToolbar.afterPageText = '';
    
        pagingToolbar.beforePageText = '';
    
        pagingToolbar.on('beforeRender', function () {
    
            
            this.getComponent('last').hidden = true;
        });
    
        pagingToolbar.on('beforechange', function () {
    
    
            this.pageToRestore = this.getStore().currentPage;
    
            alert(this.pageToRestore);
        });
    }
    <Listeners>
        <AfterRender Handler="ConfigurarPagingToolbar(this.getPicker().pagingToolbar);" />
    </Listeners>
    You can use this code om my example above to test it out...

    Thanks in advance,
  4. #4
    Confirm, it doesn't work.

    I can't see a simple way to customize the ComboBox PagingToolbar.

    I would implement it the following way.

    1. Create own class inheriting from BoundList.
    http://docs.sencha.com/ext-js/4-1/#!...view.BoundList

    MyBoundList
        Ext.define("MyBoundList", {
            extend : "Ext.view.BoundList",
            alias  : "widget.myboundlist",
            createPagingToolbar : function () {
                return Ext.widget("pagingtoolbar", {
                    id             : this.id + "-paging-toolbar",
                    pageSize       : this.pageSize,
                    store          : this.store,
                    border         : false,
                    beforePageText : "",
                    afterPageText  : "",
                    listeners      : {
                        beforechange : {
                            fn : function () {
                                this.pageToRestore = this.getStore().currentPage;
                                console.log("beforechange");
                            }
                        },
    
                        beforerender : {
                            fn : function () {
                                this.getComponent('last').hidden = true;
                            }
                        }
                    }
                });
            }
        });
    </script>
    2. Use MyBoundList class by the following way.

    How to use MyBoundList
    <ext:ComboBox runat="server">
        <ListConfig>
            <CustomConfig>
                <ext:ConfigItem Name="xtype" Value="myboundlist" Mode="Value" />
            </CustomConfig>
        </ListConfig>
    </ext:ComboBox>
  5. #5
    Just perfect. Thanks a lot.

    You can close this thread of you want to.

Similar Threads

  1. Ext:PagingToolbar & ComboBox PageSize
    By cwolcott in forum 2.x Help
    Replies: 2
    Last Post: Mar 19, 2012, 9:55 PM
  2. Replies: 2
    Last Post: Oct 21, 2010, 7:29 PM
  3. [CLOSED] customise tooltip for a specific item in Combobox
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 31, 2010, 5:32 PM
  4. [CLOSED] PagingToolBar problem
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 23, 2009, 5:29 AM
  5. Customise HtmlEditor
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 11, 2009, 7:02 PM

Tags for this Thread

Posting Permissions