Ext.toolbar.Toolbar Toolbar control instances in EXTJS4

. Add menus, buttons, search features to the toolbar
We use the ListView control described above as the data display, put the ListView into a panel control, then add the toolbar to the top of the panel, and in the toolbar to implement the dataset's server-side search function.

First we define a data model and store:

The code is as follows

Copy Code

[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 ', direction: ' DESC '}, Autoload:true }); Store.load ();

Server-side JSON output code:

The code is as follows

Copy Code

[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); }

Then define a ListView, from the last chapter

Now we're going to define a toolbar that adds tool buttons, plain text, split lines, and menus to the toolbar, and also implements search functionality:

The code is as follows

Copy Code

[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 ("Hint", "Message from menu"); } } ] } }, "->", "keywords:", filed1, { Text: "Search", Handler:function () { Store.load ({params: {Keyword:filed1.getValue ()}}); } } ] });

Notice here that we passed the keyword keyword to the C # action parameter through the load store:

The code is as follows	Copy Code
[Js] { Text: "Search", Handler:function () { Store.load ({params: {Keyword:filed1.getValue ()}}); } }

Finally we define a panel and add ListView and toolbar to the Panel, noting that Tbar represents the top of the toolbar.

code is as follows	copy code
[Js] & nbsp;   var panel = new Ext.panel ({         renderto: "Div1",         width:600,         height:250,         collapsible:true,         Layout: ' Fit ',         title: ' Demo toolbar ',          Items:listview,         tbar:tbar    };

Well, let's see how it works:

We enter the keyword "6" After viewing the filter effect: