CMS image management (3)

Now you need to edit the directory. Because directory editing only changes the directory name, you can use the cellediting plug-in to complete the work.

According to the example in section 11.3.2, it is not difficult to do this. First, add the following statement to the definition of the directory tree to hide the column title:

Hideheaders: True,

 

Add the Plugins configuration item to configure the cellediting plug-in. Because the root directory does not run editing, you need to listen to the beforeedit event. If the selected node is the root directory, false is returned and editing is not allowed. The Code is as follows:

Plugins: [{ptype: "cellediting ",

Listeners :{

Beforeedit: function (edit, e ){

If (E. Record. isroot () returnfalse;

}

}

}],

 

Continue to define columns configuration items and add edit controls for the directory. The Code is as follows:

Columns :[

{Xtype: "treecolumn", dataindex: "text", flex: 1,

Field: {allowblank: false, selectonfocus: true}

}

],

 

Finally, define the viewconfig configuration item to cancel the default double-click operation on the tree node. The Code is as follows:

Viewconfig :{

Toggleondblclick: false

},

 

Now, we have to consider the submitted question after modification. After the cellediting plug-in is edited, the edit event is triggered. Therefore, it is most appropriate to submit data at this time. The Code is as follows:

Edit: function (edit, e ){

E. Record. Save ({

Success: function (REC, OPT ){

Opt. Records [0]. setid (OPT. Records [0]. Data. parentid + opt. Records [0]. Data. Text + "/");

Opt. Records [0]. Commit ();

},

Failure: function (E, OP ){

Op. Records [0]. Reject ();

Ext. msg. Alert ("error occurred", op. Error );

}

});

}

 

In the edit event, its 2nd parameters return the modified record, so you can directly call the Save method of the model to submit data. After the submission is successful, you need to modify the record ID based on the returned data and call the commit method to confirm the modification. If the modification fails, call the reject method to cancel the modification.

 

Now switch back to the folder controller to complete the editing operation on the server side code. The basic process is similar to that of the add method. Therefore, you can copy and paste the Code directly, and modify the method name and the specific process, the Code is as follows:

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

Publicjobject edit ()

{

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

String oldpath = server. mappath (root + (string) Jo ["ID"]);

If (directory. exists (oldpath ))

{

If (directory. exists (dirpath + Foldername ))

{

MSG = "the directory already exists ";

}

Else

{

Directory. Move (oldpath, dirpath + Foldername );

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

Success = true;

}

}

Else

{

MSG = "the directory to be modified does not exist ";

}

 

}

Else

{

MSG = "incorrect data submission. ";

}

}

}

Catch (exception E)

{

MSG = E. message;

}

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

}

 

Now, all the operations on the directory are complete. If you want to improve the functions, it is best to add the directory drag function. I will not do this. If you are interested, you can do it according to the content of the book.

 

Now, you need to click the tree node to display the image files under the directory in the image list. All you need to do is to listen to the selectionchange event of the tree. The sample code in section 11.3.4 of this reference is as follows:

Selectionchange: function (model, sels ){

VaR me = this;

If (sels. length> 0 ){

VaR rs = sels [0],

Store = me. filestore;

Store. Proxy. extraparams. Path = Rs. Data. ID;

Store. loadpage (1 );

}

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

 

}

 

Now we can complete the control of the returned file data and create a controller named filecontroller. After necessary references are added, add a root string variable like the folder controller to specify the root directory. Because the list method of the file controller is similar to that of the folder, you can directly copy and modify it. The modified 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

{

Int start = 0;

Int. tryparse (request ["start"], out start );

String Path = request ["path"]? "/";

Directoryinfo dir = newdirectoryinfo (server. mappath (root + path ));

Total = dir. getfiles (). Count ();

Foreach (var c indir. getfiles (). orderbydescending (M => M. lastwritetime). Skip (start). Take (50 ))

{

Ja. Add (New jobject {

Newjproperty ("path", PATH ),

Newjproperty ("FILENAME", C. Name ),

Newjproperty ("modify", C. lastwritetime. tostring ("yyyy-mm-DDHH: mm ")),

Newjproperty ("size", C. length)

});

}

Success = true;

 

}

Catch (exception E)

{

MSG = E. message;

}

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

}

 

From the code, we can see that it is really convenient to use LINQ, and paging is just a piece of cake. Currently, only the last modified time sorting is set for the time being. Wait and study how to modify the sorting.

Currently, you cannot perform a test because you need to solve the problem of displaying thumbnail images. In this example, you do not need to generate a thumbnail for each uploaded image. Just upload it directly, because nuget has a name named imageresizer. the MVC package is very easy to use. It automatically generates thumbnails based on requests. Choose tool> program package management> nuget package for solution management from the main menu. Open the manage nuget package window, search imageresizer, find imageresizer. MVC, and select install.

After installation, you must configure it in the web. convfig file. Open the webconfig file. First, add the following code in the configuration section to add a configuration section for imageresize:

<Configsections>

<Section name = "resizer" type = "imageresizer. resizersection" requirepermission = "false"/>

</Configsections>

 

Then add the following Configuration:

<Resizer>

<Plugins>

<! -- So all the sample projects canshare the same image folder -->

<Add name = "virtualfolder" virtualpath = "~ /Thumbnail/"physicalpath =". \ upload "/>

<! -- So MVC doesn' t prevent the imageresizer from working -->

<Add name = "mvcroutingshim"/>

<Add name = "diskcache"/>

</Plugins>

</Resizer>

 

In the configuration, virtualfolder associates the virtual directory with the physical directory. The virtualpath is the virtual directory to be defined. /Thumbnail/", and the corresponding physical directory physicalpath is". \ upload ".

The purpose of diskcache configuration is to enable the disk cache, which will cache the generated thumbnails on the disk. In this way, you do not need to access the same thumbnails every time.

Add the following configuration in the system. Web segment:

<Httpmodules>

<Add name = "imageresizingmodule" type = "imageresizer. interceptmodule"/>

</Httpmodules>

 

How does it work? Switch back to the picmanager. js file and find the template defined by dataview. The image is displayed as follows:

modification date: {modify} <br> size: {size: This. filesize} "/> <br/>

 

In the path defined by Src, the width and height parameters are added after the file name. While imagesize checks the accessed virtual path in the route, according to the width and height definitions, the image is converted to the width and height required by the thumbnail, and then returned to the client, which is very convenient.

Copy some images to the root directory, and then generate a new solution. Open image management in the browser and you will see the effect of 33.

Oh, no! Dataview displays an error. The style of the entries defined in the rule. Add the file to the app.css file as follows:

. Imagelist {float: Left; display: block; width: 180px; Height: 200px; padding: 10px ;}

. Selected {background-color: # d3e1f1 ;}

. Overitem {background-color: # e7e7e7 ;}

. Imagelistp {

Text-align: center;

Overflow: hidden;

Line-Height: 22px;

}

. Ellipsis {-o-text-overflow: ellipsis;-moz-binding: URL ('ellipsis. XML # ellipsis '); white-space: nowrap; overflow: hidden ;}

. X-View-Selector {

Position: absolute;

Border: 1px dotted # 3399bb;

}

 

Refresh the page. 34. The view is displayed normally.

 

Now, we are here today.

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