<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> OCS对接</title >
<script src="../../../resources/ext5/ext-all.js" ></script>
<script src="../../../resources/ext5/packages/ext-locale/ext-locale-zh_CN.js" ></script>
<link href="../../../resources/ext5/packages/ext-theme-access/build/resources/ext-theme-access-all.css" rel="stylesheet" />
 
    <!-- example code -->
 
    <link rel="stylesheet" type="text/css" href="../../../resources/ext5/warnConfig.css" >
    <script src="../../../resources/ext5/treefilter.js"></script >
<script type="text/javascript" >
 
 
//
// 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系统点号对接配置' ,
            layout: 'fit',
            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,
        layout: 'fit' ,
       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', {
        layout: 'border',
        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实例的更多相关文章

  1. javascript面向对象——tabs实例

    面向过程—>面向对象 之前在未学习面向对象时,我们都是面向过程编程的.它的优点就是简单,明了,下面就来把面向过程的tabs切换改写成面向对象的方式. html: <div class=&q ...

  2. 最近学习工作流 推荐一个activiti 的教程文档

    全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介 协议 下载 源码 必要的软件 ...

  3. [ExtJS5学习笔记]第十一节 Extjs5MVVM模式下系统登录实例

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38815923 实例代码下载地址: http://download.csdn.net/d ...

  4. jQuery EasyUI 选项卡面板tabs使用实例精讲

    1. 对选项卡面板区域 div 设置 class=”easyui-tabs” 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) 3. 设置面板 fi ...

  5. 微信小程序实例：实现tabs选项卡效果

    最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...

  6. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  7. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(23)-设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo    (3):面向接口编程   (4 ):业务逻辑层的封装    ...

  8. 多iframe使用tab标签方式添加、删除、切换的处理实例

    紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...

  9. Qt StyleSheet样式表实例(转)

    QT论坛看到的,收藏一下! 在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表. 下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计.自定义的前台背景与后台背景的颜色: 如果需要一个文本编辑 ...

随机推荐

  1. Linux Socket 网络编程

    Linux下的网络编程指的是socket套接字编程,入门比较简单.在学校里学过一些皮毛,平时就是自学玩,没有见识过真正的socket编程大程序,比较遗憾.总感觉每次看的时候都有收获,但是每次看完了之后 ...

  2. 锤子OneStep及BigBang使用体验

    令人期待的Smartisan OS v3.1.2终于推送了,第一时间下载了更新.几乎花了半个小时才升级完毕,捧着还热乎的手机,赶忙体验一下传说中的两大杀器:OneStep以及BigBang. 先说On ...

  3. ASP.NET MVC Model验证(五)

    ASP.NET MVC Model验证(五) 前言 上篇主要讲解ModelValidatorProvider 和ModelValidator两种类型的自定义实现, 然而在MVC框架中还给我们提供了其它 ...

  4. 不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你彻底看清前端MVVM的本质

    最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...

  5. ABP框架 - 多层结构

    文档目录 本节内容: 简介 ABP结构 多层 其它层(通用) 领域(Core)层 应用层 基础层 Web & 表示层 其它 总结 简介 一个应用的代码库的分层是一个广为接受的技术,用来减少复杂 ...

  6. 空中网招聘Java架构师、数据库开发等各类人才

    爱好网络游戏吗?爱好网站开发技术吗? 有没有想过可以成为史诗级MMO RPG<激战2>运营团队中的一员? 如果下面的职位有合适你的,加入我们吧! http://gw2.kongzhong. ...

  7. Bootstrap3系列：导航

    1. 标签页 .nav添加.nav-tabs设计标签页,.nav-tabs 依赖 .nav 基类. 1.1 示例代码 <ul class="nav nav-tabs"> ...

  8. MSSQLSERVER添加c# clr程序集的使用方法

    前言 MSSQLSERVER提供程序集,无疑可以让编程人员更加便捷的操作数据库数据,比如c#写的函数,可以在数据库当作sql的函数使用,你想想他对不熟悉数据库的程序员来说是有多么的嗨.这么好的机制,大 ...

  9. JavaScript权威设计--事件处理介绍(简要学习笔记十七)

    1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有 ...

  10. spring ioc

    spring ioc是spring的核心之一,也是spring体系的基础,那么spring ioc所依赖的底层技术是什么的?反射,以前我们开发程序的时候对象之间的相互调用需要用new来实现,现在所有的 ...