CMS image management (2)

First, display the tree directory. Before you start, create an upload directory in the solution to store uploaded images. To facilitate testing, add 2 and 1 directories to the upload directory.

Now, create a controller named foldercontroller. After adding necessary references, add a String constant to indicate the root directory:

Stringroot = "../upload ";

 

The virtual directory is used here because it can be directly converted to the actual directory by combining the submitted data.Note that when you put the directory on the server, the directory structure may be adjusted as needed, so the good way is in the project web. add a definition variable to the config file and extract the directory from the file to avoid code modification caused by directory changes.

Then, modify the index method to list, modify the returned result to jobject, and add the permission features and some variables used. The Code is as follows:

[Ajaxauthorize (roles = "normal user, system administrator")]

Publicjobject list ()

{

Bool success = false;

String MSG = "";

Jarray ja = new jarray ();

Int Total = 0;

Try

{

}

Catch (exception E)

{

MSG = E. message;

}

Returnhelper. myfunction. writejobjectresult (success, total, MSG, ja );

}

 

Now we need to consider how to return the directory structure. The key to the problem is how to build a unique ID for the directory to identify the directory. The name of each directory is unique only under its parent directory, so it cannot be used as an ID directly. Therefore, the parent directory must be added as the unique ID.

When the tree is expanded, node is used as the keyword by default to submit the tree node ID to the server. Therefore, on the server side, as long as data is extracted from the node, It is the directory to be listed, the Code is as follows:

Stringpath = request ["Node"]? "/";

Directoryinfodir = new directoryinfo (server. mappath (root + path ));

Foreach (var c in Dir. getdirectories ())

{

Ja. Add (New jobject {

Newjproperty ("ID", path + C. Name + "/"),

New jproperty ("text", C. Name ),

Newjproperty ("parentid", PATH)

});

Total ++;

}

Success = true;

 

Now, the application is generated and viewed in the browser. The file directory is displayed in 32.

Figure 32 tree directory

Switch to the picmanager. js file and add the operation button for the tree. In the configuration item definition of the Creation tree, add the following code:

Tbar :[

{Iconcls: "folder-Add", Handler: Me. onaddfolder, scope: me, tooltip: "add directory "},

{Iconcls: "folder-Delete", Handler: Me. ondeletefolder, scope: me, Disabled: True, tooltip: "delete directory "},

{Iconcls: "refresh", Handler: Me. onrefreshfolder, scope: me, tooltip: "Refresh directory tree "}

]

 

The above Code adds a toolbar on the top of the tree panel, which contains three buttons: add, delete, and refresh. To export the style code that displays the button and adds the button to app.css, the Code is as follows:

. Folder-add {

Background: URL ("../images/folder_add.png ")! Important;

}

. Folder-delete {

Background: URL ("../images/folder_delete.png ")! Important;

}

. Refresh {

Background: URL (".../extjs/resources/themes/images/default/GRID/refresh.gif ")! Important;

}

 

Of course, do not forget to copy the desired image to the corresponding directory.

Refresh the page and you will see three buttons at the top of the tree.

Now, two events are added to the tree, and 1st are viewready events. The function is to select 1st nodes after the tree is refreshed. The third option is to change the deletion button status when you select change. Here, the component cannot be searched for by ID, because this component will be reused, And the ID used will have a duplicate ID. You can use the down method to find the button. The only difference between the attributes of the delete button is iconcls and tooltip. The tooltip is used here. The Code is as follows:

Listeners :{

Scope: me,

Viewready: function (panel ){

VaR view = panel. getview ();

View. getselectionmodel (). Select (0 );

},

Selectionchange: function (model, sels ){

VaR me = this;

Me. Tree. Down ("button [tooltip = Delete Directory]"). setdisabled (sels. Length = 0 );

}

}

 

Refresh the page now. The "root directory" is displayed in the tree, and the delete button is enabled.

There are two methods to complete the add operation. You can use the default directory name to create a directory and then change the directory name. The 2nd method is to display a prompt box asking the user to enter the directory name and then create a directory. Simply put, here we will use the 1st method. At the bottom of picmanager. JS, add an onaddfolder method. The first thing to do is to obtain the selected node so that you can know where to create a directory. The Code is as follows:

Onaddfolder: function (){

VaR tree = This. Tree,

Parent = tree. getselectionmodel (). getselection () [0];

If (! Parent ){

Parent = tree. getrootnode ();

}

}

 

A judgment is added to prevent the root directory from being used as the parent directory of the new directory when no directory is selected.

Create a new folder model and save it. The Code is as follows:

Varrec = new folder ({

Text: "Creating Folders ",

ID :"",

Parentid: parent. Data. ID

});

