Feb 05, 2018, 5:51 PM
[CLOSED] ComboBox PagingToolbar for large dataset
Hi, we're trying to add a PagingToolbar ability our combobox, so users can find their values more easily in the case of large datasets.
This is similar in concept to the example here:
https://examples4.ext.net/#/Form/Com...Custom_Search/
However, we don't want to have the refresh icon in the paging toolbar show up.
And we don't want the "Page" label to appear in front of the paging index.
What is the best way to accomplish this?
Our approach here is hitting a few roadblocks. Thanks
This is similar in concept to the example here:
https://examples4.ext.net/#/Form/Com...Custom_Search/
However, we don't want to have the refresh icon in the paging toolbar show up.
And we don't want the "Page" label to appear in front of the paging index.
What is the best way to accomplish this?
Our approach here is hitting a few roadblocks. Thanks
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.CustomizedPagingCB_Store.DataSource = new object[]
{
new object[] { "Store_IDValue_0", "Store_Display_Verbiage0"},
new object[] { "Store_IDValue_1", "Store_Display_Verbiage1"},
new object[] { "Store_IDValue_2", "Store_Display_Verbiage2"},
new object[] { "Store_IDValue_3", "Store_Display_Verbiage3"},
new object[] { "Store_IDValue_4", "Store_Display_Verbiage4"},
new object[] { "Store_IDValue_5", "Store_Display_Verbiage5"},
new object[] { "Store_IDValue_6", "Store_Display_Verbiage6"},
new object[] { "Store_IDValue_7", "Store_Display_Verbiage7"},
new object[] { "Store_IDValue_8", "Store_Display_Verbiage8"},
new object[] { "Store_IDValue_9", "Store_Display_Verbiage9"},
new object[] { "Store_IDValue_10", "Store_Display_Verbiage10"},
new object[] { "Store_IDValue_11", "Store_Display_Verbiage11"},
new object[] { "Store_IDValue_12", "Store_Display_Verbiage12"},
new object[] { "Store_IDValue_13", "Store_Display_Verbiage13"},
new object[] { "Store_IDValue_14", "Store_Display_Verbiage14"},
new object[] { "Store_IDValue_15", "Store_Display_Verbiage15"},
new object[] { "Store_IDValue_16", "Store_Display_Verbiage16"},
new object[] { "Store_IDValue_17", "Store_Display_Verbiage17"},
new object[] { "Store_IDValue_18", "Store_Display_Verbiage18"},
new object[] { "Store_IDValue_19", "Store_Display_Verbiage19"},
};
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>ComboBox with customized PagingToolbar</title>
<script>
Ext.define("MinimalizedBoundList", {
extend: "Ext.view.BoundList",
alias: "widget.MinimalizedBoundList"
,
createPagingToolbar: function () {
return Ext.widget("pagingtoolbar", {
id: this.id + "-paging-toolbar",
pageSize: this.pageSize, //Q2a: this doesn't seem to be working; is not inheriting pg size of 5 from by the combo box
//pageSize: 5, //Q2b: this also isn't working; explicitly setting is not forcing the page size either. So unable to activate the paging toolbaar
store: this.store,
border: false
, beforePageText: "" //NOTE: must hide default text that prefixes the page index to help us conserve screen real estate
, afterPageText: 'of {0}'
, listeners: {
beforerender: {
fn: function () {
this.getComponent('refresh').hidden = true; //NOTE: must hide the refresh icon on the far right of the paging toolbar that renders by default; is confusing for our use-case
}
}
}
});
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<p>
We want to customize the paging toolbar of our comboboxes as follows:
</p>
<ol>
<li>
hide the default text that prefixes the page index to help us conserve screen real estate
</li>
<li>
ensure that the paging toolbar and dropdown menu stays open when we try to click the page index field to change our viewing scope
</li>
<li>
hide the refresh icon on the far right of the paging toolbar that renders by default; is confusing for our use-case
</li>
<li>
ensure that the paging toolbar renders with the minimum width necessary to accomodate both
</li>
</ol>
<ul>
<li>
the text in the combo box
</li>
<li>
all elements in the paging toolbar
</li>
</ul>
<!--customized to render paging navigation-->
<!--Q1: how can we have the paging navigation fully render? -->
<ext:ComboBox ID="CustomizedPagingCB"
runat="server"
TypeAhead="true"
DisplayField="Store_Display_Field"
ValueField="Store_Value_Field"
QueryMode="Remote"
PageSize="5"
>
<ListConfig>
<CustomConfig>
<ext:ConfigItem Name="xtype" Value="MinimalizedBoundList" Mode="Value" />
</CustomConfig>
</ListConfig>
<Store>
<ext:Store ID="CustomizedPagingCB_Store" runat="server" RemoteFilter="true" RemoteSort="true" AutoLoad="false">
<Model>
<ext:Model ID="StoreModel" runat="server">
<Fields>
<ext:ModelField Name="Store_Display_Field"/>
<ext:ModelField Name="Store_Value_Field"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</form>
</body>
</html>
Last edited by fabricio.murta; Feb 21, 2018 at 10:13 PM.