JavaScript DHTML/Ext JS/Panel — различия между версиями

Текущая версия на 07:21, 26 мая 2010

Содержание

1 Add bottom Toolbar for Ext.Panel
2 Add Button to a toolbar on a Ext.Panel
3 Add children panel to panel
4 Add Ext.Panel to DIV tag
5 Add panel to a form
6 Add panel to window as items
7 Add panel to window items
8 Add toolbar to Ext.Panel
9 Apply array data to Ext.Panel
10 collapsed Panel
11 Create Panel with title, width, html and render to body
12 Highlight Panel body
13 Inline panel creation
14 Load your html file to a Ext.Panel
15 Nested logic to add panel to a window
16 Render Ext.Panel to a DIV tag
17 Render Panel to body
18 Set layout for Ext.Panel to fit
19 Set panel height
20 Set Panel layout to Ext.Panel
21 Set title, width and height for Panel
22 Set width and height for panel
23 Set xtype, title and html for a Panel
24 Set X, Y, height, width for a panel
25 Support for standard Panel features such as framing, buttons and toolbars
26 Three level Nested Panel

Add bottom Toolbar for Ext.Panel

  

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

<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>
<!-- Revised from demo code from ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var myData = {
    records : [
      { name : "Record 0", column1 : "0", column2 : "0" },
      { name : "Record 1", column1 : "1", column2 : "1" },
      { name : "Record 2", column1 : "2", column2 : "2" },
      { name : "Record 3", column1 : "3", column2 : "3" },
      { name : "Record 4", column1 : "4", column2 : "4" },
      { name : "Record 5", column1 : "5", column2 : "5" },
      { name : "Record 6", column1 : "6", column2 : "6" },
      { name : "Record 7", column1 : "7", column2 : "7" },
      { name : "Record 8", column1 : "8", column2 : "8" },
      { name : "Record 9", column1 : "9", column2 : "9" }
    ]
  };

  // Generic fields array to use in both store defs.
  var fields = [
     {name: "name", mapping : "name"},
     {name: "column1", mapping : "column1"},
     {name: "column2", mapping : "column2"}
  ];
    // create the data store
    var gridStore = new Ext.data.JsonStore({
        fields : fields,
    data   : myData,
    root   : "records"
    });

  // Column Model shortcut array
  var cols = [
    { id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"},
    {header: "column1", width: 50, sortable: true, dataIndex: "column1"},
    {header: "column2", width: 50, sortable: true, dataIndex: "column2"}
  ];
  // declare the source Grid
    var grid = new Ext.grid.GridPanel({
    ddGroup          : "gridDDGroup",
        store            : gridStore,
        columns          : cols,
    enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : "name",
        width            : 650,
        height           : 325,
    region           : "west",
        title            : "Data Grid",
    selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
    });
  //Simple "border layout" panel to house both grids
  var displayPanel = new Ext.Panel({
    width    : 650,
    height   : 300,
    layout: "fit",
    renderTo : "panel",
    items    : [
      grid
    ],
    bbar    : [
      "->", // Fill
      {
        text    : "Reset Example",
        handler : function() {
          //refresh source grid
          gridStore.loadData(myData);
        }
      }
    ]
  });
});
</script> 
<div id="panel"></div>
</body>
</html>

Add Button to a toolbar on a Ext.Panel

   
<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 p = new Ext.Panel({
        title: "Title",
        width: 300,
        html: "html code <B>here</B>",
        tbar: [{
            text: "Click",
            handler: function(){
               alert("asdf");
            }
        }],
        renderTo: Ext.getBody()
    });

});
</script> 

</body>
</html>

Add children panel to panel

  

<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">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : "panel",
      title : "Child Panel 1",
      html  : "Panels can contain Children",
      frame : true
    }
  ];
}
Ext.onReady(function() {
  new Ext.Panel({
    renderTo : Ext.getBody(),
    title    : "Panel 1",
    width    : 200,
    height   : 180,
    items    : makeChildren("Panel 1")
  });

});
</script> 
<div id="panel"></div>
</body>
</html>

Add Ext.Panel to DIV tag

  

<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>
<script type="text/javascript">
Ext.onReady(function(){
  var example1 = new Ext.Panel({
    applyTo:"my",
    title:"Example 1",
    width:250,
    height:250,
    frame:true,
    autoLoad:{
      url:"your.htm"
    }
  });
});