Rec. Save ({

URL: "folder/Add ",

Parentnode: parent,

Success: function (REC, OPT ){

If (OPT. parentnode. isexpanded ())

Opt. parentnode. appendchild (REC );

Else

Opt. parentnode. Expand ();

},

Failure: simplecms. modelexception,

Scope: Tree

});

 

In the code, you will find that a parentnode keyword is added to the configuration object in the SAVE method, which points to the parent node. The advantage is that after the directory is successfully added to the server, you can directly call parentnode to add a subnode through its appendchild method.

Now, add an add method to the server folder controller. In the previous article, we can know that the data will be submitted with the data keyword in the form of JSON data. Therefore, in the method, you must first extract data from the data, convert it to jarray, and then obtain the data in jarray for processing. The specific code is as follows:

[Ajaxauthorize (roles = "normal user, system administrator")]

Publicjobject add ()

{

Bool success = false;

String MSG = "";

Jarray ja = NULL;

Try

{

String data = request ["data"]? "";

If (string. isnullorempty (data ))

{

MSG = "incorrect data submission. ";

}

Else

{

Ja = jarray. parse (data );

If (JA. Count> 0)

{

Jobject Jo = (jobject) JA [0];

String parentdir = (string) Jo ["parentid"];

String Foldername = (string) Jo ["text"];

String dirpath = server. mappath (root + parentdir );

If (directory. exists (dirpath + Foldername ))

{

MSG = "the directory already exists ";

}

Else

{

Directoryinfo di = directory. createdirectory (dirpath + Foldername );

Jo ["ID"] = parentdir + Foldername + "/";

Success = true;

}

}

Else

{

MSG = "incorrect data submission. ";

}

}

}

Catch (exception E)

{

MSG = E. message;

}

Return helper. myfunction. writejobjectresult (success, 0, MSG, ja );

}

}

 

In the Code, if the directory already exists, an error message is returned, indicating that the directory already exists. Otherwise, create a new directory and modify the directory ID. You must modify the ID to return the result. Otherwise, the ID of the new node is empty, and a problem occurs when you create a directory under it.

The delete operation is similar to the code used to delete a user. The specific code is as follows:

Ondeletefolder: function (){

VaR me = This,

Tree = me. Tree,

Rs = tree. getselectionmodel (). getselection ();

If (Rs. length> 0 ){

Rs = Rs [0];

If (Rs. Data. Root ){

Ext. msg. Alert ("delete folder", "root directory cannot be deleted! ");

Return;

}

VaR content = "are you sure you want to delete the directory" + Rs. Data. Text + ""? <Br/> <P style = 'color: red'> Note: all files and subdirectories in the directory are deleted. </P> ";

Ext. msg. Confirm ("delete directory", content, function (BTN ){

If (BTN = "yes "){

VaR rs = This. getselectionmodel (). getselection ();

If (Rs. length> 0 ){

Rs = Rs [0];

Rs. Remove ();

This. Store. Sync ({

Success: function (E, OPT ){

Varme = this;

Me. Store. commitchanges ();

Me. View. Select (0 );

Me. View. Focus (false );

},

Failure: simplecms. modelexception,

Scope: Tree

});

}

}

}, Tree)

}

},

 

The following code adds a delete Method to the folder controller. The code is similar to add. The difference is that, after determining the existence of a directory, the delete method of the directory object is called to delete the files and Their subdirectories in the directory. The Code is as follows;

[Ajaxauthorize (roles = "normal user, system administrator")]

Publicjobject Delete ()

{

Bool success = false;

String MSG = "";

Jarray ja = NULL;

Try

{

String data = request ["data"]? "";

If (string. isnullorempty (data ))

{

MSG = "incorrect data submission. ";

}

Else

{

Ja = jarray. parse (data );

If (JA. Count> 0)

{

Jobject Jo = (jobject) JA [0];

String parentdir = (string) Jo ["parentid"];

String Foldername = (string) Jo ["text"];

String dirpath = server. mappath (root + parentdir );

If (directory. exists (dirpath + Foldername ))

{

Directory. Delete (dirpath + Foldername, true );

Success = true;

}

Else

{

MSG = "the directory has been deleted ";

}

 

}

Else

{

MSG = "incorrect data submission. ";

}

}

}

Catch (exception E)

{

MSG = E. message;

}

Returnhelper. myfunction. writejobjectresult (success, 0, MSG, ja );

}

 

Next, complete the refresh operation. It is not difficult to reload the store. The Code is as follows:

Onrefreshfolder: function (){

This. Tree. Store. Load ();

}

 

Now, the directory operation is left with the edit operation. This is complicated and will be discussed later.

 

BTW: I should have put the code on the Sina microdisk.

Source code: http://vdisk.weibo.com/s/g7Z33