[1.0] PagingToolBar doesn't render properly

Page 3 of 3 FirstFirst 123
  1. #21
    Hi Daniil,

    I´m still waiting for a response.
    But meanwhile, how can i put your code into a separate file rather than in the head section?

    Thanks.
  2. #22
    Hi @walle,

    Apologize for the delay, too busy.

    Please provide a full sample with applied fix how exactly you are trying.

    What browser?
  3. #23
    Hi Daniil,

    You can see it in the page 2 of this post.
    The browser is Mozilla Firefox 3.6.16.
  4. #24
    With applied fix?:)

    Also please use <script runat="server"> to place code behind.
  5. #25
    Hi Daniil,

    This is my code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
     
    <!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 id="Head1" runat="server">
        <title>Example</title> 
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                this.store_empl.DataSource = new object[]
               {
                   new object[] { "3m Co", 71.72},
                   new object[] { "3m", 71.75},
                   new object[] { "5m Co", 71.70},
                   new object[] { "9m Co", 71.70},
                   new object[] { "13m Co", 71.74},
                   new object[] { "233m Co", 71.74},
                   new object[] { "343m Co", 71.74},
                   new object[] { "1m Co", 71.72},
                   new object[] { "56 Co", 71.79},
                   new object[] { "6 Co", 71.71},
                    
               };
    
                this.store_empl.DataBind();
            }
        </script>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
         
        <script type="text/javascript">
            Ext.PagingToolbar.override({
                onFirstLayout : function(){
                    if(this.dsLoaded){
                        (function(){
                          this.onLoad.apply(this, this.dsLoaded);
                        }).defer(1, this);
                    }
                }
            });
        </script>  
    </head>
    <body>
       <form id="fEmpl" runat="server">
                   
       <ext:ResourceManager ID="ResourceManager1" runat="server" />
           
       <ext:Store ID="store_empl" runat="server" AutoLoad="true">
           
          <AutoLoadParams>
            <ext:Parameter Name="start" Value="0" Mode="Raw" />
            <ext:Parameter Name="limit" Value="5" Mode="Raw" />
          </AutoLoadParams>
           
          <Reader>
             <ext:ArrayReader>
                <Fields>                       
                   <ext:RecordField Name="getId" />
                   <ext:RecordField Name="getName" />
                </Fields>
             </ext:ArrayReader>
          </Reader>           
       </ext:Store>
             
       <ext:GridPanel ID="gridp" runat="server" StoreID="store_empl" Width="755" Height="570" Border="false" StripeRows="true"
                      TrackMouseOver="true" AutoExpandColumn="name">
     
          <ColumnModel ID="ColumnModel1" runat="server">
             <Columns>                                                                       
                <ext:Column ColumnID="code" Header="Code" DataIndex="getId" />
                <ext:Column ColumnID="name" Header="Name" DataIndex="getName" />
             </Columns>
          </ColumnModel>
           
          <SelectionModel>
             <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" >                              
             </ext:RowSelectionModel>
          </SelectionModel>     
                 
          <BottomBar>
             <ext:PagingToolBar ID="PagingToolBar1" runat="server" PageSize="5" StoreID="store_empl" />
          </BottomBar>
                
      </ext:GridPanel>
                
    </form>  
    </body>
    </html>
    I checked this code works fine.
    I´m sorry, I forgot a line: <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

    But my problem is that I have many files with grid and would be very tedious to put this fix one by one.
    How can i put this fix in a file and simply import it into each of the files?
  6. #26
    A full sample rocks as usual:)

    You could add this fix in Ext.Net sources.

    1. Find <SVN root folder>\Ext.Net\Build\Ext.Net\extnet\data\PagingTo olbar.js and replace its content with
    // @source data/PagingToolbar.js
    
    Ext.PagingToolbar.prototype.onRender = Ext.PagingToolbar.prototype.onRender.createSequence(function (el) {
        if (this.pageIndex) {
            if (this.store.getCount() === 0) {
                this.store.on("load", function () {
                    this.changePage(this.pageIndex);
                }, this, { single : true });
            } else {
                this.changePage(this.pageIndex);
            }
        }
        
        this.on("change", function (el, data) {
            this.getActivePageField().setValue(data.activePage);
        }, this);
        
        this.getActivePageField().render(this.el.parent() || this.el);
        
        if (this.store.proxy.isMemoryProxy) {
            this.refresh.setHandler(function () {                    
                if (this.store.proxy.refreshData) {
                    this.store.proxy.refreshData(null, this.store);
                }
                
                if (this.store.proxy.isUrl) {
                    item.initialConfig.handler();
                }
            }, this);         
        }
        
        if (this.hideRefresh) {
            this.refresh.hide();
        }
    });
    
    Ext.PagingToolbar.prototype.initComponent = Ext.PagingToolbar.prototype.initComponent.createSequence(function () {
        if (this.ownerCt instanceof Ext.net.GridPanel) {
            this.ownerCt.on('viewready', this.fixFirstLayout, this, {single: true});
        }
        else {
            this.on('afterlayout', this.fixFirstLayout, this, {single: true});
        }
    });
    
    Ext.PagingToolbar.override({
        hideRefresh: false,
        onFirstLayout : Ext.emptyFn,
        
        getActivePageField : function () {
            if (!this.activePageField) {
                this.activePageField = new Ext.form.Hidden({ 
                    id   : this.id + "_ActivePage", 
                    name : this.id + "_ActivePage" 
                });
    
                this.on("beforedestroy", function () { 
                    if (this.rendered) {
                        this.destroy();
                    }
                }, this.activePageField);
            }
            
            return this.activePageField;
        },
        
        fixFirstLayout : function () {
            if (this.dsLoaded) {
                this.onLoad.apply(this, this.dsLoaded);
            }
        }   
    });
    2. Then run <SVN root folder>\Ext.Net\Build\Ext.Net\extnet\build.bat

    3. Then rebuild the Ext.Net solution

    => this fix will be in Ext.Net sources.
  7. #27
    Hi Daniil,

    I noticed the same problem in other situation.
    Look at this code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test3.aspx.cs" Inherits="test3" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <!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 id="Head1" runat="server">
        <title>Test3</title>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                this.store_empl.DataSource = new object[]
               {
                   new object[] { "3m Co", 71.72},
                   new object[] { "3m", 71.75},
                   new object[] { "5m Co", 71.70},
                   new object[] { "9m Co", 71.70},
                   new object[] { "13m Co", 71.74},
                   new object[] { "233m Co", 71.74},
                   new object[] { "343m Co", 71.74},
                   new object[] { "1m Co", 71.72},
                   new object[] { "56 Co", 71.79},
                   new object[] { "6 Co", 71.71},
                    
               };
    
                this.store_empl.DataBind();
            }   
         </script>     
    </head>
    <body>
       
       <form id="fTest3" runat="server">
       
          <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
          <ext:Store ID="store_empl" runat="server" AutoLoad="true">
             <Reader>
                <ext:ArrayReader>
                   <Fields>                       
                      <ext:RecordField Name="getId" />
                      <ext:RecordField Name="getValue" />
                   </Fields>
                </ext:ArrayReader>
             </Reader>           
          </ext:Store>  
          
          
          <ext:Viewport ID="Viewport1" runat="server" Layout="border">
                
               <Items>
                  
                  <ext:Panel ID="panelCity" runat="server" BodyStyle="padding:25px;" Region="North" Border="false" Height="75">
                                
                     <Items>
                                                           
                        <ext:ComboBox ID="cmbCities" runat="server" TypeAhead="true" Editable="true" Mode="Local" 
                                      FieldLabel="City" SelectOnFocus="true" EmptyText="Select ...">           
                                                              
                           <Items>
                              <ext:ListItem Text="London" Value="London" />
                              <ext:ListItem Text="New York" Value="New York" />
                           </Items>      
                                              
                        </ext:ComboBox>
                              
                     </Items>
                                    
                  </ext:Panel>                             
                  
                        
                  <ext:GridPanel ID="gridp" runat="server" StoreID="store_empl" StripeRows="true" TrackMouseOver="true" MaxWidth="200" AutoHeight="true"
                                 Border="true" Region="Center" Margins="10 0 0 10">
                                
                     <ColumnModel ID="ColumnModel2" runat="server">
                        <Columns>
                           <ext:Column ColumnID="code" Header="Code" DataIndex="getId" />
                           <ext:Column ColumnID="value" Header="Value" DataIndex="getValue" />                   
                        </Columns>
                     </ColumnModel>                  
                                
                  </ext:GridPanel>            
                  
                        
                                  
                  <ext:Panel ID="Panel2" runat="server" Border="false" Region="South" ButtonAlign="Left">                            
                     <Buttons>
                        <ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk" />                                          
                     </Buttons> 
                  </ext:Panel>         
                                     
               </Items>
               
            </ext:Viewport> 
       
       
       </form>
       
    </body>
    </html>
    In this case, without using pagingtoolbar !!
    Press repeatedly F5 and you can see the ugly effect.


    Any solution?
    Last edited by walle; Apr 15, 2011 at 9:16 AM.
  8. #28
    Apologize for the delay, too busy here.

    Not sure that I see the issue. Could you provide a video to see?

    One issue in your code:

    In according to ExtJS docs South region should have fixed .Height. It seems this improves first appearing.
Page 3 of 3 FirstFirst 123

Similar Threads

  1. Replies: 5
    Last Post: Jun 22, 2012, 2:47 PM
  2. Gridpanel doesn't resize properly
    By gdog_5021 in forum 1.x Help
    Replies: 10
    Last Post: Aug 18, 2011, 2:45 PM
  3. PagingToolbar.PageIndex doesn't work
    By YuanChien in forum 1.x Help
    Replies: 2
    Last Post: Jul 20, 2011, 7:22 AM
  4. Replies: 3
    Last Post: Apr 19, 2010, 5:00 AM
  5. [CLOSED] spotlight doesn't work properly with window control
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 10, 2009, 2:43 PM

Posting Permissions