Extjs menu tree, how to click the tree to pop up a tab, and how to use dataview to display images

Slice:

 

The creation of the tree menu will generate the dynamic tree here:

Statement: Hometree

VaR Hometree = new NEO. Index. Hometree ({
Collapsible: True,
Split: True,
Margins: '5 0 5 5 ',
Cmargins: '5 5 5 5'
});

Here, this neo. Index. Hometree is a JS file, as shown below:

Hometree. JS:

Ext. namespace ("Neo ");
Ext. namespace ("Neo. Index ");
Neo. Index. Hometree = ext. Extend (ext. Tree. treepanel ,{
ID: 'hometree ',
Region: 'west ',
Minsize: 100,
Maxsize: 300,
Collapsible: True,
Border: false,
Rootvisible: false,
Lines: false,
Autoscroll: True,
Root: New Ext. Tree. asynctreenode ({
ID: 'tree-root ',
Text: "system functions ",
Loader: New Ext. Tree. treeloader ({
Dataurl: 'common.htm? Action = gethomemenu ', // call the Controller Method to load the data items in the tree
Listeners :{
"Beforeload": function (treeloader, node ){
Treeloader. baseparams = {
ID: node. ID,
Method: 'post'
};
},
"Click": function (node, event ){
// Click the leaf node to enter the link
If (node. isleaf ()){
// Display the leaf node menu
Event. stopevent ();
Allevents (node );
} Else {
// It is not a leaf node that does not trigger an event
Event. stopevent ();
// Click to expand
Node. Toggle ();
}

}
}
})
}),
Collapsefirst: false,
Initcomponent: function (){
Ext. Apply (this ,{

});
Neo. Index. Hometree. superclass. initcomponent. Apply (this,
Arguments );

},
Onrender: function (){

Neo. Index. Hometree. superclass. onrender. Apply (this, arguments );
}
});
Ext. Reg ('hometree ', Neo. Index. Hometree );

 

Conntroller's gethomemenu method:

Public void gethomemenu (httpservletrequest request, httpservletresponse response)
throws exception {
log.info ("someone come from IP address <" + request. getremoteaddr ()
+ ">");
log. debug ("reach commoncontroller getmenu");

// The leaves of the tree are dead. You can switch to the database.
String jsonmenu =
"[{Text: 'expressconnect ', iconcls: 'icon-write', expanded: True, children: [{text: 'latest news', ID: 'dontai ', iconcls: 'icon-dongtai', leaf: true}, {text: 'latest ads', ID: 'gonggao', iconcls: 'icon-gonggao', leaf: true }, {text: 'file download', ID: 'downfile', iconcls: 'icon-file', leaf: true}, {text: 'img ', ID: 'picture', iconcls: 'icon-pic ', leaf: true}] ";
System. Out. println (jsonmenu );
Request. setcharacterencoding ("UTF-8 ");
Response. setcontenttype ("application/JSON; charset = UTF-8 ");
Printwriter out = response. getwriter ();
Out. Print (jsonmenu );

}

Add a click event for this tree:

Hometree. On ("click", function (node, event ){
If (node. ID = "dontai") // dontai is his node ID
{
Tabs. Add (new NEO. frontdesk. mainview. dongtaigrid ({// dongtaigrid is a JS File
ID: 'dongtai ',
Title: 'latest dynamic status ',
Closable: True // whether to disable
}). Show ();
} Else if (node. ID = "gonggao ")
{
Tabs. Add (new NEO. frontdesk. mainview. gonggaogrid ({
ID: 'gonggao ',
Title: 'latest announcement ',
Closable: True
}). Show ();
} Else if (node. ID = "downfile ")
{
Tabs. Add (new NEO. frontdesk. mainview. filedownload ({
ID: 'filedownload ',
Title: 'file upload ',
Closable: True
}). Show ();
} Else if (node. ID = "picture ")
{
Tabs. Add (New Ext. Panel ({// This is an image display panel. Refer to the official example and there is no additional JS file.
ID: 'images-view ',
Frame: True,
Autoheight: True,
Collapsible: True,
Closable: True,
Bodystyle: 'background-color: # fefefefe; ', // you can specify the background color of the Panel.
Style: 'padding: 3px 3px 3px ',
Layout: 'fit ',
Title: 'animation slice ',
Header: false,
Iconcls: 'icon-pic ', // The icon of this tab
Items: New Ext. dataview ({// dataview is used here
Store: picstore = new Ext. Data. jsonstore ({
URL: 'common.htm? Action = readallpictures ',
Autoload: True,
Root: 'data ',
ID: 'name ',
Fields :[
'Picname', 'picurl ',
]
}),
Style: 'padding: 10px 10px 10px ',
TPL: New Ext. xtemplate (
'<TPL for = "."> ',
'<Div class = "thumbnail" id = "{picname}">', // pay attention to the application of this Div style. If this style is not used, the display effect is poor.
'<Div class = "Thumb"> <a href = "Public/images/huodong_pics/{picurl}" target = "_ blank" class = "photo"> </a> </div> ',
'<SPAN class = "X-editable"> {picname} </span> </div> ',
'</TPL> ',
'<Div class = "X-clear"> </div>'
),
Autoheight: True,
// Multiselect: True,

Emptytext: 'No images to display'
})
})
). Show ();
}
});

Display of the western part of this page:
VaR westcpt = new Ext. Panel ({
Region: 'west ',
ID: 'West-panel ',
El: 'west ',
Split: True,
Width: 225,
Minsize: 160,
Maxsize: 260,
Margins: '0 0 0 0 ',
Title: 'quick navigation ',
Collapsible: True,
Layout: 'accordion ',
Layoutconfig :{
Animate: True
},
Items :[{
Title: 'menu ',
Border: false,
Iconcls: 'nav ',
Items: Hometree // load the tree above
},{
Title: 'settings ',
Border: false,
Iconcls: 'navigation'

}]
});

 

This tabs is the first tab displayed in the middle and referenced above

VaR tabs = new Ext. tabpanel ({
Region: 'center ',
Deferredrender: True,
Activetab: 0,
Autoscroll: True,
Enabletabscroll: True,
Listeners :{
Remove: function (TP, c ){
C. Hide ();
}
},
Autodestroy: false,
Items: [welcomepanel] // This items can be used at will

});