What's New?

Custom paging toolbar

  1. #1
    Nov 08, 2012, 8:40 PM

    Custom paging toolbar

    Hi,
    How to customize paging toolbar to that example
    https://examples1.ext.net/#/Form/ComboBox/Two_Columns/
    Is it possible?

    <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="50" DisplayMsg="{0} - {1} de {2}">
                    <Items>
                        <ext:ToolbarSeparator runat="server"></ext:ToolbarSeparator>
                        <ext:ComboBox runat="server" Editable="false" FieldLabel="Registros por Pagina"
                            Width="175" ForceSelection="true" SelectedIndex="0" TriggerAction="All" ID="GridClientesRowsPerPage"
                            FireSelectOnLoad="True" SelectOnFocus="true">
                            <Listeners>
                                <Select Handler="fnRedoPaging(item)" />
                            </Listeners>
                            <Items>
                                <ext:ListItem Text="10" Value="10" />
                                <ext:ListItem Text="25" Value="25" />
                                <ext:ListItem Text="50" Value="50" />
                                <ext:ListItem Text="100" Value="100" />
                            </Items>
                        </ext:ComboBox>                  
                     </Items>
                </ext:PagingToolbar>
            </BottomBar>
    This return:
    Click image for larger version.  Name: 509c2db29d29c96316000003.jpg  Views: 149  Size: 57.2 KB  ID: 5047

    But combobox control does not have BottomBar tag.
    Last edited by erico; Nov 08, 2012 at 9:12 PM.
  2. #2
    Nov 09, 2012, 3:15 AM
    Hello!

    Try following example: 

    <script runat="server">
    private object[] TestData
    {
        get
        {
            DateTime now = DateTime.Now;
            
            return new object[]
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
            };
        }
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind(); 
        }

        this.ComboStore.DataSource = new object[]
        {
            new object[] { "AL", "Alabama", "The Heart of Dixie" },
            new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
            new object[] { "AZ", "Arizona", "The Grand Canyon State" },
            new object[] { "AR", "Arkansas", "The Natural State" },
            new object[] { "CA", "California", "The Golden State" },
            new object[] { "CO", "Colorado", "The Mountain State" },
            new object[] { "CT", "Connecticut", "The Constitution State" },
            new object[] { "DE", "Delaware", "The First State" },
            new object[] { "DC", "District of Columbia", "The Nation's Capital" },
            new object[] { "FL", "Florida", "The Sunshine State" },
            new object[] { "GA", "Georgia", "The Peach State" },
            new object[] { "HI", "Hawaii", "The Aloha State" },
            new object[] { "ID", "Idaho", "Famous Potatoes" },
            new object[] { "IL", "Illinois", "The Prairie State" },
            new object[] { "IN", "Indiana", "The Hospitality State" },
            new object[] { "IA", "Iowa", "The Corn State" },
            new object[] { "KS", "Kansas", "The Sunflower State" },
            new object[] { "KY", "Kentucky", "The Bluegrass State" },
            new object[] { "LA", "Louisiana", "The Bayou State" },
            new object[] { "ME", "Maine", "The Pine Tree State" },
            new object[] { "MD", "Maryland", "Chesapeake State" },
            new object[] { "MA", "Massachusetts", "The Spirit of America" },
            new object[] { "MI", "Michigan", "Great Lakes State" },
            new object[] { "MN", "Minnesota", "North Star State" },
            new object[] { "MS", "Mississippi", "Magnolia State" },
            new object[] { "MO", "Missouri", "Show Me State" },
            new object[] { "MT", "Montana", "Big Sky Country" },
            new object[] { "NE", "Nebraska", "Beef State" },
            new object[] { "NV", "Nevada", "Silver State" },
            new object[] { "NH", "New Hampshire", "Granite State" },
            new object[] { "NJ", "New Jersey", "Garden State" },
            new object[] { "NM", "New Mexico", "Land of Enchantment" },
            new object[] { "NY", "New York", "Empire State" },
            new object[] { "NC", "North Carolina", "First in Freedom" },
            new object[] { "ND", "North Dakota", "Peace Garden State" },
            new object[] { "OH", "Ohio", "The Heart of it All" },
            new object[] { "OK", "Oklahoma", "Oklahoma is OK" },
            new object[] { "OR", "Oregon", "Pacific Wonderland" },
            new object[] { "PA", "Pennsylvania", "Keystone State" },
            new object[] { "RI", "Rhode Island", "Ocean State" },
            new object[] { "SC", "South Carolina", "Nothing Could be Finer" },
            new object[] { "SD", "South Dakota", "Great Faces, Great Places" },
            new object[] { "TN", "Tennessee", "Volunteer State" },
            new object[] { "TX", "Texas", "Lone Star State" },
            new object[] { "UT", "Utah", "Salt Lake State" },
            new object[] { "VT", "Vermont", "Green Mountain State" },
            new object[] { "VA", "Virginia", "Mother of States" },
            new object[] { "WA", "Washington", "Green Tree State" },
            new object[] { "WV", "West Virginia", "Mountain State" },
            new object[] { "WI", "Wisconsin", "America's Dairyland" },
            new object[] { "WY", "Wyoming", "Like No Place on Earth" } 
        };

        this.ComboStore.DataBind();
    }

    protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
    {
        this.Store1.DataSource = this.TestData;
        this.Store1.DataBind(); 
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Local Data Paging - Ext.NET Examples</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
       
        <ext:Store 
            ID="Store1"
            runat="server" 
            SkipIdForNewRecords="false" 
            RemoteSort="false"
            RefreshAfterSaving="None"
            OnRefreshData="MyData_Refresh">
            <Reader>
                <ext:ArrayReader IDProperty="company">
                    <Fields>
                        <ext:RecordField Name="company" />
                        <ext:RecordField Name="price" Type="Float" />
                        <ext:RecordField Name="change" Type="Float" />
                        <ext:RecordField Name="pctChange" Type="Float" />
                        <ext:RecordField Name="lastChange" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>            
        </ext:Store>
        
        <ext:Store ID="ComboStore" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="abbr" />
                        <ext:RecordField Name="state" />
                        <ext:RecordField Name="nick" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>            
        </ext:Store>
        
        <ext:GridPanel ID="GridPanel1" 
            runat="server" 
            StoreID="Store1" 
            StripeRows="true"
            Title="Array Grid" 
            Width="800" 
            Height="300"
            AutoExpandColumn="Company">
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Price" Width="75" DataIndex="price">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Change" Width="75" DataIndex="change" />
                    <ext:Column Header="Change" Width="75" DataIndex="pctChange" />
                    <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="HH:mm:ss" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
            <LoadMask ShowMask="true" />
            <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="10">
                    <Items>
                        <ext:ToolbarSeparator runat="server"></ext:ToolbarSeparator>
                        <ext:ComboBox 
                            runat="server" 
                            StoreID="ComboStore" 
                            Editable="false"
                            DisplayField="state"
                            ValueField="abbr"
                            TypeAhead="true" 
                            Mode="Local"
                            ForceSelection="true"
                            EmptyText="Select a state..."
                            Resizable="true"
                            SelectOnFocus="true"
                            Width="300"
                            PageSize="20"
                            />  
                    </Items>
                </ext:PagingToolbar>
            </BottomBar>
        </ext:GridPanel>  
    </form>
</body>
</html>
  3. #3
    Nov 09, 2012, 10:05 AM
    Quote Originally Posted by Baidaly View Post
    Hello!

    Try following example:

    ....
    No, would like to customize the scrollbar of the combobox.
    https://examples1.ext.net/#/Form/ComboBox/Two_Columns/
  4. #4
    Nov 10, 2012, 5:45 AM
    Quote Originally Posted by erico View Post
    No, would like to customize the scrollbar of the combobox.
    https://examples1.ext.net/#/Form/ComboBox/Two_Columns/
    Sorry, I cannot understand. You want to display scrolls when combo box expanded?
  5. #5
    Nov 10, 2012, 10:45 AM
    Quote Originally Posted by Baidaly View Post
    Sorry, I cannot understand. You want to display scrolls when combo box expanded?
    Sorry,
    I would like to customize the PagingToolbar of the combobox.
    https://examples1.ext.net/#/Form/ComboBox/Two_Columns/

    Thanks
  6. #6
    Nov 10, 2012, 6:27 PM
    I will share my solution. Do not know if it's the best way to solve.

    Click image for larger version.  Name: Capturar.PNG  Views: 119  Size: 19.7 KB  ID: 5062

    <%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store1.DataSource = new object[]
        {
            new object[]{"AL", "Alabama", "The Heart of Dixie"},
            new object[] { "AK", "Alaska", "The Land of the Midnight Sun"},
            new object[] { "AZ", "Arizona", "The Grand Canyon State"},
            new object[] { "AR", "Arkansas", "The Natural State"},
            new object[] { "CA", "California", "The Golden State"},
            new object[] { "CO", "Colorado", "The Mountain State"},
            new object[] { "CT", "Connecticut", "The Constitution State"},
            new object[] { "DE", "Delaware", "The First State"},
            new object[] { "DC", "District of Columbia", "The Nation's Capital"},
            new object[] { "FL", "Florida", "The Sunshine State"},
            new object[] { "GA", "Georgia", "The Peach State"},
            new object[] { "HI", "Hawaii", "The Aloha State"},
            new object[] { "ID", "Idaho", "Famous Potatoes"},
            new object[] { "IL", "Illinois", "The Prairie State"},
            new object[] { "IN", "Indiana", "The Hospitality State"},
            new object[] { "IA", "Iowa", "The Corn State"},
            new object[] { "KS", "Kansas", "The Sunflower State"},
            new object[] { "KY", "Kentucky", "The Bluegrass State"},
            new object[] { "LA", "Louisiana", "The Bayou State"},
            new object[] { "ME", "Maine", "The Pine Tree State"},
            new object[] { "MD", "Maryland", "Chesapeake State"},
            new object[] { "MA", "Massachusetts", "The Spirit of America"},
            new object[] { "MI", "Michigan", "Great Lakes State"},
            new object[] { "MN", "Minnesota", "North Star State"},
            new object[] { "MS", "Mississippi", "Magnolia State"},
            new object[] { "MO", "Missouri", "Show Me State"},
            new object[] { "MT", "Montana", "Big Sky Country"},
            new object[] { "NE", "Nebraska", "Beef State"},
            new object[] { "NV", "Nevada", "Silver State"},
            new object[] { "NH", "New Hampshire", "Granite State"},
            new object[] { "NJ", "New Jersey", "Garden State"},
            new object[] { "NM", "New Mexico", "Land of Enchantment"},
            new object[] { "NY", "New York", "Empire State"},
            new object[] { "NC", "North Carolina", "First in Freedom"},
            new object[] { "ND", "North Dakota", "Peace Garden State"},
            new object[] { "OH", "Ohio", "The Heart of it All"},
            new object[] { "OK", "Oklahoma", "Oklahoma is OK"},
            new object[] { "OR", "Oregon", "Pacific Wonderland"},
            new object[] { "PA", "Pennsylvania", "Keystone State"},
            new object[] { "RI", "Rhode Island", "Ocean State"},
            new object[] { "SC", "South Carolina", "Nothing Could be Finer"},
            new object[] { "SD", "South Dakota", "Great Faces, Great Places"},
            new object[] { "TN", "Tennessee", "Volunteer State"},
            new object[] { "TX", "Texas", "Lone Star State"},
            new object[] { "UT", "Utah", "Salt Lake State"},
            new object[] { "VT", "Vermont", "Green Mountain State"},
            new object[] { "VA", "Virginia", "Mother of States"},
            new object[] { "WA", "Washington", "Green Tree State"},
            new object[] { "WV", "West Virginia", "Mountain State"},
            new object[] { "WI", "Wisconsin", "America's Dairyland"},
            new object[] { "WY", "Wyoming", "Like No Place on Earth"} 
        };

        this.Store1.DataBind();
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>
<style type="text/css">
    .cbStates-list 
    {
        width: 478px;
        font: 11px tahoma,arial,helvetica,sans-serif;
    }
        
    .cbStates-list th {
        font-weight: bold;
    }
        
    .cbStates-list td, .cbStates-list th {
        padding: 3px;
    }
</style>
<script type="text/javascript">
var fnRedoPaging = function (cb, pgTbr) {
    pgTbr.pageSize = parseInt(cb.getValue());
    pgTbr.doLoad(pgTbr.cursor);
    pgTbr.moveFirst();
};

var createCustomPaging = function (cb) {

    var newPageTb = new Ext.PagingToolbar({
        displayMsg: '{0} - {1} de {2}',
        displayInfo: true,
        store: cb.store,
        pageSize: cb.pageSize,
        renderTo: cb.footer,
        items: [
            { xtype: 'tbseparator' },
            new Ext.form.ComboBox({
                store: new Ext.data.ArrayStore({ fields: ['sz'], data: [['10'], ['25'], ['50'], ['100']] }),
                displayField: 'sz',
                typeAhead: true,
                mode: 'local',
                forceSelection: true,
                triggerAction: 'all',
                value: cb.pageSize,
                listAlign: 'bl-tl?',
                selectOnFocus: true,
                listeners: {
                    select: function (combo, record, index) {
                        cbStates.focus().expand();
                        fnRedoPaging(combo, cbStates.pageTb);
                    }
                }
            })
        ]
    });
    cb.rebuildCustomPageTb = true;

    return newPageTb;
};

var Onfocus = function (cb) {
    if (cb.rebuildCustomPageTb == undefined) {
        cb.pageTb.destroy();
        cb.pageTb = createCustomPaging(cb);
    }
};
</script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="abbr" />
                        <ext:RecordField Name="state" />
                        <ext:RecordField Name="nick" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
            <AutoLoadParams>
                <ext:Parameter Name="start" Value="0" Mode="Raw" />
                <ext:Parameter Name="limit" Value="10" Mode="Raw" />
            </AutoLoadParams>
        </ext:Store>

        <ext:ComboBox 
            ID="cbStates" 
            runat="server"
            EmptyText="Select State"
            TypeAhead="true"
            ForceSelection="true"
            StoreID="Store1"
            Mode="Local"
            DisplayField="state" 
            ValueField="abbr"
            MinChars="1"
            ListWidth="480"
            PageSize="10"
            ItemSelector="tr.list-item">
            <Template ID="Template1" runat="server">
                <Html>
					<tpl for=".">
						<tpl if="[xindex] == 1">
							<table class="cbStates-list">
								<tr>
									<th>State</th>
									<th>Nick</th>
								</tr>
						</tpl>
						<tr class="list-item">
							<td style="padding:3px 0px;">{state}</td>
							<td>{nick}</td>
						</tr>
						<tpl if="[xcount-xindex]==0">
							</table>
						</tpl>
					</tpl>
				</Html>
            </Template>
            <Triggers>
                <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
            </Triggers>
            <Listeners>
                <BeforeQuery Handler="this.triggers[0][ this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                <TriggerClick Handler="if (index == 0) { this.focus().clearValue(); trigger.hide();}" />
                <Select Handler="this.triggers[0].show();" />
                <Focus Handler="Onfocus(this);" Delay="10" />
            </Listeners>
        </ext:ComboBox>  
        
         
    </form>
</body>
</html>

Similar Threads

  1. Paging Toolbar Problem?
    By healingnations in forum 1.x Help
    Replies: 1
    Last Post: Nov 01, 2012, 7:16 AM
  2. StoreParameter and paging toolbar
    By Aod47 in forum 2.x Help
    Replies: 1
    Last Post: Oct 07, 2012, 2:01 PM
  3. [CLOSED] Difference in Paging Toolbar behaviour between Ext.NET 1.x and 2 for Grid with remote (ashx) paging and local filtering
    By anup in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: Jun 13, 2012, 4:53 PM
  4. Problem with paging toolbar
    By sonnh11 in forum 1.x Help
    Replies: 3
    Last Post: May 10, 2011, 12:08 PM
  5. Paging ToolBar Problem
    By kiran malgi in forum 1.x Help
    Replies: 2
    Last Post: Mar 29, 2010, 8:25 AM

Tags for this Thread

Posting Permissions