</script>
<body>
<div id="my" style="margin:25px;"></div>
</body>
</html>

Add panel to a form

  
<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 myWin =  new Ext.Window({
      height      : 220,
      width       : 230,
      bodyStyle   : "padding: 5px",
      layout      : "form",
      labelWidth  : 50,
      defaultType : "field",
      items       : [
        {
          fieldLabel : "Name",
          width      : 110
        },
        {
          xtype          : "panel",
          fieldLabel     : "Field",
          labelSeparator : "asdf",
          frame          : true,
          title          : "Instructions",
          html           : "Please fill in the form",
          height         : 55
        }
        ]
    });
    
    myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Add panel to window as items

  
<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 panel1 = {                                         
        html   : "I am Panel1",
        id     : "panel1",
        frame  : true,
        height : 100
    }
    var panel2 = {
        html  : "line 1<br/>line 2<hr>",
        id     : "panel2",
        frame : true
    }
    
    var myWin = new Ext.Window({                            
        id     : "myWin",
        height : 250,
        width  : 400,
        items  : [
            panel1,
            panel2
        ]
    });
    
    myWin.show();
    
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Add panel to window items

  
<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 panel1 =     {
  xtype : "panel",
  title : "Plain Panel",
  html  : "Panel with an xtype specified"
}
new Ext.Window({
  width        : 300,
  height       : 300,
  title        : "Accordion window",
  layout       : "accordion",
  border       : false,
  layoutConfig : {
    animate : true
  },
  items : [panel1,panel1,panel1,]
}).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Add toolbar to Ext.Panel

   
<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 p = new Ext.Panel({
        title: "Title",
        width: 300,
        html: "html code <B>here</B>",
        tbar: [{
            text: "Click",
            handler: function(){
               alert("asdf");
            }
        }],
        renderTo: Ext.getBody()
    });
});
</script> 
</body>
</html>

Apply array data to Ext.Panel

  

<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>
<script type="text/javascript">

Ext.onReady(function(){
  var cls = "myclass";
  var member = {
    firstName: "A",
    lastName: "B"
  };
  
  var pnl = new Ext.Panel({
    applyTo: "mainContent",
    width: 200,
    height: 100,
    bodyStyle: "padding:5px",
    title: "title",
    html: String.format("<div class=\"{0}\">{2}, {1}</div>", cls, member.firstName, member.lastName)
  });
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

collapsed Panel

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<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
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = "side";
    var bd = Ext.getBody();
    /*
     *  Form 2  
     */
    bd.createChild({tag: "h2", html: "Form 2 - Adding fieldsets"});
    var fsf = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url:"save-form.php",
        frame:true,
        title: "Simple Form with FieldSets",
        bodyStyle:"padding:5px 5px 0",
        width: 350,
        items: [{
            xtype:"fieldset",
            checkboxToggle:true,
            title: "User Information",
            autoHeight:true,
            defaults: {width: 210},
            defaultType: "textfield",
            collapsed: true,
            items :[{
                    fieldLabel: "First Name",
                    name: "first",
                    allowBlank:false
                },{
                    fieldLabel: "Last Name",
                    name: "last"
                },{
                    fieldLabel: "Company",
                    name: "company"
                }, {
                    fieldLabel: "Email",
                    name: "email",
                    vtype:"email"
                }
            ]
        },{
            xtype:"fieldset",
            title: "Phone Number",
            collapsible: true,
            autoHeight:true,
            defaults: {width: 210},
            defaultType: "textfield",
            items :[{
                    fieldLabel: "Home",
                    name: "home",
                    value: "(888) 555-1212"
                },{
                    fieldLabel: "Business",
                    name: "business"
                },{
                    fieldLabel: "Mobile",
                    name: "mobile"
                },{
                    fieldLabel: "Fax",
                    name: "fax"
                }
            ]
        }],
        buttons: [{
            text: "Save"
        },{
            text: "Cancel"
        }]
    });
    fsf.render(document.body);
});
</script> 
</div>
</body>
</html>

Create Panel with title, width, html and render to body

   
<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 p = new Ext.Panel({
        title: "Title",
        width: 300,
        html: "html code <B>here</B>",
        renderTo: Ext.getBody()
    });

});
</script> 

