首頁 > 開發者 > 網站開發

extjs_10_自訂combotree組件，extjs_10combotree

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

extjs_10_自訂combotree組件，extjs_10combotree
1.項目

2.treedata.json 

{text : "root",expanded : true,expandable : true,children : [{text : "Dept 1",leaf : false,expandable : true,children : [{text : "user1",leaf : true}, {text : "user2",leaf : true}, {text : "user3",leaf : true}]}, {text : "Dept 2",leaf : false,expandable : true,children : [{text : "user4",leaf : true}, {text : "user5",leaf : true}, {text : "user6",leaf : true}, {text : "user7",leaf : true}, {text : "user8",leaf : true}]}]}

3.ComboTree.js 

Ext.define("Ext.ux.ComboTree", {extend : "Ext.form.field.ComboBox",alias : "widget.combotree",url : "",tree : {},initComponent : function() {// tpl下拉框顯示內容 displayTpl文字框顯示內容this.treeid = Ext.String.format("combo-tree-{0}", Ext.id());this.tpl = Ext.String.format("<div id={0}></div>", this.treeid);if (this.url) {// 判斷url是否配置var me = this;var treeStore = Ext.create("Ext.data.TreeStore", {root : {expanded : true},// 預設展開proxy : {type : "ajax",url : this.url}});this.tree = Ext.create("Ext.tree.Panel", {rootVisible : false,// 不顯示根節點autoScorll : true,height : 200,store : treeStore});this.tree.on("itemclick", function(combo, record) {// 監聽tree的點擊事件if (me.fireEvent("select", me, record))// 有級聯操作的時候要這樣寫(第一個combobox引發第二個combobox過濾){me.setValue(record);me.collapse();// 摺疊節點}});this.on("expand", function() {// 展開的時候渲染this.tree.store.load();// 展開的時候重新渲染資料，保證資料是最新的if (!this.tree.rendered) {// 判斷是否渲染this.tree.render(this.treeid);// 渲染}});// if(me.fireEvent("select",me,record)) 不寫的時候不能監聽select事件this.on("select", function(combo, record) {Ext.Msg.alert("Title", "you selected " + record.data.text);})}this.callParent();}})

4.comboboxtree.jsp 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>自訂分頁組建</title><!-- 引入樣式，可以把ext-all.css換成ext-all-access.css |  ext-all-gray.css改變樣式--><link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css"><!-- 開發模式引入ext-all-debug.js，發布模式引入ext-all.js --><script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script><!-- 語言套件 --><script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script><!-- 引入自訂分頁 --><script type="text/javascript" src="./extjs4.1/ux/ComboTree.js"></script><script type="text/javascript">Ext.onReady(function() {Ext.Loader.setConfig({paths : {"Ext.ux" : "extjs4.1/ux"}});Ext.create("Ext.ux.ComboTree", {url : "extjs4.1/data/treedata.json",valueField : "text",displayField : "text",queryMode : "local",renderTo : Ext.getBody(),fieldLabel : "ComboTree"})});</script></head><body><br></body></html>





本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More