收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > 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

Extjs中通過Tree加載右側TabPanel具體實現

最近在做一個物流管理的項目,公司必須要求用Extjs4.1來做界面,因為以前一直也沒有接觸過所以開發的過程中遇到了很多的困難。同時Extjs4.1的資料在網上也相對來說較少。好了,不說廢話上代碼:
1.左側的功能樹

Ext.define("AM.view.SystemTree", {
extend : 'Ext.tree.Panel',
alias : 'widget.systemTree',
rootVisible : false,// 不展示ROOT
displayField : 'text',
// title:'物流運輸系統',
viewConfig : { // 具有拖拽功能
plugins : {
ptype : 'treeviewdragdrop'
},
listeners : { // 拖拽
drop : function(node, data, overModel, dropPosition, options) {
alert("把: " + data.records[0].get('text') + " 移動到: "
+ overModel.get('text'));
}
}
},
dockedItems : [ {
xtype : 'toolbar',
items : [ {
xtype : 'button',
id : 'allopen',
icon : 'resources/img/lock_open.png',
text : '展開全部'
}, {
xtype : 'button',
id : 'allclose',
icon : 'resources/img/lock.png',
text : '收起全部'
} ]
} ],
root : {
text : 'root',
leaf : false,
id : '0',
children : [ {
text : '運輸管理',
checked : false, // 顯示被選中
leaf : false, // 是否是葉子節點
icon : 'resources/img/folder_user.png',
id : '01',
children : [ {
text : '車輛信息管理',
checked : false,
icon : 'resources/img/report_edit.png',
leaf : true,
id : 'vehiclelist',  //主要的要點在這里,這里的id要指定為你要打開的那個視圖的別名
}]
}]
}
});

要點介紹
•tree一定不要忘記添加別名alias
•設置樹形結構的子節點的id值為你需要在右側顯示的view的別名alias(重要) ------可參考下方的view代碼
2.需要打開的對應的view

Ext.define("AM.view.transportation.VehicleList",{
extend:'Ext.grid.Panel',
alias:'widget.vehiclelist',   //這里一定要設置別名
id:'vehiclelist',
store:'VehicleStore',
    ......中間代碼省略
columns : [
{text:'車輛編號',dataIndex:'vehicleNo',
field:{
xtype:'textfield',
allowBlank:false
}
},
{text:'車輛描述',xtype:'templatecolumn',
tpl:'車輛的編號為{vehicleNo} 所在地區為{vehicleArea}'
}
],
initComponent:function(){
this.callParent(arguments);
}
});

3.建立一個右側的TabPanel

Ext.define('AM.view.TabPanel',{ //主頁面的tab面板
extend: 'Ext.tab.Panel',
alias:'widget.tabpanel',
closeAction: 'destroy',
defaults :{
bodyPadding: 10
},
items: [{
title: '主頁',
autoLoad:'content.jsp'    //只有一個基本的panel
}],
});

4.設置點擊tree的觸發事件

'systemTree':{
itemclick:function(tree,record,item,index,e,options){
var tabs = tree.ownerCt.ownerCt.ownerCt
.child('#center-grid').child("#tabpanel");
//獲取當前點擊的節點
var treeNode=record.raw;
var id = treeNode.id;
var text=treeNode.text;
//獲取點擊的樹節點相同的tab標簽
var tab = tabs.getComponent(id);
if(!tab){//如果不存在
tabs.add({//用點擊樹的節點的ID、text新建一個tab
id:id,
closable: true,
title:text,
iconCls:id,
xtype:id  //將tree設置好的id對應的TabPanel中去,相當與把對應的view填充到TabPanel中
}).show();
}else{//如果存在
tabs.setActiveTab(tab);//Active
}
}
},

結果上效果圖:
查看圖片
總結:Extjs做出來的效果確實很炫,但是學起來也有一定的難度,特別是比較新的版本,網上很難找到什么好的教程。還好我們有API,可以多對著API中的例子進行練習,這樣掌握起來也很快。最近才接觸Extjs,希望各位大神不要吐槽!

extjs ColumnChart設置不同的顏色實現代碼
Ext.onReady(function(){//定義storevarchartStore=newExt.data.JsonStore({root:'root',fields:[{name:'ne',type:'string'},//網元{name:'confine',type:'int'},//閥值{name:'bill',type:'string'}//工單

Extjs407 getValue()和getRawValue()區別介紹
例子:{xtype:'datefield',width:100,id:'mydate',format:'Y-m-d',value:newDate(),msgTarget:'side',emptyText:'請選擇日期。。。',name:'mydate'}mydate.value和getvalue()一樣的。mydate.getvalu

Extjs中ComboBoxTree實現的下拉框樹效果(自寫)
最近涉及到的一個項目中,需要實現ComboBoxTree的效果,首先,看看效果吧……在Extjs中是沒有這種效果的,所以得自己寫,在網絡上看了看別人的資料

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
吉林快3三同号遗漏一定牛 甘肃快三手机上怎么买 广东福彩快乐十分走势图彩乐乐 重庆时时开奖冷热号 福建时时彩开奖情况 怎么找新出的app 2018年香港开奖结果香港最决 江西快三开奖 vr赛游戏设备 生财有道香港图库开奖结果 陕西快乐十分近500期 内蒙古时时吧 吉林新快3开奖直播 北京pk直播手机版 湖南快乐十分网站 黑龙江快乐十分任选五遗漏