保藏本站 保藏本站
188bet注册网主页 - 软件测验 - 常用手册 - 站长东西 - 技能社区
主页 > 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 touzhuwang75.com. All Rights Rreserved  京ICP备05050695号