CMS image management (1)

Image management should be used in two places: one is image management in the tab, and the other is embedded in the window for inserting an image when editing the article content. Therefore, it is more convenient to make image management an extension. Of course, you can also make it into the MVC model without argument or discussion.

Remember, extensions should be written in the scripts \ extjs \ UX directory, because in the path settings, the extension directory points to here. Create a script file named picmanager. js in this directory.

The main interface of image management is divided into two parts. The file directories are listed in the tree on the left. To add, delete, and edit directories, the files in the directory are displayed in preview mode on the right, the main function is to upload and delete files.

To upload a file, you can use swfupload to upload multiple files at a time and download them to http://code.google.com/p/swfupload/to the latest version. The example above uses the version 2.5.0 beta. Download the swfupload_v250_beta_3_samples.zip file, decompress the file, and copy the swfupload directory under the demos directory to the scripts directory of the solution. Then download the swfupload.swf.v2.5.0.beta3.2.zip file to overwrite the file in the swfupload directory.

Now you can write a script file for image management. The image management interface will be expanded from the container to use the border layout. The Code is as follows:

Ext. Define ('ext. UX. picmanager ',{

Extend: 'ext. Container. iner ',

Alias: 'widget. picmanager ',

Layout: "border ",

 

Initcomponent: function (){

VaR me = this;

Me. callparent (arguments );

}

});

 

Now, complete the directory tree on the left. Treestore must be used to use the tree. Treestore can define models or models, depending on the situation. Currently, the parent directory and directory name must be provided for adding, editing, and deleting directories. The directory name can use text, and the parent directory is an additional field. Directory operations are simple and can be completed directly in the model. Therefore, defining a model is a good method. The model definition can be an independent file or defined in the initcomponet method. If you define in an independent file, you must add the requires configuration item reference model in the extension. This is defined in the initcomponet method. The Code is as follows:

Ext. Define ("folder ",{

Extend: "Ext. Data. model ",

Fields: ["text", "ID", "parentid"],

Validations :[{

Type: 'presence ',

Field: 'text'

}],

Proxy :{

Type: 'ajax ',

API :{

Read: 'Folder/list ',

Create: 'Folder/add ',

Destroy: 'Folder/delete ',

Update: 'Folder/edit'

},

Reader :{

Messageproperty: "MSG ",

Type: 'json ',

Root: "data"

},

Writer :{

Type: "JSON ",

Encode: True,

Root: "data ",

Allowsingle: false

},

Listeners :{

Exception: simplecms. proxyexception

}

}

});

 

In the definition, parentid is used to record the parent directory. Add a verification item. The directory name cannot be blank. In the proxy definition, the definitions of reader and writer can standardize the input and output of data, which is the same as the definitions in the user. The API of the proxy defines the operation submission path.

The following code defines treestore:

Me. treestore = ext. Create ("Ext. Data. treestore ",{

Root: {ID: "/", text: "root directory", expanded: true },

Model: "folder"

});

 

In addition to models, treestore defines the root node. Here, the root node ID uses "/" to convert the virtual path to the actual path in the background.

Then define the tree panel. The Code is as follows:

Me. Tree = ext. widget ("treepanel ",{

Title: "file directory", Region: "West", collapsible: True, rootvisible: True,

Width: 250, minwidth: 100, maxwidth: 500, split: True, store: Me. treestore

});

 

Because border layout is used, you need to mix the border layout configuration items. The root directory is also set, because the system will allow uploading files in the root directory.

Now you can preview the file on the right. Start with the model. The Code is as follows:

Ext. Define ('file ',{

Extend: 'ext. Data. model ',

Fields :[

'Filename', 'path ',

"Modify ",

{Name: "size", type: "int "}

]

});

 

The field here is required except for the file name and path. Other fields can be defined according to their own display content. The last editing time and file size are displayed here.

The following code defines the store:

Me. filestore = ext. Create ("Ext. Data. Store ",{

Batchactions: false,

Remotefilter: false,

Remotesort: false,

Pagesize: 50,

Model: "file ",

Proxy :{

Type: "ajax ",

API :{

Read: 'file/list ',

Destroy: 'file/delete'

},

Reader :{

Type: 'json ',

Root: "data"

},

Writer :{

Type: "JSON ",

Encode: True,

Root: "data ",

Allowsingle: false

},

Listeners :{

Exception: simplecms. proxyexception

}

}

});

 

Here, the API does not have the create and update configuration items because files are uploaded and cannot be submitted in this way, but files are generally not updated, but deleted before being uploaded.

Next, use the data view to display the file. The Code is as follows:

Me. dataview = ext. widget ("dataview ",{

Store: Me. filestore, autoscroll: True,

Multiselect: True, selecteditemcls: "selected", itemselector: 'div. imagelist ',

Overitemcls: "overitem", trackover: True,

TPL :[

'<TPL for = "."> ',

'<Div class = "imagelist"> ',

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

'<P class = "ellipsis"> {filename} </P> ',

'</Div> ',

'</TPL> ',

'<Div class = "X-clear"> </div> ',

{

Filesize: function (size ){

If (size <1024 ){

Return V + "Byte ";

} Else if (size: <1048576 ){

Return (math. Round (size * 10)/1024)/10) + "kb ";

} Else {

Return (math. Round (size * 10)/1048576)/10) + "MB ";

}

}

}

]

});

 

The key to defining a data view is the template definition. This document provides detailed descriptions and examples, which will not be detailed here. Here, a filesize method is added to the template to convert the display format of the file size.

Because a view is not a panel and has no toolbar components, you need to set a panel outside it to place the toolbar. Therefore, there is no border layout configuration item in the view definition.

The Code is as follows:

Me. Items = [

Me. Tree,

{Title: "Image File", Region: "center", layout: 'fit', items: [Me. dataview]}

];

 

Now you can debug the interface to see how it works. Switch to the view definition of the main panel (mainpanel. JS), add the layout for image management, and set the layout type to fit. Switch to the Controller of the main panel, delete the console statement in the activate method of image management, and add the following code:

Varview = ext. Create ('ext. UX. picmanager ',{});

Panel. Add (View );

 

Note that the first parameter of the create method must be a string so that ext can automatically load class files. You cannot use the widget method to create a class. Because the class has not been registered yet, ext does not know that the class named picmanager points to, so it will not automatically load the class. If you do not use this method, you can add the requires configuration item to the Controller to specify that the class is to be loaded, but this is contrary to the original intention.

To facilitate debugging, you can add the configuration item activetab in the main panel view definition to specify the tab displayed for initial activation, so that you do not need to click the tab each time you debug it. Image management is the second tab, so the current index is set to 1.

Open picture management in the browser and you will see the picture shown in 31. The basic framework is set up, and the rest is the implementation function.