image editing dialog

[roojs1] / examples / dialog / test-2.js

diff --git a/examples/dialog/test-2.js b/examples/dialog/test-2.js
index c9ad17a..b8efe82 100644 (file)
--- a/examples/dialog/test-2.js
+++ b/examples/dialog/test-2.js
@@ -1,5 +1,4 @@
-var test = {
-
+var uploadCropbox = {
     dialog : false,
     callback : false,
 
@@ -20,69 +19,62 @@ var test = {
         this.dialog = Roo.factory({
             xns : Roo,
             xtype : 'LayoutDialog',
-            width: 600,
-            height: 450,
+            width : 800,
+            height : 600,
             center : {
                 xns : Roo,
                 xtype : 'LayoutRegion'
             },
             items : [
                 {
-                    xns : Roo.form,
-                    xtype : 'Form',
-                    
+                    xtype: 'ContentPanel',
+                    xns: Roo,
+                    region : "center",
+                    items : [
+                        {
+                            xtype : 'UploadCropbox',
+                            xns : Roo.dialog,
+                            minWidth : 720,
+                            minHeight: 480,
+                            buttons: [],
+                            listeners : {
+                                render : function (_self)
+                                {
+                                    _this.cropbox = _self;
+                                },
+                                loadcanvas : function (_self, imageEl)
+                                {
+                                    // if(imageEl.OriginWidth < 720) {
+                                    //     Roo.Msg.show({
+                                    //         title: 'Error',
+                                    //         msg: "Image width should be at least 720",
+                                    //         buttons: {ok : true},
+                                    //         fn: function(res) {
+                                    //             _this.cropbox.selectorEl.dom.click();
+                                    //         }
+                                    //     });
+                                    //     return false;
+                                    // }
+                                }
+                            }
+                        }
+                    ]
                 }
             ],
-            // items: [
-            //     {
-            //         xtype : 'UploadCropbox',
-            //         xns : Roo.dialog,
-            //         minWidth : 60,
-            //         minHeight: 40,
-            //         listeners : {
-            //             arrange : function (_self, formData)
-            //             {
-            //                 console.log("ARRANGE");
-            //                 console.log(formData);
-            //             },
-            //             crop : function (_self, data)
-            //             {
-            //                 console.log("CROP");
-            //                 console.log(data);
-            //             },
-            //             resize : function (_self)
-            //             {
-            //                 console.log("RESIZE");
-            //             },
-            //             rotate : function (_self)
-            //             {
-            //                 console.log("ROTATE");
-            //             },
-            //             render : function (_self)
-            //             {
-            //                 console.log("RENDER");
-            //                 console.log(_self);
-            //                 _this.cropbox = _self;
-            //             }
-        
-            //         }
-            //     }
-            // ],
             buttons : [
                 {
                     xtype : 'Button',
                     xns : Roo,
-                    text : 'Submit',
+                    text : 'Save',
                     listeners : {
                         click : function () {
-                            _this.dialog.hide()
                         }   
                     }
                 },
                 {
                     xtype : 'Button',
                     xns : Roo,
-                    text : 'Close',
+                    text : 'Cancel',
                     listeners : {
                         click : function () {
                             _this.dialog.hide()
@@ -94,6 +86,82 @@ var test = {
     }
 }
 
+var test = {
+
+    dialog : false,
+    callback : false,
+
+    show : function(data, cb)
+    {
+        if (!this.dialog) {
+            this.create();
+        }
+
+        this.callback = cb;
+        this.data = data;
+        this.dialog.show();
+    },
+
+    create : function()
+    {
+        var _this = this;
+        this.dialog = Roo.factory({
+            xns : Roo,
+            xtype : 'LayoutDialog',
+            width : 600,
+            height : 450,
+            center : {
+                xns : Roo,
+                xtype : 'LayoutRegion'
+            },
+            items : [
+                {
+                    xns : Roo,
+                    xtype: 'GridPanel',
+                    region : "center",
+                    grid : {
+                        xns : Roo.grid,
+                        xtype : 'Grid',
+                        cm : [
+                            {
+                                xns : Roo.grid,
+                                xtype : 'ColumnModel',
+                                header : 'test'
+                            }
+                        ],
+                        ds : {
+                            xns: Roo.data,
+                            xtype: 'Store'
+                        },
+                        toolbar : {
+                            xns: Roo,
+                            xtype: 'Toolbar',
+                            items : [
+                                { 
+                                    xtype : 'Button',
+                                    text : 'Add',
+                                    listeners : {
+                                        click : function () {
+                                            uploadCropbox.show();
+                                            document.body.onfocus = function(e) {
+                                                document.body.onfocus = null;
+                                                if(!uploadCropbox.cropbox.selectorEl.dom.files.length) {
+                                                    uploadCropbox.dialog.hide();
+                                                }
+                                            }
+                                            uploadCropbox.cropbox.selectorEl.dom.click();
+                                        }
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                }
+            ],
+        });
+    }
+}
+
 Roo.onReady(function() {
     
     Roo.get('show-dialog-btn').on('click',function () {