Extjs5 tabs实例

<%@ page language= "java" contentType ="text/html; charset=UTF-8"

pageEncoding="UTF-8" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

<html>

<head>

<title> OCS对接</title >

// This is the main layout definition.

// Note that these are all defined as panel configs, rather than instantiated

// as panel objects. You could just as easily do this instead:

// var absolute = Ext.create('Ext.Panel', { ... });

// However, by passing configs into the main container instead of objects, we can defer

// layout AND object instantiation until absolutely needed. Since most of these panels

// won't be shown by default until requested, this will save us some processing

// time up front when initially rendering the page.

// Since all of these configs are being added into a layout container, they are

// automatically assumed to be panel configs, and so the xtype of 'panel' is

// implicit. To define a config of some other type of component to be added into

// the layout, simply provide the appropriate xtype config explicitly.

function getBasicLayouts() {

// This is a fake CardLayout navigation function. A real implementation would

// likely be more sophisticated, with logic to validate navigation flow. It will

// be assigned next as the handling function for the buttons in the CardLayout example.

var cardNav = function(incr){

var l = Ext.getCmp('card-wizard-panel' ).getLayout();

var i = l.activeItem.id.split('card-' )[1];

var next = parseInt(i, 10) + incr;

l.setActiveItem(next);

// Ext.getCmp('card-prev').setDisabled(next===0);

// Ext.getCmp('card-next').setDisabled(next===2);

};

return {

* ================ Start page config =======================

// The default start page, also a simple example of a FitLayout.

start: {

id: 'mainPanel',

title: 'OCS系统点号对接配置' ,

bodyPadding: 25

}

};

}

