--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.onReady(function(){\r
+\r
+ // NOTE: This is an example showing simple state management. During development,\r
+ // it is generally best to disable state management as dynamically-generated ids\r
+ // can change across page loads, leading to unpredictable results. The developer\r
+ // should ensure that stable state ids are set for stateful components in real apps.\r
+ Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
+\r
+ // create some portlet tools using built in Ext tool ids\r
+ var tools = [{\r
+ id:'gear',\r
+ handler: function(){\r
+ Ext.Msg.alert('Message', 'The Settings tool was clicked.');\r
+ }\r
+ },{\r
+ id:'close',\r
+ handler: function(e, target, panel){\r
+ panel.ownerCt.remove(panel, true);\r
+ }\r
+ }];\r
+\r
+ var viewport = new Ext.Viewport({\r
+ layout:'border',\r
+ items:[{\r
+ region:'west',\r
+ id:'west-panel',\r
+ title:'West',\r
+ split:true,\r
+ width: 200,\r
+ minSize: 175,\r
+ maxSize: 400,\r
+ collapsible: true,\r
+ margins:'35 0 5 5',\r
+ cmargins:'35 5 5 5',\r
+ layout:'accordion',\r
+ layoutConfig:{\r
+ animate:true\r
+ },\r
+ items: [{\r
+ html: Ext.example.shortBogusMarkup,\r
+ title:'Navigation',\r
+ autoScroll:true,\r
+ border:false,\r
+ iconCls:'nav'\r
+ },{\r
+ title:'Settings',\r
+ html: Ext.example.shortBogusMarkup,\r
+ border:false,\r
+ autoScroll:true,\r
+ iconCls:'settings'\r
+ }]\r
+ },{\r
+ xtype:'portal',\r
+ region:'center',\r
+ margins:'35 5 5 0',\r
+ items:[{\r
+ columnWidth:.33,\r
+ style:'padding:10px 0 10px 10px',\r
+ items:[{\r
+ title: 'Grid in a Portlet',\r
+ layout:'fit',\r
+ tools: tools,\r
+ items: new SampleGrid([0, 2, 3])\r
+ },{\r
+ title: 'Another Panel 1',\r
+ tools: tools,\r
+ html: Ext.example.shortBogusMarkup\r
+ }]\r
+ },{\r
+ columnWidth:.33,\r
+ style:'padding:10px 0 10px 10px',\r
+ items:[{\r
+ title: 'Panel 2',\r
+ tools: tools,\r
+ html: Ext.example.shortBogusMarkup\r
+ },{\r
+ title: 'Another Panel 2',\r
+ tools: tools,\r
+ html: Ext.example.shortBogusMarkup\r
+ }]\r
+ },{\r
+ columnWidth:.33,\r
+ style:'padding:10px',\r
+ items:[{\r
+ title: 'Panel 3',\r
+ tools: tools,\r
+ html: Ext.example.shortBogusMarkup\r
+ },{\r
+ title: 'Another Panel 3',\r
+ tools: tools,\r
+ html: Ext.example.shortBogusMarkup\r
+ }]\r
+ }]\r
+ \r
+ /*\r
+ * Uncomment this block to test handling of the drop event. You could use this\r
+ * to save portlet position state for example. The event arg e is the custom \r
+ * event defined in Ext.ux.Portal.DropZone.\r
+ */\r
+// ,listeners: {\r
+// 'drop': function(e){\r
+// Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + \r
+// e.columnIndex + '<br />Position: ' + e.position);\r
+// }\r
+// }\r
+ }]\r
+ });\r
+});\r
+\r
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff