index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
renderTo:Ext.getBody(),
width:700,
method:'POST',
layout:'anchor',//這個佈局將子元素的位置與父容器大小進行關聯固定. 如果容器大小改變, 所有固定的子項將按各自的anchor 規則自動被重新渲染固定.-取值：Auto - card - fit - hbox - vbox - anchor - table column border accordion 沒有form
titile:'EXT文本編輯器',
items:[{
xtype:'htmleditor',
anchor:'100%',
name:'content',
height:250,
enableFont:true,//是否啓用選擇字體按鈕。
},{
xtype:'panel',
anchor:'100%',
title:'編輯的內容',
height:250,
html:"<div id='viewcontent'></div>"
}],
bbar:[{
xtype:'tbfill',//一個非渲染的佔位符控件,通知工具欄的佈局開始使用右對齊的按鈕容器方式.
},{
xtype:'button',
text:'確定',
// disabled:true,//True時爲不可用.
//formBind:true,
listeners:{
click:function(){
var thisForm = form.getForm();
thisForm.submit({
url:'php/formSubmit.php',
success:function(form,action){
Ext.getDom('viewcontent').innerHTML = action.result.msg;
}
})
}
}
},{xtype:'tbfill'}]
});
});
</script>
</body>
</html>
formSubmit.php
<?php
$content=$_REQUEST["content"];
$res=array('success'=>true,'msg'=>$content);
echo json_encode($res);
?>
