Step by step use Ext js mvc and Asp. Net MVC 3 to develop a simple CMS background management system and create a Viewport (2)

Now we need to consider how to load the content in the tab. Although the default deferredRender value for delayed rendering on the tab is true), it will pre-load all classes. Therefore, when there are many class files, loading time is a major problem. This can also be solved through SDK packaging, but it should be considered in the design stage. Another good solution is to use only labels on the tab page, instead of loading the content using its subject. In addition, a container is used internally to use CardLayout as the layout, similar to the example in the last chapter of the book, you can load and switch the panel content.

Here, the content page is loaded only when the tab is activated. Therefore, you need to listen to the activate event of the tab. In this way, the problem is whether to listen to the activate event on the tab panel or to listen to the activate event on each independent tab. If you are listening in the tab panel, you need to determine which tab is on the current tab and whether you need to load the content. Because the detailed information page of the article is also a tab, you need to make judgments. This is because the writing method is simplified, but there are too many judgments to be made, which is not a very good method. Monitoring on a specific tab does not require any judgment, and you can set the event to a one-time event, that is, set the single configuration item of the event to true during monitoring, in this way, the listening event will be automatically deleted after it is executed once and no longer listened.

To add an activate event to each tab in Viewport, it does not meet the MVC requirements. Yes, the exit button at the top has already violated the requirements. Therefore, modifications are required. However, I also thought about whether to be so rigid in developing applications? Especially for simple operations such as exit and flexible languages such as Javascript. If we discuss this, it makes no sense to compete with the language. You can master it flexibly based on your habits.

To implement MVC of tabs, first create a file named MainPanel. js under the view directory and define a control that extends to the tag panel in the file. The basic code is as follows:

Ext. define ('simplecms. view. MainPanel ',{

Extend: 'ext. tab. Panel ',

Alias: 'widget. mainpanel ',

Flex: 1,

 

InitComponent: function (){

Var me = this;

 

Me. callParent (arguments );

}

});

 

It is necessary to use the configuration item alias to define an alias for the component. Otherwise, xtype cannot be used to create the component in Viewport. Here, the alias is mainpanel. In the initComponet method, copy the code for creating the mainpanel instance in Viewport and modify it as follows:

Me. items = [

{Title: "Document Management", id: "contentPanel "},

{Title: "image management", id: "picPanel "}

];

 

Varroles = "." + SimpleCMS. Userinfo. Roles. join ('.') + ".";

If (roles. indexOf (". System Administrator.")> = 0 ){

Me. items. push ({title: "User Management", id: "userPanel "});

}

 

Because it is in the component, you can add the tab to items. Note that the id is added to all tabs to help you find the panel in the Controller. Of course, this can be obtained using other methods, this is the fastest and most direct method. This can be decided based on the specific circumstances of the project. Note that when adding user management tabs, the array push method is used instead of the Panel add method.

Now, create a script file named MainPanel. js in the Controller directory to define the control of the main panel. The basic definition code is as follows:

Ext. define ('simplecms. controller. MainPanel ',{

Extend: 'ext. app. controller ',

Init: function (){

}

});

 

 

Because the controller does not need to reference components or models and stores, the refs, Store, and model configuration items are not defined, but the init method is defined. In the init method, you need to use the control method of the Controller to obtain the tabs in the main panel and add the activate event to them. The specific code is as follows:

This. control ({

'# ContentPanel ':{

Activate :{

Single: true,

Fn: function (panel ){

Console. log (panel );

}

}

},

'# PicPanel ':{

Activate :{

Single: true,

Fn: function (panel ){

Console. log (panel );

}

}

},

'# UserPanel ':{

Activate :{

Single: true,

Fn: function (panel ){

Console. log (panel );

}

}

}

}

 

In code generation, the key word in the object is the selector used to find components. here we need to use id for search. Therefore, we need to add the "#" symbol before the component id, id to search for components. The activate event is bound to the component. In the event, the single configuration item indicates that the event is executed only once, and the configuration item fn is the callback function of the event. Currently, it is only a simple display of the returned panel object.

Here, the reason why the user panel is not added with the permission is that if the component cannot be found, it will not do any processing, so it will be okay if the user panel is not added with the permission, unlike in the visual component, if there is no limit, it will be displayed. Here, we generally worry about whether this will cause security problems? You don't have to worry about using it to perform operations without permissions. Even if it can see the displayed components, it does not have the permission to control the returned data in the background, you cannot see any data or perform any operations on data that you do not have permission.

After the controller is defined, the switch will be Viewport. js. Add a requires configuration item and let it automatically load MainPanel. The Code is as follows:

Requires: ['simplecms. view. MainPanel '],

 

This statement is required. Otherwise, the component cannot be found.

Then, delete all the previously added mainpanel codes. In items, add the following code to add the main panel View:

{Xtype: "mainpanel", id: "mainPanel "},

 

Here, an id is also added to facilitate the use of selector to find components in the future.

To load the controller of the main panel, add the controllers configuration item when Index. cshtml on the home page uses the application method to create an application. The Code is as follows:

Controllers: ["MainPanel"]

 

In this way, the Controller of the main panel can be automatically loaded.

Now, open the home page in the browser and log on with the test user. The interface is no different from what you saw before. If Firebug is enabled, the following information is displayed:

[Trial version] Ext. panel. Panel {id = "contentPanel", title = "Article management "}

 

This indicates that the activate event has been triggered. Do not believe it? You can add something else in the activate event for verification.

Click Manage. The following information is added to Firebug:

[Trial version] Ext. panel. Panel {id = "picPanel", title = "image management "}

The activate of the image management panel is also triggered.

Now switch back to Article management and you will find that there are no prompts. The reason is that the activate event sets the configuration item single to true and it will only be executed once.

Now, the Viewport is complete. Now the focus is on how to control content loading in the master panel controller.

 

Source code: http://download.csdn.net/detail/tianxiaode/4590190

This article from the "yellow light bridge blog", please be sure to keep this source http://dqhuang.blog.51cto.com/2522725/1003777