In Ext.net, learn how to effortlessly update the text of a textfield within the toolbar using dynamic

Currently, I am collaborating on a project involving the utilization of ext.net, where a paginator is located within the toolbar of an HtmlEditor.

The markup is as follows:

<ext:Hidden ID='HF_type' runat="server"/>
    <ext:HtmlEditor ID="HtmlEditor1" runat="server" Height="800" Width="1050"
        EnableAlignments="false"
        EnableColors="false"
        EnableFont="false"
        EnableFontSize="true"
        EnableLinks="false"
        EnableLists="false"
        EnableSourceEdit="false"
        Maximizable="false"
    >
        <Listeners>
            <Initialize Handler="ButtonInit(#{HtmlEditor1})" />
            <Render     Handler="ButtonRender(#{HtmlEditor1})" />

        </Listeners>
    </ext:HtmlEditor>

Here is the toolbar render function:

function ButtonRender(he){
he.getToolbar().add([{xtype:'tbseparator'}]);

he.getToolbar().addButton([{
    id:'previousBtn',
    iconCls:'arrow-left',
    handler: function(){previousPageClick();},
    scope: this,
    tooltip: 'Previous Page',
    overflowText: 'Previous Page'
}]);

he.getToolbar().addField( [{
   id:'pageCounter',
    xtype : 'tbtext',
    text : '1 of 3',
    width: '40'
}]);

he.getToolbar().addButton([{
    id:'nextBtn',
    iconCls:'arrow-right',
    handler: function(){nextPageClick();},
    scope: this,
    tooltip: 'Next Page',
    overflowText: 'Next Page'
}]);

he.getToolbar().add([{xtype:'tbseparator'}]);

he.getToolbar().addButton([{
    iconCls:'icon-printer-color',
    handler: function(){pdfClick();},
    scope: this,
    tooltip: 'Print',
    overflowText: 'Print'
}]);

Overall, everything is functioning properly: Buttons are being added, page changes are working smoothly, etc. However, the issue arises with the "pageCounter" textfield in the toolbar displaying "1 of 3" when it could be "1 of 2." Is there a way to dynamically change this value based on specific conditions?

To clarify further: I require that upon loading the page, the textfield exhibits different numbers depending on the total number of pages.

javascriptasp.netpaginationext.nethtml-editor

Answer №1

Ha! It seems that asking a question on stackoverflow is like rubbing a lucky charm. I finally cracked it. By including 2 hidden fields with the current and total number of pages and populating them on page load, success! Here's the snippet of code that made it happen:

Ext.onReady(function() {
var theCounter = #{HtmlEditor1}.getToolbar().get("pageCounter");
theCounter.setText(HF_currentPage.value + ' out of ' + HF_totalPages.value);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Form validation on the client side is not occurring, and the form elements cannot be edited

Having trouble with client-side form validation. Specifically, I need to ensure that passwords match in my registration form. Below is the JavaScript code snippet I'm using: $(document).ready(function(e) { $("#reg-form").submit(function(event) { ...

javascripthtmlcssforms

The functionality of JSON.stringify does not take into account object properties

Check out the example on jsfiddle at http://jsfiddle.net/frigon/H6ssq/ I have encountered an issue where JSON.stringify is ignoring certain fields. Is there a way to make JSON.stringify include them in the parsing? In the provided jsfiddle code... <s ...

javascriptjsonkendo-uistringify

Eliminate redundant elements within a List<T> by utilizing .NET 2.0

Despite my best efforts to eliminate duplicate items from a List using .NET 2.0, I found that the expected outcome was not achieved. List<Student> list1 = new List<Student>(); Student s = new Student(); s.Age = "35"; s.Name = ...

c#asp.net.net

Delete with Express Router

I have created a basic "Grocery List" web application using the MERN stack (Mongo, Express, React, Node). However, I am facing an issue where my DELETE REST command does not execute unless I refresh the page. Here is the code for my event handler and the b ...

javascriptreactjsexpressmern

Determining if the current URL in NextJS is the homepage

Just getting started with NextJS. I am trying to determine if the current URL is the home page. When I use: import { useRouter } from "next/router"; const router = useRouter(); const is_home = (router.pathname === ''); An error pops ...

javascriptnext.js

Cookies are failing to be saved upon reloading the page

I found this snippet of code $(document).ready(function () { var d = new Date(); var newMinutes = d.getTimezoneOffset(); var storedMinutes = getCookieValue("tzom"); if (newMinutes != storedMinutes) { setCookie("tzom", newMinutes) ...

javascriptjquerycookiestimezonetimezone-offset

Sending POST data to a PHP file without the use of jQuery results in AJAX malfunction

I have been struggling to make an ajax alert layer work with a POST method for the past few days, and I cannot figure out why it is not functioning. I have successfully used the same code structure to send form data through ajax using POST on other admin p ...

javascriptphpajaxpost

Store vueJs data in browser's localStorage

Is there a way to save the state of my game even after a page refresh using local or session storage? I've successfully stored wins in localStorage, but I'm struggling to keep the table with "X" and "O" in the same spot after a refresh. Any sugge ...

javascriptvue.jslocal-storage

Effective ways to incorporate functions from different modules in AngularJS

Currently, I am enhancing my AngularJS skills by creating a Todo list application. Unfortunately, I am encountering some challenges when it comes to utilizing modules from one another. To elaborate, in my app.js file, I have the following code snippet: v ...

javascriptangularjs

What is the purpose of using extends React.Component when we are designing a class component in React?

Being new to React, I find myself consumed with confusion about it day and night. As a result, my hair is falling out at an alarming rate. One thing that puzzles me is why we always need to extends React.Component when creating components with the class. ...

javascriptreactjsreact-nativees6-class

Issue with a Jquery toggleClass function not working properly on hover

Hello everyone! I am a newbie in the community and relatively new to the world of web programming. I am encountering an issue that is really frustrating me. I attempted to use this code to add a class when hovering over the ul list element so that I can d ...

javascripthtmljquerycssfrontend

Button Type Comparison: Click Event vs Submit Event

Having trouble getting a simple submit button to trigger the click and submit event... html <input type="submit" id="test"> JQuery: $(document).ready(function(){ $('#test').onclick(function(){ alert('Hi') }) $ ...

javascriptjquery

Error Message When Attempting to Load JQuery Library

Currently experimenting with PHP, JavaScript, and jQuery tutorials, I encountered the following error. The tutorials can be accessed here Below is the error message from the Chrome browser console: Failed to load resource: net::ERR_FILE_NOT_FOUND auto- ...

javascriptphpjqueryhtml

Using innerHTML within a JS function causes the class to malfunction

I want to embed HTML code using innerHTML, which will add an input with the class .flatpickr-date. let newInput = '<input type="text" class="flatpickr-date">' document.getElementById('id').innerHTML = newInput; In my JavaScript ...

javascriptjqueryhtml

Main.js in Electron cannot find the NODE_ENV environment variable

Currently, I am in the process of developing an application which involves: React 16.4.0 Electron 2.0.2 Webpack 4.11.0 After successfully compiling and running the app using webpack (webpack dev server), my focus now shifts to showing only Chr ...

javascriptreactjswebpackelectron

Struggling to avoid displaying unauthorized content in next.js prior to navigation to a new route

import JoinComponent from '@/components/join/JoinComponent' import Footer from '@/components/Layouts/Footer' import GuestLayout from '@/components/Layouts/GuestLayout' import Navbar from '@/components/Layouts/Navbar' ...

javascriptreactjsauthenticationnext.js

Generate a visualization following the inclusion of a fresh model

I have a few pre-existing models on a server that are successfully fetched and rendered. However, when I save a new model, it doesn't get rendered until the page is refreshed. Is there a way to render the new model without reloading the page? Below i ...

javascriptajaxbackbone.js

Encountering the "TypeError: document.getElementById(...) is null" error message while utilizing react.js in conjunction with chart.js

I am encountering an issue while using react and chart.js together to create a bar chart. The problem lies in the fact that chart.js requires the use of canvas tags, and we need to locate this tag and insert the bar chart within it using the traditional do ...

javascriptjqueryreactjschart.js

Guide to changing the checkbox value using JavaScript

Describing the Parent Element: <span style="background: yellow; padding: 50px;" onClick="setCheckBox()"> <span> </span> <input type="checkbox" name="f01" value="100"> </span> ...

javascripthtmloracle-apex

Dealing with CORS, IIS7, and PHP - Overcoming the Access-Control-Allow-Origin obstacle

I am attempting to enable another local host (such as javascript.dev) to make a xhr request to this particular host, which operates on an IIS7 server. When I perform a curl -I command, the headers I receive are as follows: HTTP/1.1 200 OK Content-Length: ...

javascriptphpiis-7xmlhttprequestcors