[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.

Code:

---

        <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>

---

Hi,

Quote:

---

Originally Posted by rosua

I want to locate custom buttons inside of paging tool bar and to relocate paging tool bar to the right.

---

Example

Code:

---

<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

If we can remove or edit the text on the right bottom, it will be great too.

---

To remove please set up

Code:

---

DisplayInfo="false"

---

for the PagingToolbar.

To change please set up

Code:

---

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

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.

If I correctly understand it should look this way:

Code:

---

<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>

---