Extjs4 note (12) Ext. toolbar. toolbar, ext. toolbar. Paging tab, ext. UX. statusbar. statusbar Status Bar

ArticleDirectory

• 1. Add menus, buttons, and search functions on the toolbar.
• 2. Overflow Test
• 3. In the toolbar on the right
• 1. Basic paging Toolbar controls
• 2. Expanded flip Control

Back to the series directory

This article describes three Toolbar controls. Ext. toolbar. toolbar can be used to place some tool-class buttons and menus, ext. toolbar. paging is used to control the paging display of a dataset. Ext. UX. statusbar. statusbar is used to display the current status information.

1. Ext. toolbar. Toolbar

Toolbar controls can be attached to panel, window, and other container controls. You can add multiple Toolbar controls in four orientations. We will demonstrate multiple Ext. toolbar. Toolbar controls and attach them to different positions on the panel.

1. Add menus, buttons, and search functions on the toolbar.

Here we use the listview control mentioned in the previous article as the data display, put the listview into a panel control, and then add the toolbar to the top of the Panel, in addition, you can search for a dataset on the server in the toolbar.

First, we define a data model and store:

[JS]

Ext. define ('datas', {extend: 'ext. data. model ', fields: [{Name: 'intdata', type: 'int'}, {Name: 'stringdata', type: 'string'}, {Name: 'timedata', type: 'date'}], proxy: {type: 'ajax ', URL: 'toolbar1json', Reader: {type: 'json', root: 'rows '}}); var store = new Ext. data. store ({model: 'datas', sortinfo: {field: 'intdata', ction: 'desc'}, autoload: true}); store. load ();
 

JSON output from the serverCode:

[C # MVC]

Public jsonresult toolbar1json (string keyword) {var rows = basicdata. table. take (10 ). select (x => New {intdata = x. intdata, stringdata = x. stringdata, timedata = x. timedata. toshortdatestring ()}); If (! String. isnullorempty (keyword) {rows = rows. where (x => X. intdata. tostring () = keyword | X. stringdata. contains (keyword) | X. timedata. contains (keyword);} var JSON = new {Results = basicdata. table. count, rows = rows}; return JSON (JSON, jsonrequestbehavior. allowget );}
 

Next, define a listview from the previous article.

Now we want to define a toolbar, and add tool buttons, common text, split lines, and menus in the toolbar, and implement the search function:

[JS]

VaR filed1 = new Ext. form. field (); var tbar = ext. create ("Ext. toolbar ", {items: ['text',"-", {xtype:" splitbutton ", text:" button "},{ text:" menu ", menu: {items: [{text: 'option 1'}, {text: 'option 2'}, {text: 'option 3', Handler: function () {Ext. MSG. alert ("prompt", "Message from menu") ;}}}, "->", "Keyword:", filed1, {text: "Search ", handler: function () {store. load ({Params: {Keyword: filed1.getvalue () }}) ;}]});
 

Note: Here, we pass the keyword to the action parameter of C # Through load store:

[JS]

{Text: "Search", Handler: function () {store. Load ({Params: {Keyword: filed1.getvalue ()}});}}
 

Finally, we define a panel and add both listview and toolbar to the Panel. Note that tbar indicates that the toolbar is above.

[JS]

 
VaR Panel = new Ext. panel ({renderto: "div1", width: 600, height: 250, collapsible: True, layout: 'fit ', Title: 'demo toolbar', items: listview, tbar: tbar });
 

Let's take a look at the effect:

We enter the keyword "6" to view the filter effect:

2. Overflow Test

What if there are too many item items on the toolbar and the Panel length is not enough? We need to set overflowhandler: 'menu '. The Code is as follows:

[JS]

VaR bbar = ext. create ('ext. toolbar. toolbar ', {layout: {overflowhandler: 'menu'}, items: ["overflow test", "overflow test ", "overflow test", {xtype: "button", text: "overflow button ", handler: function () {Ext. MSG. alert ("prompt", "toolbar button clicked") ;},{ text: "overflow button", xtype: "splitbutton"}]});
 

Preview The effect:

3. In the toolbar on the right

Now we want to implement the tool bar placed on the right. This time we will write it directly in the panel Code. The Code is as follows:

[JS]

VaR Panel = new Ext. panel ({renderto: "div1", width: 600, height: 250, collapsible: True, layout: 'fit ', Title: 'demo toolbar', items: listview, tbar: tbar, bbar: bbar, rbar: [{iconcls: 'add16', tooltip: 'button 1'}, '-', {iconcls: 'add16', tooltip: {text: 'button 2', anchor: 'left' }}, {iconcls: 'add16'}, {iconcls: 'add16'}, '-', {iconcls: 'add16'}]});
 

Preview The effect:

The complete code is provided:

[JS]

Ext. onready (function () {Ext. quicktips. init (); Ext. define ('datas', {extend: 'ext. data. model ', fields: [{Name: 'intdata', type: 'int'}, {Name: 'stringdata', type: 'string'}, {Name: 'timedata', type: 'date'}], proxy: {type: 'ajax ', URL: 'toolbar1json', Reader: {type: 'json', root: 'rows '}}); var store = new Ext. data. store ({model: 'datas', sortinfo: {field: 'intdata', ction: 'desc'}, autoload: true}); store. load (); var listview = ext. create ('ext. listview ', {store: store, multiselect: True, emptytext: 'no data currently expression', reservescroloffset: True, columns: [{header: "intdata", dataindex: 'intdata'}, {header: "stringdata", dataindex: 'stringdata'}, {header: "timedata", dataindex: 'timedata', align: 'right', xtype: 'datecolumn', format:'m-d h: I a'}]}); var filed1 = new Ext. form. field (); var tbar = ext. create ("Ext. toolbar ", {items: ['text',"-", {xtype:" splitbutton ", text:" button "},{ text:" menu ", menu: {items: [{text: 'option 1'}, {text: 'option 2'}, {text: 'option 3', Handler: function () {Ext. MSG. alert ("prompt", "Message from menu") ;}}}, "->", "Keyword:", filed1, {text: "Search ", handler: function () {store. load ({Params: {Keyword: filed1.getvalue () }}) ;}]}); var bbar = ext. create ('ext. toolbar. toolbar ', {layout: {overflowhandler: 'menu'}, items: ["overflow test", "overflow test ", "overflow test", {xtype: "button", text: "overflow button ", handler: function () {Ext. MSG. alert ("prompt", "toolbar button clicked") ;},{ text: "overflow button", xtype: "splitbutton"}]}); vaR Panel = new Ext. panel ({renderto: "div1", width: 600, height: 250, collapsible: True, layout: 'fit ', Title: 'demo toolbar', items: listview, tbar: tbar, bbar: bbar, rbar: [{iconcls: 'add16', tooltip: 'button 1'}, '-', {iconcls: 'add16', tooltip: {text: 'button 2', anchor: 'left' }}, {iconcls: 'add16'}, {iconcls: 'add16'}, '-', {iconcls: 'add16'}]}) ;});

Ii. Ext. toolbar. paging1. basic paging Toolbar controls

Ext. toolbar. Paging is a special toolbar that provides the dataset page flip function. Let's take a look at the implementation of store:

[JS]

 
VaR store = ext. create ('ext. data. store', {fields: ['intdata', 'stringdata', 'timedata'], pagesize: 15, proxy: {type: 'ajax ', URL: 'pagingtoolbar1json ', reader: {type: 'json', root: 'rows ', totalproperty: 'results' }}, autoload: true });
 

The corresponding server-side MVC code is as follows:

[C # MVC]

Public jsonresult pagingtoolbar1json (INT start, int limit) {var JSON = new {Results = basicdata. table. count, rows = basicdata. table. skip (START ). take (limit ). select (x => New {intdata = x. intdata, stringdata = x. stringdata, timedata = x. timedata. toshortdatestring ()}; return JSON (JSON, jsonrequestbehavior. allowget );}
 

Now we use the Ext. View. View Control in the previous article to place it in a panel. The Panel code is as follows:

[JS]

VaR Panel = ext. create ('ext. panel ', {renderto: "div1", frame: True, width: 535, autoheight: True, collapsible: True, layout: 'fit', title: 'pagination controls are used in view', items: ext. create ('ext. view. view ', {store: store, TPL: TPL, autoheight: True, multiselect: True, ID: 'view1', overitemcls: 'hover', itemselector: 'tr. data ', emptytext: 'No date', plugins: [Ext. create ('ext. UX. dataview. dragselector ', {}), ext. create ('ext. UX. dataview. labeleditor ', {dataindex: 'intdata'})]}, bbar: ext. create ('ext. toolbar. paging ', {store: store, displayinfo: True, items: ['-', {text: 'page 10th', Handler: function () {store. loadpage (10) ;}}]});

Note that the above Code adds a button to the page Toolbar Control. When you click this button, the dataset is automatically displayed on page 10.

Finally, let's take a look at the effect:

2. Expanded flip Control

We can use the UX extension to define paging controls of different styles. This effect is like the Three Kingdoms extension package. We can use the scroll control and progress bar control to display the position of the current paging item. In the Page Control Configuration section, add the following code:

[JS]

 
Plugins: Ext. Create ('ext. UX. slidingpager ',{})
 

Display Effect:

 
Plugins: Ext. Create ('ext. UX. progressbarpager ',{})
 

Display Effect:

Complete code:

[JS]

Ext. loader. setconfig ({enabled: true}); Ext. loader. setpath ('ext. UX ','/extjs/UX '); // Ext. loader. setpath ('ext. UX. dataview', '/extjs/UX/dataview'); Ext. onready (function () {var store = ext. create ('ext. data. store', {fields: ['intdata', 'stringdata', 'timedata'], pagesize: 15, proxy: {type: 'ajax ', URL: 'pagingtoolbar1json ', reader: {type: 'json', root: 'rows ', totalproperty: 'results' }}, autoload: true}); var TPL = new Ext. xtemplate ('<Table cellpadding = 0 cellspacing = 0 border = 1 width = pixel PX> ', '<tr> <TD colspan = 3 align = center> <B> <font color = Red> Ext. view. view data table taken from the server </font> </B> </TD> </tr> ',' <tr> <TD style = "width: 20% "> <B> NO. </B> </TD> <TD style =" width: 50% "> <B> message </B> </TD> <TD style =" width: 30% "> <B> date </B> </TD> ', '<TPL for = ". "> ', '<tr class = "data"> <TD class = "X-editable"> {intdata} </TD> <TD> {stringdata} </TD> <TD> {timedata} </TD> </tr> ', '</TPL>', '</table>'); var Panel = ext. create ('ext. panel ', {renderto: "div1", frame: True, width: 535, autoheight: True, collapsible: True, layout: 'fit', title: 'pagination controls are used in view', items: ext. create ('ext. view. view ', {store: store, TPL: TPL, autoheight: True, multiselect: True, ID: 'view1', overitemcls: 'hover', itemselector: 'tr. data ', emptytext: 'No date', plugins: [Ext. create ('ext. UX. dataview. dragselector ', {}), ext. create ('ext. UX. dataview. labeleditor ', {dataindex: 'intdata'})]}, bbar: ext. create ('ext. toolbar. paging ', {store: store, displayinfo: True, items: ['-', {text: 'page 10th', Handler: function () {store. loadpage (10) ;}}], plugins: ext. create ('ext. UX. slidingpager ', {}) // plugins: ext. create ('ext. UX. progressbarpager ',{})})});});

3. Ext. UX. statusbar. statusbar

This status bar control is also an extended support of Ext, but it is like a battle package. This is not a small improvement, but a brand new control.

First define a function, which sets the status bar to busy in the first two seconds and recovers after two seconds:

[JS]

 
VaR loadfn = function (BTN, statusbar) {BTN = ext. getcmp (BTN); statusbar = ext. getcmp (statusbar); BTN. disable (); statusbar. showbusy (); Ext. defer (function () {statusbar. clearstatus ({usedefaults: true}); BTN. enable () ;}, 2000 );};
 

Next, we will move several buttons to the status bar. The first setting status is incorrect:

[JS]

Handler: function () {var sb = ext. getcmp ('statusbar1'); sb. setstatus ({text: 'error! ', Iconcls: 'x-status-error', clear: True // automatic clearing status });}
 

The second setting status is loading:

[JS]

 
Handler: function () {var sb = ext. getcmp ('statusbar1'); sb. showbusy ();}
 

The third is the clear status:

[JS]

 
Handler: function () {var sb = ext. getcmp ('statusbar1'); sb. clearstatus ();}
 

Display effects, including loading, error, and clearing status:

Complete code:

Ext. loader. setconfig ({enabled: true}); Ext. loader. setpath ('ext. UX ','/extjs/UX '); Ext. onready (function () {var loadfn = function (BTN, statusbar) {BTN = ext. getcmp (BTN); statusbar = ext. getcmp (statusbar); BTN. disable (); statusbar. showbusy (); Ext. defer (function () {statusbar. clearstatus ({usedefaults: true}); BTN. enable () ;}, 2000) ;}; var Panel = new Ext. panel ({renderto: "div1", width: 600, he Ight: 250, collapsible: True, // layout: 'fit ', Title: 'demo status', items: [{xtype: "button", text: "test ", ID: "button1", Handler: function (BTN, statusbar) {loadfn ("button1", "statusbar1") ;}}], bbar: ext. create ('ext. UX. statusbar. statusbar ', {ID: 'statusbar1', defaulttext: 'read', text: 'No task', iconcls: 'x-status-valid', items: [{xtype: 'button ', text: 'set status', Handler: function () {var sb = ext. get CMP ('statusbar1'); sb. setstatus ({text: 'error! ', Iconcls: 'x-status-error', clear: True // automatic clearing status}) ;},{ xtype: 'click', text: 'set to load status', Handler: function () {var sb = ext. getcmp ('statusbar1'); sb. showbusy () ;},{ xtype: 'button ', text: 'clear', Handler: function () {var sb = ext. getcmp ('statusbar1'); sb. clearstatus () ;}}]}) ;});

[JS] Author: Li Pan (Lipan)
Source: [Lipan] (http://www.cnblogs.com/lipan/)
copyright statement: the copyright of this article belongs to the author and the blog Park. The detailed link of this article must be noted during reprinting; otherwise, the author will be held legally liable.