[CLOSED] Paging tool bar customization question.

  1. #1

    [CLOSED] Paging tool bar customization question.

    Hi.
    I want to locate custom buttons inside of paging tool bar and to relocate paging tool bar to the right.
    If we can remove or edit the text on the right bottom, it will be great too.

    Code is following and please see attachment for your understanding.

            <div class="order_btn2">
                <ext:ImageButton ID="SMSSendBtn" runat="server" ImageUrl="/images/btn/btn_smssend.gif">
                    <Listeners>
                        <Click Fn="SMSSendOpen" />
                    </Listeners>
                </ext:ImageButton>
                <ext:ImageButton ID="PrintBtn" runat="server" ImageUrl="/images/btn/btn_print.gif">
                    <Listeners>
                        <Click Fn="MemberPrint" />
                    </Listeners>
                </ext:ImageButton>
                <ext:ImageButton ID="ExcelBtn" runat="server" ImageUrl="/images/btn/btn_excel.gif">
                    <Listeners>
                        <Click Fn="MemberExcel" />
                    </Listeners>
                </ext:ImageButton>
            </div>
    
            <ext:GridPanel ID="Member_Grid" runat="server" MinHeight="380" AutoHeight="true" MaxHeight="500" BaseCls="GridCss" Frame="false" Border="false" 
                ClientIDMode="Static" StripeRows="true">
                <%-- Store 시작 --%>
                <Store>
                    <ext:Store ID="MemberStore" runat="server" ClientIDMode="Static">
                        <Reader>
                            <ext:JsonReader>
                                <Fields>
                                    <ext:RecordField Name="Active" Type="Boolean" DefaultValue="false" />
                                    <ext:RecordField Name="M_Code" Type="Auto" />
                                    <ext:RecordField Name="Grade" Type="Auto" />
                                    <ext:RecordField Name="M_Name" Type="Auto" />
                                    <ext:RecordField Name="Tel" Type="Auto" />
                                    <ext:RecordField Name="Mobile" Type="Auto" />
                                    <ext:RecordField Name="ID" Type="Auto" />
                                    <ext:RecordField Name="School_Name" Type="Auto" />
                                    <ext:RecordField Name="Rank" Type="Auto" />
                                    <ext:RecordField Name="b_name_s" Type="Auto" />
                                    <ext:RecordField Name="Status" Type="Auto" />
                                    <ext:RecordField Name="Reg_Date" Type="Auto" />
                                    <ext:RecordField Name="Stop_Date" Type="Auto" />
                                    <ext:RecordField Name="BirthDay" Type="Auto" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <%-- Store 끝 --%>
    
                <%-- Column 시작 --%>
                <ColumnModel>
                    <Columns>
                        <ext:Column Header="학년" Width="50" Align="Center" DataIndex="Grade" MenuDisabled="true">
                            <Renderer Fn="GradeName" />
                        </ext:Column>
                        <ext:Column Header="학생명" Width="100" Align="Center" Css="cursor:pointer;" MenuDisabled="true">
                            <Renderer Fn="MNameRender" />
                        </ext:Column>
                        <ext:Column Header="전화번호" Width="110" Align="Center" DataIndex="Tel" MenuDisabled="true" />
                        <ext:Column Header="휴대폰" Width="110" Align="Center" DataIndex="Mobile" MenuDisabled="true" />
                        <ext:Column Header="ID" Width="100" Align="Center" DataIndex="ID" MenuDisabled="true" />
                        <ext:Column Header="학교명" Width="150" Align="Center" DataIndex="School_Name" MenuDisabled="true" />
                        <ext:Column Header="과정" Width="80" Align="Center" DataIndex="Rank" MenuDisabled="true" />
                        <ext:Column Header="현재학습교재" Width="160" Align="Center" DataIndex="b_name_s" MenuDisabled="true" />
                        <ext:Column Header="상태" Width="70" Align="Center" DataIndex="Status" MenuDisabled="true" />
                        <ext:Column Header="학습이력" Width="90" Align="Center" MenuDisabled="true">
                            <Renderer Fn="HistoryRender" />
                        </ext:Column>
                        <ext:Column Header="가입일" Width="90" Align="Center" DataIndex="Reg_Date" MenuDisabled="true">
                            <Renderer Fn="DateRender" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <%-- Column 끝 --%>
    
                <Listeners>
                    <CellClick Fn="CellClick" />
                </Listeners>
    
                <%-- SelectionModel 설정 시작 --%>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="MemberCheckModel" runat="server" CheckOnly="true" ClientIDMode="Static" Width="25">
                        <Listeners>
                            <RowSelect Handler="record.set('Active', 'true');" />
                            <RowDeselect Handler="record.set('Active', 'false');" />
                        </Listeners>
                    </ext:CheckboxSelectionModel>
                </SelectionModel>
                <%-- SelectionModel 설정 끝 --%>
    
                <Plugins>
                    <ext:GridFilters ID="GridFilters1" runat="server" Local="true">
                        <Filters>
                            <ext:StringFilter DataIndex="M_Code" />
                        </Filters>
                    </ext:GridFilters>
                </Plugins> 
    
                <%-- Bottom부분에 표시될 부분(페이징) 시작------------------------%>
                <BottomBar>
                    <ext:PagingToolbar ID="Member_Paging" runat="server" PageSize="10" StoreID="MemberStore" ClientIDMode="Static"
                        DisplayInfo="true" EmptyMsg="검색결과가 존재하지 않습니다." Cls="CommPageCss" HideRefresh="true" />
                </BottomBar>
                <%-- Bottom부분에 표시될 부분(페이징) 끝------------------------%>
    
                <LoadMask ShowMask="true" Msg="데이터 조회중..." />
                <View>
                    <ext:GridView EmptyText="조회된 데이터가 존재하지 않습니다." />
                </View>
            </ext:GridPanel>
    Attached Thumbnails Click image for larger version. 

