收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > extjs > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

JavaScript的ExtJS框架中數面板TreePanel的使用實例解析

在ExtJS中,不管是葉子節點還是非葉子節點,都統一用TreeNode表示樹的節點。在ExtJS中,有兩種類型的樹節點。一種節點是普通的簡單樹 節點,由Ext.tree.TreeNode定義,另外一種是需要異步加載子節點信息的樹節點,該類由Ext.tree.AsyncTreeNode定 義。
在數據中, text 顯示文字, leaf 節點 , children 子節點,expanded 展開

var store = Ext.create(‘Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: “留學”, leaf: true },
{ text: “功課”, expanded: true, children: [
{ text: “英語”, leaf: true },
{ text: “代數”, leaf: true}
] },
{ text: “托福”, leaf: true }
]
}
});

TreePanel從servlet中讀取JSON數據
在Ext JS的Tree中的數據往往是從服務器端的動態程序中獲取的。
為了獲取數據,我們可以先編寫一個返回JSON的Servlet共前臺的樹形組建訪問:
服務器端servlet代碼:

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

public class TreeNodeServlet extends HttpServlet {

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

//這里的node是前臺的AsyncTreeNode組建中設置的ID,見下面的JS程序

String treeNode = request.getParameter("node");

String json = "";

PrintWriter out = response.getWriter();

if("0".equals(treeNode)) {

json+="[{id:1,text:'0-1'},{id:2,text:'0-2'}]";

}

else if("1".equals(treeNode)) {

json+="[{id:11,text:'0-1-1',leaf:true},{id:12,text:'0-1-2',leaf:true}]";

}

else if("2".equals(treeNode)) {

json+="[{id:21,text:'0-2-1'},{id:22,text:'0-2-2',leaf:true}]";

}

else if("21".equals(treeNode)) {

json+="[{id:211,text:'0-2-1-1',leaf:true},{id:212,text:'0-2-1-2',leaf:true}]";

}

out.write(json);

}

}

現在就可以在前臺的TreePanel組建的loader方法中訪問上面創建的servlet了,代碼如下:
客戶端顯示代碼

Ext.onReady(function(){

var tree = new Ext.tree.TreePanel({

//這里的div-tree是在html中創建的一個對象的id值

el: 'div-tree',

//使用loader方法訪問TreeNodeServlet

loader: new Ext.tree.TreeLoader({dataUrl:'../TreeNodeServlet'})

});

var root = new Ext.tree.AsyncTreeNode({id:'0',text:'0'})

tree.setRootNode(root);

tree.render();

root.expand();

});

效果圖如下:

查看圖片

在樹TreePanel之間拖放結點
有時候我們在程序中,需要把一棵TreePanel的元素拖放到另外一棵TreePanel中,如果是在同一棵樹中拖動時設置組件的enableDD參數為true,而現在需要在不同給的書之間拖動元素,這個時候就可以設置組件的enableDrag和enableDrop參數,詳細示例如下:

1.編寫JS代碼:
JS代碼

Ext.onReady(function(){

  var tree1 = new Ext.tree.TreePanel({
    el: 'tree1',
 //這里設置enableDrag為true表示可以從這里拖動元素到別處
    enableDrag:true,
    loader: new Ext.tree.TreeLoader({dataUrl: 'treeData1.txt'})
  });
  var tree2 = new Ext.tree.TreePanel({
    el: 'tree2',
 //這里設置enableDrop為true表示可以在這棵樹中放置拖動過來的元素
    enableDrop:true,
    loader: new Ext.tree.TreeLoader({dataUrl: 'treeData2.txt'})
  });
  var root1 = new Ext.tree.AsyncTreeNode({text:'跟節點'});
  var root2 = new Ext.tree.AsyncTreeNode({text:'圖書'});
  tree1.setRootNode(root1);
  tree2.setRootNode(root2);
  tree1.render();
  tree2.render();

});

2.HTML代碼如下:
HTML代碼

<div id="tree1"></div>
<div id="tree2"></div>

3.編寫兩個TreeLoader需要裝載的txt文件,里面的數據為JSON格式:
treeData1.txt:

[
    {text:'非葉子結點'},
    {text:'葉子結點',leaf:true}
]
treeData2.txt:

[
  {text:'計算機',children:[
    {text:'Java',children:[
      {text:'Java核心技術',leaf:true},
      {text:'Thinking in Java',leaf:true}
    ]},
    {text:'算法導論',leaf:true}
  ]},
  {text:'音樂',children:[
    {text:'樂理基礎',leaf:true},
    {text:'卡爾卡西古典吉他教程',leaf:true}
    ]}
]

4.程序效果如下圖所示:

查看圖片

JavaScript的Ext JS框架中的GridPanel組件使用指南
1最簡單的GridPanelGridPanel是ExtJS的核心部分之一,通過GridPanel可以對數據顯示、排序、分組和編輯。Model和Store是GridPanel處理數據的核心,每個GridPanel都必

Ext JS框架中日期函數的用法及日期選擇控件的實現
Ext.Date是一個單例,封裝了一系列日期操作函數,擴展JavaScriptDate的功能,下面列出一些常用的功能。基本函數:Ext.Date.add(date,interval,value)給date增加或減

Ext JS框架程序中阻止鍵盤觸發回退或者刷新頁面的代碼分享
在Extjs開發中,我們需要屏蔽一些鍵盤按鍵,來避免用戶在使用鍵盤操作的過程中不小心按到這些快捷鍵造成輸入信息丟失等問題.Ext.onReady(function(){Ext.Window

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
捕鱼大师辅助软件 配资炒股视频 河南福彩快三电脑版 股指期货配资 上海快3豹子号遗漏值 pk10计划软件哪个好用 四肖期期中免费资料四不像 幸运农场号码走势 赌博最正规网站平台 股票融资融券是好是坏 股票融资是什么意思 精准预测极速快三 聚众赌博的金额是多少 36选7公式技巧 山西快乐十分前三基本走势图 2020股票分析报告 快乐十分2胆全拖任5 今日沪深股市行情查询