EXTJS 5の学習記録のTreePanelツリーのローカルロードと非同期ロード
まずstoreデータソースを作成します
次にtreeオブジェクトを作成します
最後にサーバが返すjsonデータフォーマットを置く
最終結果は図のようになります.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: false,//
children: [ //
{ text: " ", leaf: true,id:'firstNode',checked:false },
{ text: " 1", expanded: true,checked:false, children: [
{ text: " ", leaf: true,checked:false },
{ text: " 1", leaf: true,checked:false}
] },
{ text: " ", leaf: false,checked:false } //leaf:false
]
}
});
次にtreeオブジェクトを作成します
return Ext.create('Ext.tree.Panel', { // return renderTo
title: 'Simple Tree',
id:'tree',
width: 500,
height: 350,
store: store,
autoEncode: true, //
//selModel: new Ext.tree.MultiSelectionModel(), //
rootVisible: false,
listeners:{
beforeitemexpand:function(node,optd){ //
var tt=node.data.text;
store.setProxy({ // extjs
type:'ajax',
url:'SyncTreeServlet' ,
extraParams:{time:tt} //
});
}
},
bbar: [{ //
text: " ",
tooltip: " ",
tooltipType: "qtip",
handler: function(){
var model = Ext.getCmp("tree").getSelectionModel();//
model.selectPrevious();
}
},{
text: " ",
tooltip: " ",
tooltipType: "qtip",
handler: function(){
var model = Ext.getCmp("tree").getSelectionModel();//
model.selectNext();
}
},{
text: " ",
tooltip: " ",
tooltipType: "qtip",
handler: function(){
var model = Ext.getCmp("tree").getSelectionModel();//
var selectedNode = model.getSelection();//
console.info(selectedNode);
if(selectedNode&&selectedNode.length>0){
Ext.MessageBox.alert("hint", selectedNode[0].data.text);
}
}
}],
tbar:[{
text: " ",
tooltip: " ",
tooltipType: "qtip",
handler: function(){
Ext.MessageBox.prompt(" ", " :", function(btn, txt){
if(btn == "ok"){
var tree = Ext.getCmp("tree");
var newNode = new Ext.tree.Panel({text: txt,leaf: true});
var selNode = tree.getSelectionModel().getSelection();
if(selNode&&selNode.length>0){
//Ext.Msg.alert(" ", " !");
selNode[0].appendChild(newNode);
tree.getSelectionModel().clearSelections(); //
}else{
tree.getRootNode().appendChild(newNode);
tree.getSelectionModel().clearSelections(); //
}
}
});
}
},{
text: " ",
tooltip: " ",
tooltipType: "qtip",
handler: function(){
var tree = Ext.getCmp("tree");
var selNode = tree.getSelectionModel().getSelection();
if(!selNode||selNode.length<1){
Ext.Msg.alert(" ", " !");
}else{
selNode[0].remove();
tree.getSelectionModel().clearSelections(); //
}
}
},{
text: " ",
tooltip: " ",
tooltipType: "qtip",
handler: function(){
var tree = Ext.getCmp("tree");
var selNode = tree.getSelectionModel().getSelection();
if(!selNode||selNode.length<1){
Ext.Msg.alert(" ", " !");
}else{
Ext.MessageBox.prompt(" ", " :", function(btn, txt){
if(btn=="ok"){
selNode[0].set("text",txt);
selNode.updateInfo(true);
Ext.Msg.alert("hint"," !");
tree.getSelectionModel().clearSelections(); //
}
});
}
}
}],
renderTo: Ext.getBody()
});
最後にサーバが返すjsonデータフォーマットを置く
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
Writer out = response.getWriter();
StringBuffer sb = new StringBuffer("[");
for (int i = 0; i < 4; i++) {
int id = (int) (Math.random()*100000);
//System.out.println("id:=================>"+id);
sb.append("{id:"+id+",text:' "+i+"',leaf: false,checked:false},");
}
sb.append("]");
out.write(sb.toString());
}
最終結果は図のようになります.