/
index.html
166 lines (151 loc) · 6.05 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!--
* Author: Sierk Hoeksma. WebBlocks.eu
* Copyright 2007-2008, WebBlocks. All rights reserved.
*
* This extension adds Gui Designer Support to ExtJs
************************************************************************************
* This file is distributed on an AS IS BASIS WITHOUT ANY WARRANTY;
* without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE.
************************************************************************************
License: This source is licensed under the terms of the Open Source LGPL 3.0 license.
Commercial use is permitted to the extent that the code/component(s) do NOT become
part of another Open Source or Commercially licensed development library or toolkit
without explicit permission.Full text: http://www.opensource.org/licenses/lgpl-3.0.html
* Donations are welcomed: http://donate.webblocks.eu
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="ExtJs Gui Designer" content="A Gui Desginer for ExtJs">
<meta name="keywords" content="Gui, Designer, FormBuilder, GuiDesigner, ExtJs, Json, Gui Designer">
<link rel="shortcut icon" href="icons/favicon.ico" >
<title>ExtJs Gui Designer</title>
<!-- The ExtJs base 2.2, version 2.0.2 is still supported -->
<link rel="stylesheet" type="text/css" href="css/Loading.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<!-- Look for a change log at changes.txt -->
</head>
<body style="overflow:hidden;">
<div id="loading-mask"></div>
<div id="loading">
<div class="loading-indicator"><img src="icons/loading-balls.gif" style="margin-right:8px;" align="absmiddle"/>Loading GuiDesigner....</div>
</div>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<!-- Utility class which contains require -->
<script id="js/Ext.ux.Util.js" src="js/Ext.ux.Util.js" type="text/javascript"></script>
<!-- Now load based on action a compressed or debugable version of desginer -->
<script>
var forceCompressed = false;
Ext.SSL_SECURE_URL="extjs/resources/images/default/s.gif";
Ext.BLANK_IMAGE_URL="extjs/resources/images/default/s.gif";
//Load localXHR.js when not running in webserver
if (document.location.protocol == 'file:') require('localXHR','js');
/*
You can now use the designer as panel, JSON can contain javascript and information
of base info is stored in special tag Window. enabling auto create window/frame see show code
*/
var phpSupport; // Flag is set in index.php to indicate whe support PHP
var cookies = new Ext.state.CookieProvider();
var options = cookies.get('Designer.Options') ||
{dock : 1,
compressed : 1,
codepress : 1,
autoresize : 1,
floatheight : 480,
floatwidth : 580,
cmpfiles : "{0}ThirdParty.Components.json"};
//Url based actions
var windowMode = Ext.ux.UTIL.getUrlAction('window',options.float)==1; //Change this flag to true if you want designer to be a window
var docked = Ext.ux.UTIL.getUrlAction('docked',options.dock)==1;
var nocache = Ext.ux.UTIL.getUrlAction('nocache',options.nocache)==1;
var autoResize = Ext.ux.UTIL.getUrlAction('autoresize',options.autoresize)==1;
var cmpfiles = (options.cmpfiles || "").replace('\r').split("\n");
var designer; //Variable used to save the designer plugin
if (forceCompressed || (Ext.ux.UTIL.getUrlAction('compressed',options.compressed)==1 &&
Ext.ux.UTIL.getUrlAction('debug',0)==0)) {
require('Ext.ux.guid.plugin.Designer.css;Ext.ux.guid.plugin.Designer-all',
{basedir:'compressed',cssdir:'css',nocache: nocache});
} else {
require('Ext.ux.guid.plugin.Designer.css;Ext.ux.Override;' +
'Ext.ux.CodePress.js;Ext.ux.ComponentCollection;Ext.ux.Json;' +
'Ext.ux.form.CodeField;Ext.ux.data.HttpMergeProxy;Ext.ux.JsonPanel;' +
'Ext.ux.JsonWindow;Ext.ux.guid.tree.JsonTreeLoader;' +
'Ext.ux.guid.tree.CodeLoader;Ext.ux.guid.grid.PropertyGrid;' +
'Ext.ux.guid.data.Repository;Ext.ux.guid.tree.RepositoryLoader;'+
'Ext.ux.guid.data.CookieRepository;Ext.ux.guid.data.PHPFileRepository;'+
'Ext.ux.guid.plugin.Designer',
{basedir:'js',cssdir:'css',nocache: nocache});
}
//Items is the array with the designer area
var items = docked
? [{ region : 'west',
layout : 'fit',
collapsible : true,
split : true,
border : false,
id : 'toolbox',
xtype : 'panel',
title : 'GuiDesigner',
width : 237
}]
: [];
items.push({
region:'center',
layout:'fit',
border:false,
bodyBorder:false,
style:'padding:3px 3px;background:black',
items:{
border:false,
bodyBorder:false,
bodyStyle:'background:black;border:dashed green 1px;',
xtype :'jsonpanel',
plugins : [
designer = new Ext.ux.guid.plugin.Designer({
codePress : !Ext.isSafari && options.codepress==1,
docPath : forceCompressed ? 'http://www.webblocks.eu/designer/doc/' : 'doc/',
componentFiles : cmpfiles,
autoResize : autoResize,
dockedMode : docked,
toolboxTarget : 'toolbox',
nocache : nocache,
customProperties : true
, repository : phpSupport
? new Ext.ux.guid.data.PHPFileRepository()
: new Ext.ux.guid.data.CookieRepository()
})
]
}
});
if (windowMode) {
var container = new Ext.Window({
height : (Ext.ux.UTIL.getUrlAction('height',options.floatheight || 480)),
width : (Ext.ux.UTIL.getUrlAction('width',options.floatwidth || 580)),
maximizable : true,
closable : false,
title : 'Designer Window',
layout : 'border',
items: items
}
).show();
//Force designer to popup.
designer.toolbox(true);
} else {
new Ext.Viewport({
layout : 'border',
items: items
});
}
Ext.onReady(function (){
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({
remove:true
});
}, 350);
});
</script>
</body>
</html>