CMS: Document Management View (1)

The view of document management is not much different from the file management. It is divided into two parts. The left side of article management is a tree-like category list, and the right side is a list of articles displayed in Grid form. Basically, there are a lot of repetitive work. Using sencha effecect as a visual tool is a good choice. If the company has good profits, we strongly recommend that you use it, the price of a single development kit is USD 399, about RMB 2800, which can be easily calculated. At least, it can be deducted from multiple programmers.

A little more nonsense. Back to the question, create a content directory under the scripts \ app \ view directory to store the view required for Article management, the main view includes the main view of article management, the category editing window, and the article editing window.

Next, create a file named view. js in the content directory to define the main view. The basic structure code is as follows:

Ext. Define ('simplecms. View. content. view ',{

Extend: 'ext. Container. iner ',

Alias: 'widget. contentview ',

Layout: "border ",

 

Initcomponent: function (){

VaR me = this;

 

Me. callparent (arguments );

}

 

});

 

The next step is to add components step by step. First, define the tree. The Code is as follows:

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

Title: "Article category", Region: "West", collapsible: True, rootvisible: True, store: "categoriestree ",

Width: 200, minwidth: 100, split: True

});

 

The following is the grid code:

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

Title: "Article list", Region: "center ",

Store: "contents ",

Seltype: "checkboxmodel ",

Selmodel: {checkonly: false, mode: "multi "},

Columns :[

{Text: 'number', dataindex: 'contentid', width: 80 },

{Text: 'title', dataindex: 'title', flex: 1 },

{Xtype: "datecolumn", text: 'creation time', dataindex: 'created ', format: "Y-m-d h: I: s", width: 150 },

{Text: 'sortorder', dataindex: 'sortorder', width: 80 },

{Text: 'clicks ', dataindex: 'hits', width: 80 },

{Text: 'tag', dataindex: 'tags', width: 150}

]

});

 

GRID has always been used to selecting rows by using the check box. In other aspects, it should not be a problem.

 

Finally, place the tree and grid in the container. The Code is as follows:

Me. Items = [Me. Tree, me. Grid];

 

Now, you can test the effect. However, you can modify the controller, switch to the article management controller, create a view in the init method, and add it to the Panel. This should be very familiar, you have done this in user management and image management. If you forget it, copy it and modify the created view. The Code is as follows:

VaR me = This,

Panel = me. getcontentpanel (),

View = ext. widget ("contentview ");

Panel. Add (View );

 

The code panel uses the getcontentpanel method and returns to the Document Management Panel. Therefore, you need to add references. The Code is as follows:

Refs :[

{Ref: "contentpanel", selector: "# contentpanel "},

],

 

Of course, do not forget to add a view in the Views configuration item. The Code is as follows:

Views :[

'Content. view'

],

After the browser is opened, nothing is displayed on the screen, and two "layout run failed" errors are displayed in firebug, indicating that there is a layout problem. This was also encountered before, that is, the layout of the article Management Panel is not defined in the main panel definition. Now, switch to the main panel view and add the layout definition to the Panel definition managed by the article, the layout uses fitlayout.

Refresh the browser to see the effect of 40.

 

Figure 40 Document Management page

Now we can complete the classification tree function and display the tree first. Before you finish, use the object framework to convert tables in the database to objects. Add a new project in solution, as shown in Figure 41. In the Add new project window, select the data template, and then select ADO in the middle. net object data model, change the name to simplecms. after edmx, click Add.

 

Figure 41 add an object framework

In the displayed window of the Object Data Model Wizard, select generate from database and click Next.

 

Figure 42 Object Data Model Wizard window

In the Select data connection window shown in switch to 43, you can click the new connection button to create a connection. However, the default applicationservices connection is defined in the configuration file and can be used directly without creating a new connection. Select "Yes, include sensitive data in the connection string" and click "Next. Of course, if you do not like to include sensitive data such as user names and passwords in the web. config file, you can process the data separately.

 

Figure 43 select data connection

In the select database object window shown in Figure 44, expand the table in the tree, select four tables starting with "T _", and click the finish button to end the wizard.

 

Figure 44 select a database object

After the data is generated, the data structure shown in Figure 45 is displayed in the solution.

 

Figure 45 Data Structure