Name:	screenshot.jpg 
Views:	48 
Size:	100.1 KB 
ID:	4070  
    Last edited by geoffrey.mcgill; Apr 12, 2012 at 1:17 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Quote Originally Posted by rosua View Post
    I want to locate custom buttons inside of paging tool bar and to relocate paging tool bar to the right.
    Example
    <ext:PagingToolbar runat="server" PageSize="3">
        <CustomConfig>
            <ext:ConfigItem Name="prependButtons" Value="true" Mode="Raw" />
        </CustomConfig>
        <Items>
            <ext:Button runat="server" Text="Custom Button 1" />
            <ext:Button runat="server" Text="Custom Button 2" />
        </Items>
    </ext:PagingToolbar>
    Quote Originally Posted by rosua View Post
    If we can remove or edit the text on the right bottom, it will be great too.
    To remove please set up
    DisplayInfo="false"
    for the PagingToolbar.

    To change please set up
    DisplayMsg="your custom text"
    for the PagingToolbar.

    See also
    http://docs.sencha.com/ext-js/3-4/#!...fg-displayInfo
    http://docs.sencha.com/ext-js/3-4/#!...cfg-displayMsg
  3. #3

    paging tool bar's position question.

    Thank you for your answer.
    But, I'm still waiting how to change the position of pagin tool bar to locate it to the middle of bottom or right side of bottom.
    Please let me know about this too.

    Thank you.
  4. #4
    If I correctly understand it should look this way:
    <ext:PagingToolbar runat="server" PageSize="3">
        <CustomConfig>
            <ext:ConfigItem Name="prependButtons" Value="true" Mode="Raw" />
        </CustomConfig>
        <Items>
            <ext:Button runat="server" Text="Custom Button 1" />
            <ext:Button runat="server" Text="Custom Button 2" />
            <ext:ToolbarFill />
        </Items>
    </ext:PagingToolbar>

Similar Threads

  1. [CLOSED] tool tip and split button question
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 27, 2012, 11:13 PM
  2. [CLOSED] Validation on click of next/previous buttons of paging tool bar
    By AnulekhaK in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 13, 2012, 8:06 AM
  3. [CLOSED] GridPanel / Paging Tool bar throwing WebResource.axd issue
    By sriram in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 18, 2011, 6:19 PM
  4. [CLOSED] Grid view Paging tool bar
    By majestic in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Dec 01, 2010, 11:37 AM
  5. Paging Tool Bar - NaN
    By Tbaseflug in forum 1.x Help
    Replies: 1
    Last Post: May 23, 2009, 10:06 AM

Posting Permissions