Extaspnet application skills (21)-ext4jslint overall framework

Introduction

I posted an article some time ago.ArticleExt4jslint, an open-source project based on extaspnet, is also the first small application I made with extaspnet. I still have some application skills. I will share some of the following articles with you.

Ext4jslint uses extaspnet to display the result of jslint-toolkit.
Jslint-Toolkit is a small project that uses rhino and jslint. It can check all the Javascript in a folder and display friendly check results.
I wrote an article about jslint-toolkit.

Interface

The entire page is divided into four parts:

• The title bar above and the toolbar
• Which JavaScript files are displayed in the tree menu on the left?
• The table in the middle shows the error list found in a Javascript file.
• IFRAME on the right to display JavascriptSource code

Aspx label Definition

<Ext: pagemanager autosizepanelid = "borderlayout1" runat = "server"> </ext: pagemanager> <Ext: borderlayout id = "borderlayout1" showborder = "false" runat = "server"> <regions> <Ext: region ID = "region1" Height = "60px" showborder = "false" showheader = "false" position = "TOP" layout = "fit" runat = "server"> <toolbars> <Ext: toolbar id = "toolbar1" position = "bottom" runat = "server"> <items> <Ext: button id = "btnexpandall" iconu RL = "~ /Images/expand-all.gif "text =" Expand All "enablepostback =" false "runat =" server "> </ext: button> <Ext: button id = "btncollapseall" iconurl = "~ /Images/collapse-all.gif "text =" collapse all "enablepostback =" false "runat =" server "> </ext: button> <Ext: toolbarseparator id = "toolbarseparator1" runat = "server"> </ext: toolbarseparator> <Ext: button id = "btncriticalerrors" iconurl = "~ /Images/exclamation.png "text =" only critical errors "onclick =" btncriticalerrors_click "enablepress =" true "runat =" server "> </ext: button> </items> </ext: toolbar> </toolbars> <items> <Ext: contentpanel showborder = "false" showheader = "false" bodystyle = "background-color: # 1c3e7e; "id =" contentpanel1 "runat =" server "> <Div style =" font-size: 20px; color: White; font-weight: bold; padding: 3px 10px; "> <a href = ". /default. aspx "style =" color: White; "> ext4jslint </a> </div> </ext: contentpanel> </items> </ext: region> <Ext: region ID = "regionleft" split = "true" width = "200px" showheader = "false" enablecollapse = "true" layout = "fit" position = "Left" runat = "Server "> <items> <Ext: tree runat = "server" id = "tree1" showborder = "false" showheader = "false" autoscroll = "true" enablearrows = "true" onnodecommand = "tree1_nodecommand"> </EXT: tree> </items> </ext: region> <Ext: region ID = "regioncenter" showheader = "false" position = "center" layout = "fit" runat = "server"> <items> <Ext: grid id = "grid1" runat = "server" showborder = "false" showheader = "false" enablecheckboxselect = "false" enablerownumber = "false" enablemultiselect = "false" onrowdatabound = "grid1_rowdatabound "onprerowdatabound =" gridjavasprerowdatabound "Title =" Grid "> <columns> <Ext: boundfield datafield = "line" width = "45px" headertext = "line"/> <Ext: boundfield datafield = "reason" expandunusedspace = "true" headertext = "reason"/> </columns> </ext: Grid> </items> </ext: region> <Ext: Region ID = "regionright" showheader = "false" split = "true" iframeurl = ". /source.htm "enableiframe =" true "iframename =" Main "position =" right "width =" 400px "runat =" server "> </ext: region> </regions> </ext: borderlayout>

After several articles on appbox, I believe you are familiar with the aspx label declaration.

If you are not familiar with the labels, refer to this article: extaspnet application skills (13th)-Background homepage (IFRAME framework)

Show all and fold all

In the above label declaration, you should note that both the btnexpandall and btncollapseall buttons define the attribute enablepostback = "false", that is, clicking these two buttons will not generate a PostBack event.

We need to use JavaScript on the client to complete this task.
--------------- Slow. Aren't you calling it "No JavaScript?
Yes, this task can also send back the page to update the left Tree, because the entire process is Ajax, so the user experience is also good.
Here we only provide another way to implement the problem, because JavaScript achieves better performance without server interaction.

Let's take a look at the definition of javascript:

Function onready () {expandcollapsetree ();} function expandcollapsetree () {var tree = ext. getcmp ("<% = tree1.clientid %>"); var btnexpandall = ext. getcmp ("<% = btnexpandall. clientid %> "); btnexpandall. on ("click", function () {tree. expandall () ;}); var btncollapseall = ext. getcmp ("<% = btncollapseall. clientid %> "); btncollapseall. on ("click", function () {tree. collapseall ();});}
 

The onready function is a naming convention of extaspnet. The function named after this name will be executed after the page is loaded. We can see the page sourceCodeThere are related definitions:

The Ext. getcmp function is defined in extjs and is used to obtain the extjs component represented by this node by the node ID. Similarly, expandall and collapseall are the tree sample methods, which are also defined in extjs.

I don't want to write JavaScript!

------ No problem!
Note: The extaspnet version must be later than v2.1.1. You can download and compile the latest version from SVN.

I don't want to write JavaScript, but want to fold and expand all Tree nodes on the client (I don't want to send back and forth pages because of this simple function:

 
Protected void page_load (Object sender, eventargs e) {If (! Ispostback) {loaddata (true) ;}} private void loaddata (bool showallerrors) {btnexpandall. onclientclick = tree1.getexpandallnodesreference (); btncollapseall. onclientclick = Response ();}
 

Isn't it very easy? Just a few C # codes will take JavaScript for a long time.

In fact, this is not mysterious, but extaspnet helped you complete the task of manually writing JavaScript code. You can see the HTML source code:

The next chapter describes how to generate the left-side tree control from a JSON file.

Download all source code