JavaScript DHTML/Ext JS/Portal

Материал из Web эксперт
Перейти к: навигация, поиск

Portal window management

   <source lang="html4strict">


<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> 

   <link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/Portal.css" />
   <script type="text/javascript" src="ext-3.0.0/examples/ux/Portal.js"></script>
   <script type="text/javascript" src="ext-3.0.0/examples/ux/PortalColumn.js"></script>
   <script type="text/javascript" src="ext-3.0.0/examples/ux/Portlet.js"></script>

</head> <script type="text/javascript"> /*! 

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

SampleGrid = function(limitColumns){ 

   function italic(value){
       return "" + value + "";
   }
   function change(val){
       if(val > 0){
           return "" + val + "";
       }else if(val < 0){
           return "" + val + "";
       }
       return val;
   }
   function pctChange(val){
       if(val > 0){
           return "" + val + "%";
       }else if(val < 0){
           return "" + val + "%";
       }
       return val;
   }

   var columns = [
       {id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
       {header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
       {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
       {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
       {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
   ];
   // allow samples to limit columns
   if(limitColumns){
       var cs = [];
       for(var i = 0, len = limitColumns.length; i < len; i++){
           cs.push(columns[limitColumns[i]]);
       }
       columns = cs;
   }
   SampleGrid.superclass.constructor.call(this, {
       store: new Ext.data.Store({
           reader: new Ext.data.ArrayReader({}, [
                  {name: "company"},
                  {name: "price", type: "float"},
                  {name: "change", type: "float"},
                  {name: "pctChange", type: "float"},
                  {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
             ]),
           data: [
               ["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
               ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
               ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
               ["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
               ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
               ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
               ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
               ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
               ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
               ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
               ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
               ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
               ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
               ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
               ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
               ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
               ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
               ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
               ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
               ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
               ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
               ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
               ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
               ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
               ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
               ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
               ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
               ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
               ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
           ]
       }),
       columns: columns,
       autoExpandColumn: "company",
       height:250,
       width:600
   });

} Ext.extend(SampleGrid, Ext.grid.GridPanel); /*! 

* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/

Ext.onReady(function(){ 

   // NOTE: This is an example showing simple state management. During development,
   // it is generally best to disable state management as dynamically-generated ids
   // can change across page loads, leading to unpredictable results.  The developer
   // should ensure that stable state ids are set for stateful components in real apps.
   Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
   // create some portlet tools using built in Ext tool ids
   var tools = [{
       id:"gear",
       handler: function(){
           Ext.Msg.alert("Message", "The Settings tool was clicked.");
       }
   },{
       id:"close",
       handler: function(e, target, panel){
           panel.ownerCt.remove(panel, true);
       }
   }];
   var viewport = new Ext.Viewport({
       layout:"border",
       items:[{
           region:"west",
           id:"west-panel",
           title:"West",
           split:true,
           width: 200,
           minSize: 175,
           maxSize: 400,
           collapsible: true,
           margins:"35 0 5 5",
           cmargins:"35 5 5 5",
           layout:"accordion",
           layoutConfig:{
               animate:true
           },
           items: [{
               html: "adf",
               title:"Navigation",
               autoScroll:true,
               border:false,
               iconCls:"nav"
           },{
               title:"Settings",
               html: "adf",
               border:false,
               autoScroll:true,
               iconCls:"settings"
           }]
       },{
           xtype:"portal",
           region:"center",
           margins:"35 5 5 0",
           items:[{
               columnWidth:.33,
               style:"padding:10px 0 10px 10px",
               items:[{
                   title: "Grid in a Portlet",
                   layout:"fit",
                   tools: tools,
                   items: new SampleGrid([0, 2, 3])
               },{
                   title: "Another Panel 1",
                   tools: tools,
                   html: "adf"
               }]
           },{
               columnWidth:.33,
               style:"padding:10px 0 10px 10px",
               items:[{
                   title: "Panel 2",
                   tools: tools,
                   html: "adf"
               },{
                   title: "Another Panel 2",
                   tools: tools,
                   html: "adf"
               }]
           },{
               columnWidth:.33,
               style:"padding:10px",
               items:[{
                   title: "Panel 3",
                   tools: tools,
                   html: "asdf"
               },{
                   title: "Another Panel 3",
                   tools: tools,
                   html: "adsf"
               }]
           }]
           
           /*
            * Uncomment this block to test handling of the drop event. You could use this
            * to save portlet position state for example. The event arg e is the custom 
            * event defined in Ext.ux.Portal.DropZone.
            */

// ,listeners: { // "drop": function(e){ // Ext.Msg.alert("Portlet Dropped", e.panel.title + "
Column: " + // e.columnIndex + "
Position: " + e.position); // } // } 

       }]
   });

});

</script> <body> </body> </html> 


 </source>


Table based portal layout

   <source lang="html4strict">

<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>

<body> <script type="text/javascript"> 

       Ext.onReady(function() {
           var panel = new Ext.Panel({
               id:"main-panel",
               baseCls:"x-plain",
               renderTo: Ext.getBody(),
               layout:"table",
               layoutConfig: {columns:3},
               // applied to child components
               defaults: {frame:true, width:200, height: 200},
               items:[{
                   title:"Item 1"
               },{
                   title:"Item 2"
               },{
                   title:"Item 3"
               },{
                   title:"Item 4",
                   width:410,
                   colspan:2
               },{
                   title:"Item 5"
               },{
                   title:"Item 6"
               },{
                   title:"Item 7",
                   width:410,
                   colspan:2
               },{
                   title:"Item 8"
               }]
           });
       });

</script>

</script> </body> </html> 


 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Portal&oldid=2321»