--- /dev/null
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Upload Cropbox Dialog Example</title>
+
+ <link rel="stylesheet" type="text/css" href="../../css/roojs-debug.css"/>
+ <link rel="stylesheet" type="text/css" href="../../css-bootstrap/font-awesome.css"/>
+ <link rel="stylesheet" type="text/css" href="../../css/upload-cropbox.css"/>
+ <link rel="stylesheet" type="text/css" href="../../css/alert.css"/>
+ <link rel="stylesheet" type="text/css" href="../../css/buttons.css"/>
+ <link rel="stylesheet" type="text/css" href="../../css/button-groups.css"/>
+ <link rel="stylesheet" type="text/css" href="../examples.css" />
+
+ <script type="text/javascript" src="../../roojs-debug.js"></script>
+ <script type="text/javascript" src="../../Roo/dialog/UploadCropbox.js"></script>
+ <script language="javascript" src="test-2.js"></script>
+ <script type="text/javascript" src="../examples.js"></script>
+
+</head>
+<body>
+
+<h1>Upload Cropbox Dialog</h1>
+<p>This example shows how to create a very simple BasicDialog with "UploadCropbox".</p>
+<input type="button" id="show-dialog-btn" value="test" /><br /><br />
+<p>Note that the js is not minified so it is readable. See
+<button type="button" onclick="RooDocs.viewSource.show('../../../Roo/dialog/UploadCropbox.js')">UploadCropbox.js</button>for the full source code.</p>
+
+</div>
+</body>
+</html>
--- /dev/null
+var uploadCropbox = {
+ 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 : 800,
+ height : 600,
+ center : {
+ xns : Roo,
+ xtype : 'LayoutRegion'
+ },
+ items : [
+ {
+ xtype: 'ContentPanel',
+ xns: Roo,
+ region : "center",
+ items : [
+ {
+ xtype : 'UploadCropbox',
+ xns : Roo.dialog,
+ minWidth : 720,
+ minHeight : 480,
+ outputMaxWidth : 1300,
+ url: 'http://localhost/web.MediaOutreach/press.local.php/Roo/Images.php',
+ 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.value = '';
+ _this.cropbox.selectorEl.dom.click();
+ }
+ });
+ return false;
+ }
+ },
+ arrange : function (_self, formData)
+ {
+ formData.append("onid", "43024");
+ formData.append("ontable", "pressrelease_boilerplate");
+ }
+ }
+ }
+ ]
+ }
+ ],
+ buttons : [
+ {
+ xtype : 'Button',
+ xns : Roo,
+ text : 'Save',
+ listeners : {
+ click : function () {
+ _this.cropbox.crop();
+ }
+ }
+ },
+ {
+ xtype : 'Button',
+ xns : Roo,
+ text : 'Cancel',
+ listeners : {
+ click : function () {
+ _this.dialog.hide();
+ }
+ }
+ }
+ ]
+ });
+ }
+}
+
+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) {
+ 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 () {
+ test.show({});
+ });
+});
\ No newline at end of file
projects / roojs1 / commitdiff