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 >

< 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 >

转载于:https://www.cnblogs.com/piaopiaoqun/p/6062200.html