When you see the graph, you will be wondering why you have selected four tables. How can we only see three objects here? This is because the join tables of t_content and t_tag are only many-to-many relationships in objects and are hidden in objects. Therefore, they do not need to be like databases, explicitly represents an object.

Add an association for t_category so that the parent node can find its child nodes. Right-click the t_category graph and choose add> join from the shortcut menu. In the Add join dialog box shown in 46, modify the object on the right to t_category, then change the left-side multiple to "0... 1 (zero or one )". Then modify the navigation attribute on the left to Childs, so that the child node can be accessed through the childs attribute. Then, modify the navigation attribute on the right to parent, so that the parent node can be accessed through the parent attribute. Remove the check box and click OK to add the association.

Figure 46 add Association dialog box

Edit the reference constraint in the attribute list on the right. In the reference constraint dialog box of 47, set the subject to t_category, and set the dependency attribute of categoryid to parentid in the table.

Figure 47 reference constraints dialog box

Save the solution, create a new server controller category, add necessary references, and add a read-only private variable DC to access the simplecmsentities instance. The Code is as follows:

Private readonly simplecmsentities Dc = newsimplecmsentities ();

 

Store of the Classification Tree calls the list method. Therefore, the index method is changed to the list method, and corresponding permissions, returned objects, and basic structure code are added. 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

{

Success = true;

 

}

Catch (exception E)

{

MSG = E. message;

}

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

}

 

To expand a node in the tree, the node is used as the parameter to submit the node ID. Therefore, to extract data, you must first extract the ID from the node. The Code is as follows:

Intid =-1;

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

 

Because the root node ID is-1 when the store is defined, the search results are processed in two cases. The Code is as follows:

Iqueryable <t_category> q = NULL;

If (ID =-1)

{

Q = Dc. t_category.where (M => M. hierarchylevel = 0 & M. State = 0). orderby (M => M. Title );

}

Else

{

Q = Dc. t_category.where (M => M. parentid = ID & M. State = 0). orderby (M => M. Title );

}

In the Code, when the ID is-1, it searches for records with 0 layers. Otherwise, it searches for records with the parentid equal to the ID.

There is a problem here, because the records are sorted according to the title, so the class is not classified and you do not know where to go. Therefore, in order to keep the category at the top, it is best to exclude it during the query and add it to the result. The code is modified as follows:

Q = Dc. t_category.where (M => M. hierarchylevel = 0 & M. categoryid! = 10000 & M. State = 0). orderby (M => M. Title );

 

Now we need to write data to Ja. Because we need to write objects in the same format multiple times, it is better to separate the writing objects into a method. The Code is as follows:

Privatejobject writenode (int id, string text, int parentid, bool isleaf)

{

Jobject Jo = new jobject

{

New jproperty ("ID", ID ),

New jproperty ("text", text ),

Newjproperty ("parentid", parentid ),

New jproperty ("leaf", newjvalue (isleaf ))

};

If (! Isleaf)

{

Jo. Add (New jproperty ("children", new jarray ()));

}

Return Jo;

}

 

The Code shows that the method has four parameters. The first three parameters are the ID, text, and parentid fields required by the return node. Isleaf is used to determine whether a node has subnodes. If yes, add a children attribute so that a plus sign can be seen on the client and expanded.

Now, add the following two nodes under the query statement with the ID equal to-1:

Ja. Add (writenode (-99, "all",-1, true ));

Ja. Add (writenode (10000, "Unclassified",-1, true ));

Add all nodes to make it easier to view data. Unclassified is required. Note the IDs of the two nodes.

Then, the node is output cyclically after the statement is determined. The Code is as follows:

Foreach (var c in Q)

{

Bool leaf = C. Childs. Count ()> 0? False: true;

Int pid = C. parentid = NULL? -1 :( INT) C. parentid;

Ja. Add (writenode (C. categoryid, C. Title, PID, leaf ));

}

 

In the code, the association set just now is used to determine whether the node has a subnode by counting the number of subnodes.

Generate a solution and refresh the page. Oh, the root node is not automatically opened and hidden. Switch to the store definition of the tree first, and add an expanded configuration item for the root node. The value is true and it is automatically expanded. Switch to the view definition and set the rootvisible configuration item to false. These things often happen during the copy and paste process.

Now, refresh the page and you will see the 48 effect.

Figure 48 display result of the document category tree

In this way, the display of the tree is complete.

Source code download: http://vdisk.weibo.com/s/hL6up