Ext.onReady(function(){

Ext.tip.QuickTipManager.init();

var detailsCmp;

// Gets all layouts examples

var layoutExamples = [];

Ext.Object.each(getBasicLayouts(), function(name, example) {

layoutExamples.push(example);

});

// Ext.Object.each(getCombinationLayouts(), function(name, example){

// layoutExamples.push(example);

// });

// Ext.Object.each(getCustomLayouts(), function(name, example){

// layoutExamples.push(example);

// });

// This is the main content center region that will contain each example layout panel.

// It will be implemented as a CardLayout since it will contain multiple panels with

// only one being visible at any given time.

<%-- var contentPanel = {--%>

<%-- id: 'content-panel',--%>

<%-- // region: 'border', // this is what makes this panel into a region within the containing layout--%>

<%-- margins: '2 5 5 0',--%>

<%-- fit:true,--%>

<%-- activeItem: 0,--%>

<%-- border: false,--%>

<%-- items: layoutExamples--%>

<%-- };--%>

var store = Ext.create( 'Ext.data.TreeStore', {

root: {

expanded: true,

text: "My Root",

children: [

{ text: "Child 1", leaf: true },

{ text: "Child 2", expanded: true, children: [

{ text: "GrandChild", leaf: true }

] }

]

}

proxy: {

actionMethods: {

create: "POST", read: "POST", update: "POST", destroy: "POST"

type: 'ajax',

autoLoad : true,

noCache: false,

// url: '${pageContext.request.contextPath}/sysLoginAction/getTreeAction_ext.action',

extraParams:{pid:'1'}

}

});

// Go ahead and create the TreePanel now so that we can use it below

var tab1 = Ext.create( 'MyTreePanel', {

id: 'tab1',

title: 'tab1',

region: 'center',

split: true,

height: 360,

minSize: 150,

rootVisible: false,

autoScroll: true,

store: store

});

var tab2 = Ext.create( 'MyTreePanel', {

id: 'tab2',

title: 'tab2',

region: 'center',

split: true,

height: 360,

minSize: 150,

rootVisible: false,

autoScroll: true

});

treePanel.getSelectionModel().on('select', function(selModel, record) {

if (record.get('leaf')) {

// Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel');

// detailsCmp = Ext.getCmp('details-panel');

// detailsCmp.body.hide().slideIn('l', {stopAnimation:true,duration: 200});

// detailsCmp.update(Ext.getDom(record.getId() + '-details').innerHTML);

// detailsCmp.doLayout();

}

});

// This is the Details panel that contains the description for each example layout.

var tabs = Ext.widget('tabpanel' , {

resizeTabs: true,

enableTabScroll: true,

items: [tab1,tab2]

});

<%--{--%>

<%-- id: 'tabsPanel',--%>

<%-- region: 'center', // this is what makes this panel into a region within the containing layout--%>

<%-- border: false,--%>

<%-- layout: 'fit' ,--%>

<%-- items:tabs--%>

<%--//tabs为tab页，在items中增加fit即可--%>

<%-- // height:500,--%>

<%-- //bodyStyle: 'background:#fff;' --%>

<%--}--%>

var detailsPanel = {

id: 'main',

region: 'center',

title: 'Details',

border: false,

items:tabs

};

// Finally, build the main layout once all the pieces are ready. This is also a good

// example of putting together a full-screen BorderLayout within a Viewport.

Ext.create('Ext.Viewport', {

title: 'Ext Layout Browser',

items: [

detailsPanel

]

});

<%-- var field = Ext.get('textfieldid'); --%>

<%-- field.on('keyup', function(e) { --%>

<%-- // alert(Ext.getCmp('textfieldid').getValue());--%>

<%-- treePanel.filterByText(Ext.getCmp('textfieldid').getValue()) ; --%>

<%-- }); --%>

});

</script>

</head>

<body>

</body>

</html>

Extjs5 tabs实例的更多相关文章

javascript面向对象——tabs实例
面向过程—>面向对象之前在未学习面向对象时,我们都是面向过程编程的.它的优点就是简单,明了,下面就来把面向过程的tabs切换改写成面向对象的方式. html: <div class=&q ...
最近学习工作流推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介协议下载源码必要的软件 ...
[ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38815923 实例代码下载地址: http://download.csdn.net/d ...
jQuery EasyUI 选项卡面板tabs使用实例精讲
1. 对选项卡面板区域 div 设置 class=”easyui-tabs” 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fi ...
微信小程序实例：实现tabs选项卡效果
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...
Android应用底部导航栏(选项卡)实例
现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo (3):面向接口编程 (4 ):业务逻辑层的封装 ...
多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
Qt StyleSheet样式表实例(转)
QT论坛看到的,收藏一下! 在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表. 下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计.自定义的前台背景与后台背景的颜色: 如果需要一个文本编辑 ...

随机推荐

这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
UML类图（上）：类、继承和实现
面向对象设计对于一个程序员来说,在工作的开始阶段通常都是别人把东西设计好,你来做.伴随着个人的成长,这个过程将慢慢变成自己设计一部分功能来实现,自己实现.如果要自己设计,无论是给自己看,还是给别人看 ...
《深入理解Java虚拟机》虚拟机性能监控与故障处理工具
上节学习回顾从课本章节划分,<垃圾收集器>和<内存分配策略>这两篇随笔同属一章节,主要是从理论+实验的手段来讲解JVM的内存处理机制.好让我们对JVM运行机制有一个良好的概念 ...
CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元效果图例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
深入浅出Struts2+Spring+Hibernate框架
一.深入浅出Struts2 什么是Struts2? struts2是一种基于MVC的轻量级的WEB应用框架.有了这个框架我们就可以在这个框架的基础上做起,这样就大大的提高了我们的开发效率和质量,为公司 ...
Android开发学习之路-Android中使用RxJava
RxJava的核心内容很简单,就是进行异步操作.类似于Handler和AsyncTask的功能,但是在代码结构上不同. RxJava使用了观察者模式和建造者模式中的链式调用(类似于C#的LINQ). ...
如果没有Visual Studio 2015，我们如何创建.NET Core项目？
对于.NET开发人员来说,我们已经习惯了VS这个世界上最强大的IDE,所以对他们来说,项目的创建直接利用安装到VS中相应的项目模板即可.当.NET Core跨出了Windows的围栏,正式拥抱其他平台 ...
TCP四步挥手的各种状态转换图
对于TCP四步挥手时的各种状态转换,网上有很多资料.但是有很多描述不是很容易理解,甚至是描述错误,不如这篇文章里http://www.cnblogs.com/Jessy/p/3535612.html# ...
让BASH,VIM美美的Powerline
前言鉴于BASH及其周边强大的工具以及VIM高效快捷,加上现在我工作重心转移到前端开发上,因此我华丽地转向Linux阵营(当然从最傻瓜式的Ubuntu开始啦!).但BASH和VIM默认样式确实颜值 ...
iOS关于模块化开发解决方案(纯干货)
关于iOS模块化开发解决方案网上也有一些介绍,但真正落实在在具体的实例却很少看到,计划编写系统文章来介绍关于我对模块化解决方案的理解,里面会有包含到一些关于解耦.路由.封装.私有Pod管理等内容:并编 ...

Extjs5 tabs实例

Extjs5 tabs实例的更多相关文章

随机推荐

热门专题