Use of History in ExtJS

Use of History in ExtJS

// The form object has a record history object-history. This object can be used to achieve previous pages, next pages, and other effects. // Example: history. go () Next page, history. go (-1) Previous Page // use Ext. before history, you must place a form element on the page. You can directly write HTML code to the page, or use the DOM interface of ExtJs to create // ext.getbody(() Doc ument and encapsulate it into Ext. element // call Ext. element. createChild () creates the form Element Ext. onReady (function () {// create form. The form contains a hidden text field and an iframe var historyForm = Ext. getBody (). createChild ({tag: 'form', action: '#', cls: 'x-den ', id: 'History-form', children: [{tag: 'input', id: Ext. history. fieldId, type: 'den den '}, {tag: 'iframe', id: Ext. history. iframeId}]}); // event processing function, which passes in different values to execute different operations var onHistoryChangeHandler = function (token) {lele.info ('browser history changes: '+ token); if (token) {var tabId = parseInt (token. substr (10)-1; console.info (token. substr (10); tabWindow. setActiveTab (tabId) ;}// display the token on the console first, and then call the initialization method (similar to the constructor used to initialize the component) Ext. history. init (); // connect the change event to the event handler Ext. history. on ('change', onHistoryChangeHandler); // create a paging component var tabWindow = new Ext. tabPanel ({title: 'History test', activeTab: 0, items: [{title: 'paging 1', id: 'tab1', html :'

Tab1 '}, {Title: 'paging 2', id: 'tab2', html :' Tab2 '}, {Title: 'paging 3', id: 'tab3', html :' Tab3 '}]}); TabWindow. render ('windowdiv '); var onTabChangeHandler = function (tpObj, tab) {console. debug ('Switch by PAGE, switch to: '+ tab. id); Ext. history. add ('tab _ ID: '+ TAB. id);} tabWindow. on ('tabchang', onTabChangeHandler );}); History

The running effect is as follows: