X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/portal.html
diff --git a/docs/source/portal.html b/docs/source/portal.html
new file mode 100644
index 00000000..83f3f381
--- /dev/null
+++ b/docs/source/portal.html
@@ -0,0 +1,119 @@
+
+
+ The source code
+
+
+
+
+ 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: Ext.example.shortBogusMarkup,
+ title:'Navigation',
+ autoScroll:true,
+ border:false,
+ iconCls:'nav'
+ },{
+ title:'Settings',
+ html: Ext.example.shortBogusMarkup,
+ 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: Ext.example.shortBogusMarkup
+ }]
+ },{
+ columnWidth:.33,
+ style:'padding:10px 0 10px 10px',
+ items:[{
+ title: 'Panel 2',
+ tools: tools,
+ html: Ext.example.shortBogusMarkup
+ },{
+ title: 'Another Panel 2',
+ tools: tools,
+ html: Ext.example.shortBogusMarkup
+ }]
+ },{
+ columnWidth:.33,
+ style:'padding:10px',
+ items:[{
+ title: 'Panel 3',
+ tools: tools,
+ html: Ext.example.shortBogusMarkup
+ },{
+ title: 'Another Panel 3',
+ tools: tools,
+ html: Ext.example.shortBogusMarkup
+ }]
+ }]
+
+ /*
+ * 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);
+// }
+// }
+ }]
+ });
+});
+
+
+
+
\ No newline at end of file