</body>
</html>

Highlight Panel body

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code from ext3.0.0 -->
<script type="text/javascript">
Ext.onReady(function() {
    var data = {
        name: "A",
        company: "B",
        city: "D",
        state: "E"
    };
    var p = new Ext.Panel({
        title: "Title",
        width: 300,
        html: "html code <B>here</B>",
        tbar: [{
            text: "Template",
            handler: function(){
                var tpl = new Ext.Template(
                    "Name: {name}",
                    "Company: {company}",
                    "Location: {city}, {state}"
                );
                tpl.overwrite(p.body, data);
                p.body.highlight("#00ff00", {block:true});
            }
        }],
        renderTo: Ext.getBody()
    });

});
</script> 

</body>
</html>

Inline panel creation

  

<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() {

        new Ext.Window({
            width        : 300,
            height       : 650,
            title        : "Accordion window",
            layout       : "accordion",
            border       : false,
            layoutConfig : {
                animate : true
            },
            items : [
                {
                    xtype : "panel",
                    title : "Plain Panel",
                    html  : "asdf"
                },
                {
                    title : "Plain Panel 2",
                    html  : "asdf"
                }
            ]
        }).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Load your html file to a Ext.Panel

   

<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>
<script type="text/javascript">
Ext.onReady(function(){
  var example1 = new Ext.Panel({
    applyTo:Ext.getBody(),
    title:"Example 1",
    width:250,
    height:250,
    frame:true,
    autoLoad:{
      url:"your.htm"
    }
  });
});

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

Nested logic to add panel to a window

  
<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() {

new Ext.Window({
  width        : 300,
  height       : 300,
  title        : "Accordion window",
  layout       : "accordion",
  border       : false,
  layoutConfig : {
    animate : true
  },
  items : [
    {
      xtype  : "form",
      title  : "Form Panel",
      defaults : {
        width : 150
      },
      items  : [
        {
          xtype      : "textfield",
          fieldLabel : "Name"
        },
        {
          xtype      : "checkbox",
          fieldLabel : "CheckBox"
        },
        {
          xtype      : "combo",
          fieldLabel : "Type",
          store      : [ "A", "B", "C" ]
        }
      ]
    },
    {
      xtype  : "form",
      title  : "Form Panel",
      defaults : {
        width : 150
      },
      items  : [
        {
          xtype      : "textfield",
          fieldLabel : "Name"
        },
        {
          xtype      : "checkbox",
          fieldLabel : "CheckBox"
        },
        {
          xtype      : "combo",
          fieldLabel : "Type",
          store      : [ "A", "B", "C" ]
        }
      ]
    },
    {
      xtype  : "form",
      title  : "Form Panel",
      defaults : {
        width : 150
      },
      items  : [
        {
          xtype      : "textfield",
          fieldLabel : "Name"
        },
        {
          xtype      : "checkbox",
          fieldLabel : "CheckBox"
        },
        {
          xtype      : "combo",
          fieldLabel : "Type",
          store      : [ "A", "B", "C" ]
        }
      ]
    },
  ]
}).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Render Ext.Panel to a DIV tag

  

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code from ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var myData = {
    records : [
      { name : "Record 0", column1 : "0", column2 : "0" },
      { name : "Record 1", column1 : "1", column2 : "1" },
      { name : "Record 2", column1 : "2", column2 : "2" },
      { name : "Record 3", column1 : "3", column2 : "3" },
      { name : "Record 4", column1 : "4", column2 : "4" },
      { name : "Record 5", column1 : "5", column2 : "5" },
      { name : "Record 6", column1 : "6", column2 : "6" },
      { name : "Record 7", column1 : "7", column2 : "7" },
      { name : "Record 8", column1 : "8", column2 : "8" },
      { name : "Record 9", column1 : "9", column2 : "9" }
    ]
  };

  // Generic fields array to use in both store defs.
  var fields = [
     {name: "name", mapping : "name"},
     {name: "column1", mapping : "column1"},
     {name: "column2", mapping : "column2"}
  ];
    // create the data store
    var gridStore = new Ext.data.JsonStore({
        fields : fields,
    data   : myData,
    root   : "records"
    });

  // Column Model shortcut array
  var cols = [
    { id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"},
    {header: "column1", width: 50, sortable: true, dataIndex: "column1"},
    {header: "column2", width: 50, sortable: true, dataIndex: "column2"}
  ];
  // declare the source Grid
    var grid = new Ext.grid.GridPanel({
    ddGroup          : "gridDDGroup",
        store            : gridStore,
        columns          : cols,
    enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : "name",
        width            : 650,
        height           : 325,
    region           : "west",
        title            : "Data Grid",
    selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
    });
  //Simple "border layout" panel to house both grids
  var displayPanel = new Ext.Panel({
    width    : 650,
    height   : 300,
    layout: "fit",
    renderTo : "panel",
    items    : [
      grid
    ],
    bbar    : [
      "->", // Fill
      {
        text    : "Reset Example",
        handler : function() {
          //refresh source grid
          gridStore.loadData(myData);
        }
      }
    ]
  });
});
</script> 
<div id="panel"></div>
</body>
</html>

Render Panel to body

  

<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 p = new SamplePanel({
        title: "Standard",
        renderTo : Ext.getBody(),
        tbar: [{
            xtype:"splitbutton",
            text: "Menu Button",
            iconCls: "add16",
            menu: [{text: "Menu Button 1"}]
        },"-",{
            xtype:"splitbutton",
            text: "Cut",
            iconCls: "add16",
            menu: [{text: "Cut Menu Item"}]
        },{
            text: "Copy",
            iconCls: "add16"
        },{
            text: "Paste",
            iconCls: "add16",
            menu: [{text: "Paste Menu Item"}]
        },"-",{
            text: "Format",
            iconCls: "add16"
        }]
    });



});
</script> 
<div id="panel"></div>
</body>
</html>

Set layout for Ext.Panel to fit

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

<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>
<!-- Revised from demo code from ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var myData = {
    records : [
      { name : "Record 0", column1 : "0", column2 : "0" },
      { name : "Record 1", column1 : "1", column2 : "1" },
      { name : "Record 2", column1 : "2", column2 : "2" },
      { name : "Record 3", column1 : "3", column2 : "3" },
      { name : "Record 4", column1 : "4", column2 : "4" },
      { name : "Record 5", column1 : "5", column2 : "5" },
      { name : "Record 6", column1 : "6", column2 : "6" },
      { name : "Record 7", column1 : "7", column2 : "7" },
      { name : "Record 8", column1 : "8", column2 : "8" },
      { name : "Record 9", column1 : "9", column2 : "9" }
    ]
  };

  // Generic fields array to use in both store defs.
  var fields = [
     {name: "name", mapping : "name"},
     {name: "column1", mapping : "column1"},
     {name: "column2", mapping : "column2"}
  ];
    // create the data store
    var gridStore = new Ext.data.JsonStore({
        fields : fields,
    data   : myData,
    root   : "records"
    });

  // Column Model shortcut array
  var cols = [
    { id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"},
    {header: "column1", width: 50, sortable: true, dataIndex: "column1"},
    {header: "column2", width: 50, sortable: true, dataIndex: "column2"}
  ];
  // declare the source Grid
    var grid = new Ext.grid.GridPanel({
    ddGroup          : "gridDDGroup",
        store            : gridStore,
        columns          : cols,
    enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : "name",
        width            : 650,
        height           : 325,
    region           : "west",
        title            : "Data Grid",
    selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
    });
  //Simple "border layout" panel to house both grids
  var displayPanel = new Ext.Panel({
    width    : 650,
    height   : 300,
    layout: "fit",
    renderTo : "panel",
    items    : [
      grid
    ],
    bbar    : [
      "->", // Fill
      {
        text    : "Reset Example",
        handler : function() {
          //refresh source grid
          gridStore.loadData(myData);
        }
      }
    ]
  });
});
</script> 
<div id="panel"></div>
</body>
</html>

Set panel height

  

