PDA

View Full Version : [CLOSED] Problem trying to customise the PagingToolbar of the ComboBox



RCN
May 28, 2012, 6:07 PM
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?19134-CLOSED-Problem-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 pgina ou no
var success = arguments[2];

//Se o sucesso da operao 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 nmero da ultima pgina carregada
this.child("#inputItem").setRawValue(this.pageToRestore);
//Atribui a pgina corrente do Store como sendo a ultima pgina carregada
this.getStore().currentPage = this.pageToRestore;
}

//Reotorna o sucesso da operao
return success;
}
//Se o sucesso da operao no 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 varivel 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 pgina
if (listaDeEntidades.Count < quantidadeDeRegistros)
{
//Total igual ao nmero de entidades nas pginas anteriores mais o nmero de entidades nessa pgina
total = (numeroDaPagina - 1) * quantidadeDeRegistros + listaDeEntidades.Count;
}
//Se a quantidade de elementos na lista de entidades igual ao tamanho da pgina
else
{
//Total igual ao mximo valor possvel de elementos pois no sabemos nesse momento quantas pginas 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 no houver resultados
else
{
resultado.Success = false;
resultado.Message = "No h registros na pgina 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?

Daniil
May 28, 2012, 7:46 PM
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>

RCN
May 29, 2012, 12:04 PM
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().pagingToo lbar);" />
</Listeners>


You can use this code om my example above to test it out...

Thanks in advance,

Daniil
May 29, 2012, 2:53 PM
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/#!/api/Ext.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>

RCN
May 29, 2012, 4:36 PM
Just perfect. Thanks a lot.

You can close this thread of you want to.