ExtJS——文本编辑器

来源:互联网 发布:青年网络公开课 官网 编辑:程序博客网 时间:2024/04/29 11:17
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);  ?>  



0 0
原创粉丝点击