<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 panel1 = {                                          
        html   : "I am Panel1",
        id     : "panel1",
        frame  : true,
        height : 100
    }
    var panel2 = {
        html  : "<b>I am Panel2</b>",
        id     : "panel2",
        frame : true
    }
    
    var myWin = new Ext.Window({                            
        id     : "myWin",
        height : 400,
        width  : 400,
        items  : [
            panel1,
            panel2
        ]
    });
    
    myWin.show();
    
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set Panel layout to Ext.Panel

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
        Ext.onReady(function() {
            var item1 = new Ext.Panel({
                title: "Accordion Item 1",
                html: "&lt;empty panel&gt;",
                cls:"empty"
            });
            var item2 = new Ext.Panel({
                title: "Accordion Item 2",
                html: "&lt;empty panel&gt;",
                cls:"empty"
            });
            var item3 = new Ext.Panel({
                title: "Accordion Item 3",
                html: "&lt;empty panel&gt;",
                cls:"empty"
            });
            var item4 = new Ext.Panel({
                title: "Accordion Item 4",
                html: "&lt;empty panel&gt;",
                cls:"empty"
            });
            var item5 = new Ext.Panel({
                title: "Accordion Item 5",
                html: "&lt;empty panel&gt;",
                cls:"empty"
            });
            var accordion = new Ext.Panel({
                region:"west",
                margins:"5 0 5 5",
                split:true,
                width: 210,
                layout:"accordion",
                items: [item1, item2, item3, item4, item5]
            });
            var viewport = new Ext.Viewport({
                layout:"border",
                items:[
                    accordion, {
                    region:"center",
                    margins:"5 5 5 0",
                    cls:"empty",
                    bodyStyle:"background:#f1f1f1",
                    html:"<br/><br/>&lt;empty center panel&gt;"
                }]
            });
        });
</script>
</body>
</html>

Set title, width and height for Panel

  

<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">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : "panel",
      title : "Child Panel 1",
      html  : "Panels can contain Children",
      frame : true
    }
  ];
}
Ext.onReady(function() {
  new Ext.Panel({
    renderTo : Ext.getBody(),
    title    : "Panel 1",
    width    : 200,
    height   : 180,
    items    : makeChildren("Panel 1")
  });

});
</script> 
<div id="panel"></div>
</body>
</html>

Set width and height for panel

  
<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 childPnl1 = {                                                    
   frame  : true,
   height : 50,
   html   : "My First Child Panel",
   title  : "First"
}

var childPnl2 = {                                                     
   xtype  : "panel",
   width  : 150,
   html   : "Second child",
   title  : "Second"
}
var myWin = new Ext.Window({                                          
   height     : 600,
   width      : 600,
   title      : "A window with a container layout",
   autoScroll : true,                                                
   items      : [                                                     
      childPnl1,
      childPnl2
   ],
});
myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set xtype, title and html for a Panel

  

<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 panel1 =     {
  xtype : "panel",
  title : "Plain Panel",
  html  : "Panel with an xtype specified"
}
new Ext.Window({
  width        : 300,
  height       : 300,
  title        : "Accordion window",
  layout       : "accordion",
  border       : false,
  layoutConfig : {
    animate : true
  },
  items : [panel1,panel1,panel1,]
}).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set X, Y, height, width for a panel

  
<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 myWin = new Ext.Window({
      height     : 300,
      width      : 300,
      layout     : "absolute",
      autoScroll : true,
      id         : "myWin",
      border     : false,
      items      : [
        {
          title : "Panel1",
          x      : 5,
          y      : 5,
          height : 100,
          width  : 100,
          html   : "asdf",
          frame  : true
        },
        {
          title  : "Panel2",
          x      : 10,
          y      : 110,
          height : 75,
          width  : 77,
          html   : "asdf",
          frame  : true
        }
      ]
    });
    
    myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Support for standard Panel features such as framing, buttons and toolbars

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script>
<style type="text/css">
        body .x-panel {
            margin-bottom:20px;
        }
        .icon-grid {
            background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important;
        }
        #button-grid .x-panel-body {
            border:1px solid #99bbe8;
            border-top:0 none;
        }
        .add {
            background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important;
        }
        .option {
            background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important;
        }
        .remove {
            background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important;
        }
        .save {
            background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important;
        }
</style>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<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
 */
