roojs-all.js

[roojs1] / examples / layout / viewpanel.js

diff --git a/examples/layout/viewpanel.js b/examples/layout/viewpanel.js
index 3955200..2f1274c 100644 (file)
--- a/examples/layout/viewpanel.js
+++ b/examples/layout/viewpanel.js
@@ -15,61 +15,103 @@ viewpanel = new Roo.XComponent({
         var _this = this;
         var MODULE = this;
         return {
-            xtype: 'ContentPanel',
+            xtype: 'NestedLayoutPanel',
             xns: Roo,
-            items : [
-                {
-                    xtype: 'View',
-                    xns: Roo,
-                    footer : {
-                        xtype: 'PagingToolbar',
+            region : 'center',
+            layout : {
+                xtype: 'BorderLayout',
+                xns: Roo,
+                items : [
+                    {
+                        xtype: 'ContentPanel',
                         xns: Roo,
-                        pageSize : 20
-                    },
-                    tpl : {
-                        xtype: 'Template',
-                        xns: Roo
-                    },
-                    store : {
-                        xtype: 'Store',
-                        xns: Roo.data,
                         listeners : {
-                            beforeload : function (_self, o)
+                            activate : function (_self)
                             {
-                                o.params = o.params || {};
-                                o.params.test = 1;
+                                Roo.log(_self);
+                                Roo.log(this.el.dom.offsetParent.clientHeight);
+                                this.el.setHeight(this.el.dom.offsetParent.clientHeight-55);
+                                Roo.log('active');
+                            },
+                            render : function (_self)
+                            {
+                                _this.bodypanel = _self;
+                                
+                                Roo.log('render');
                             }
                         },
-                        proxy : {
-                            xtype: 'HttpProxy',
-                            xns: Roo.data,
-                            method : 'GET',
-                            url : baseURL + 'get-images.php'
-                        },
-                        reader : {
-                            xtype: 'JsonReader',
-                            xns: Roo.data,
-                            id : 'id',
-                            root : 'images',
-                            fields : [
-                                {name: 'name', type: 'string'},
-                                {name: 'size', type: 'string'},
-                                {name: 'lastmod', type: 'string'},
-                                {name: 'url', type: 'string'}
+                        region : 'center',
+                        autoCreate : true,
+                        toolbar : {
+                            xtype: 'Toolbar',
+                            xns: Roo,
+                            items : [
+                                {
+                                    xtype: 'Fill',
+                                    xns: Roo.Toolbar
+                                },
+                                {
+                                    xtype: 'Button',
+                                    xns: Roo.Toolbar,
+                                    text : "Reload"
+                                }
                             ]
+                        },
+                        view : {
+                            xtype: 'View',
+                            xns: Roo,
+                            emptyText : "no data",
+                            text : "loading",
+                            footer : {
+                                xtype: 'PagingToolbar',
+                                xns: Roo,
+                                pageSize : 20
+                            },
+                            tpl : {
+                                xtype: 'Template',
+                                xns: Roo,
+                                html : '<div class="thumb-wrap" > ' + 
+                                  
+                                  '{name}'+
+                                
+                                '</div>'
+                            },
+                            store : {
+                                xtype: 'Store',
+                                xns: Roo.data,
+                                listeners : {
+                                    beforeload : function (_self, o)
+                                    {
+                                        o.params = o.params || {};
+                                        o.params.test = 1;
+                                    }
+                                },
+                                proxy : {
+                                    xtype: 'HttpProxy',
+                                    xns: Roo.data,
+                                    method : 'GET',
+                                    url : 'get-images.php'
+                                },
+                                reader : {
+                                    xtype: 'JsonReader',
+                                    xns: Roo.data,
+                                    id : 'id',
+                                    root : 'images',
+                                    fields : [
+                                        {name: 'name', type: 'string'},
+                                        {name: 'size', type: 'string'},
+                                        {name: 'lastmod', type: 'string'},
+                                        {name: 'url', type: 'string'}
+                                    ]
+                                }
+                            }
                         }
                     }
+                ],
+                center : {
+                    xtype: 'LayoutRegion',
+                    xns: Roo
                 }
-            ],
-            toolbar : {
-                xtype: 'Toolbar',
-                xns: Roo,
-                items : [
-                    {
-                        xtype: 'Button',
-                        xns: Roo.Toolbar
-                    }
-                ]
             }
         };
     }