open html and write the following code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../example-data.js"></script>
<script type="text/javascript" src="editor.js"> </script>
</head>
<body>
</body>
</html>
open js file and write the following code and name it as editor:
Ext.onReady(function () {
Ext.widget('panel', {
itemId: 'code-editor',
title: 'ExtJS Code Editor',
width: 800,
height: 600,
layout: 'border',
renderTo: Ext.getBody(),
items: [
{
xtype: 'panel',
region: 'north',
layout: 'fit',
height: 200,
border: false,
bodyStyle: 'background-color: transparent;',
split: true,
items: [
{
itemId: 'code',
xtype: 'textarea',
value: "Ext.create('Ext.panel.Panel', {\r\n" +
" title: 'Hello',\r\n" +
" width: 200, \r\n" +
" height: 100, \r\n" +
" html: '<p>Welcome to Intergraph!!</p>', \r\n" +
" renderTo: 'codeoutput' \r\n" +
"});"
}
],
buttons: [
{
text: 'Run Code',
handler: function () {
var code = this.up('panel').down('#code').getValue();
try {
new Function(code)();
} catch (e) {
Ext.Msg.alert('Error', e.message);
}
}
}
]
},
{
id: 'codeoutput',
xtype: 'component',
autoScroll: true,
region: 'center'
}
]
});
});
No comments:
Post a Comment