Ext.onReady(function(){
    Ext.QuickTips.init();
    var xg = Ext.grid;
    // shared reader
    var 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"},
       {name: "industry"},
       {name: "desc"}
    ]);
    ////////////////////////////////////////////////////////////////////////////////////////
    // Grid 4
    ////////////////////////////////////////////////////////////////////////////////////////
    var sm2 = new xg.CheckboxSelectionModel({
        listeners: {
            // On selection change, set enabled state of the removeButton
            // which was placed into the GridPanel using the ref config
            selectionchange: function(sm) {
                if (sm.getCount()) {
                    grid4.removeButton.enable();
                } else {
                    grid4.removeButton.disable();
                }
            }
        }
    });
    var grid4 = new xg.GridPanel({
        id:"button-grid",
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel([
            sm2,
            {id:"company",header: "Company", width: 40, sortable: true, dataIndex: "company"},
            {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
            {header: "Change", width: 20, sortable: true, dataIndex: "change"},
            {header: "% Change", width: 20, sortable: true, dataIndex: "pctChange"},
            {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
        ]),
        sm: sm2,
        viewConfig: {
            forceFit:true
        },
        columnLines: true,
        // inline buttons
        buttons: [{text:"Save"},{text:"Cancel"}],
        buttonAlign:"center",
        // inline toolbars
        tbar:[{
            text:"Add Something",
            tooltip:"Add a new row",
            iconCls:"add"
        }, "-", {
            text:"Options",
            tooltip:"Blah blah blah blaht",
            iconCls:"option"
        },"-",{
            text:"Remove Something",
            tooltip:"Remove the selected item",
            iconCls:"remove",
            // Place a reference in the GridPanel
            ref: "../removeButton",
            disabled: true
        }],
        width:600,
        height:300,
        frame:true,
        title:"Support for standard Panel features such as framing, buttons and toolbars",
        iconCls:"icon-grid",
        renderTo: document.body
    });});

// Array data for the grids
Ext.grid.dummyData = [
    ["3m Co",71.72,0.02,0.03,"9/1 12:00am", "Manufacturing"],
    ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am", "Manufacturing"],
    ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am", "Manufacturing"],
    ["American Express Company",52.55,0.01,0.02,"9/1 12:00am", "Finance"],
    ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am", "Services"],
    ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am", "Services"],
    ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am", "Manufacturing"],
    ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am", "Services"],
    ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am", "Finance"],
    ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am", "Manufacturing"],
    ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am", "Manufacturing"],
    ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am", "Manufacturing"],
    ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am", "Automotive"],
    ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am", "Computer"],
    ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am", "Manufacturing"],
    ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am", "Computer"],
    ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am", "Computer"],
    ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am", "Medical"],
    ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am", "Finance"],
    ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am", "Food"],
    ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am", "Medical"],
    ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am", "Computer"],
    ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am", "Services", "Medical"],
    ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am", "Food"],
    ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am", "Retail"],
    ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am", "Manufacturing"],
    ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am", "Computer"],
    ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am", "Services"],
    ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am", "Retail"],
    ["Walt Disney Company (The) (Holding Company)",29.89,0.24,0.81,"9/1 12:00am", "Services"]
];
// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
    Ext.grid.dummyData[i].push("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
}
</script>
</body>
</html>

Three level Nested Panel

  

<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">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : "panel",
      title : "Child Panel 1",
      frame : true,
      items : {
        xtype : "panel",
        title : "Child 1 of "Child Panel 1"",
        html  : "a grand child of " + ownerTitle,
        frame : true
      }
    }
  ];
}
Ext.onReady(function() {
  new Ext.Panel({
    renderTo : Ext.getBody(),
    title    : "Panel 1",
    width    : 500,
    height   : 680,
    items    : makeChildren("Panel 1")
  });

});
</script> 
<div id="panel"></div>
</body>
</html>

JavaScript DHTML/Ext JS/Panel — различия между версиями

Текущая версия на 07:21, 26 мая 2010

Содержание

Add bottom Toolbar for Ext.Panel

Add Button to a toolbar on a Ext.Panel

Add children panel to panel

Add Ext.Panel to DIV tag

Add panel to a form

Add panel to window as items

Add panel to window items

Add toolbar to Ext.Panel

Apply array data to Ext.Panel

collapsed Panel

Create Panel with title, width, html and render to body

Highlight Panel body

Inline panel creation

Load your html file to a Ext.Panel

Nested logic to add panel to a window

Render Ext.Panel to a DIV tag

Render Panel to body

Set layout for Ext.Panel to fit

Set panel height

Set Panel layout to Ext.Panel

Set title, width and height for Panel

Set width and height for panel

Set xtype, title and html for a Panel

Set X, Y, height, width for a panel

Support for standard Panel features such as framing, buttons and toolbars

Three level Nested Panel

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:21, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Текущая версия на 07:21, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)
(нет различий)