extjs4中Ext.Editor编辑控件用法

1.用文本框编辑普通文本
下面通过一个编辑控件作用在span标签上,双击该标签即可编辑该标签的文本类容。

 代码如下 复制代码

[html]
    <h1>用文本框编辑普通文本</h1>
    <div class="content">
    <span id="span1">请双击我修改文字</span>
    </div>

[Js]
    //用文本框编辑普通文本
    var editor1 = new Ext.Editor({
        shadow: false,
        completeOnEnter: true,      //按回车时自动完成
        cancelOnEsc: true,          //按ESC自动退出编辑
        updateEl: true,            //有变化时更新
        ignoreNoChange: true,       //不理会没有变化的情况
        listeners: {
            complete: function (editor, value, oldValue) {
                Ext.Msg.alert('文本被改变', "从“" + oldValue + "” 变为“" + value + "”");
            }
        },
        field: {
            allowBlank: false,
            xtype: 'textfield',
            width: 150,
            selectOnFocus: true
        }
    });

    Ext.get("span1").on('dblclick', function (event, span1_dom) {
        editor1.startEdit(span1_dom);
    });

效果图片如下

效果如下:

处于编辑状态时:

时间: 2024-11-14 12:44:20

extjs4中Ext.Editor编辑控件用法的相关文章

extjs4中Ext.toolbar.Paging分页工具栏控件

 代码如下 复制代码 [Js]     var store = Ext.create('Ext.data.Store', {         fields: ['IntData', 'StringData', 'TimeData'],         pageSize: 15,         proxy: {             type: 'ajax',             url: 'PagingToolbar1Json',             reader: {       

ASP.NET中repeater控件用法实例_实用技巧

本文实例讲述了ASP.NET中repeater控件用法.分享给大家供大家参考.具体实现方法如下: repeater绑定数据: 复制代码 代码如下: protected void Page_Load(object sender, EventArgs e) {         if(!IsPostBack)             BindStudent(); } private void BindStudent() {         string str = ConfigurationManag

Android开发中include控件用法分析_Android

本文实例讲述了Android开发中include控件用法.分享给大家供大家参考,具体如下: 我们知道,基于Android系统的应用程序的开发,界面设计是非常重要的,它关系着用户体验的好坏.一个好的界面设计,不是用一个xml布局就可以搞定的.当一个activity中的控件非常多的时候,所有的布局文件都放在一个xml文件中,很容易想象那是多么糟糕的事情!笔者通过自身的经历,用include控件来解决这个问题,下面是一个小例子,仅仅实现的是布局,没有响应代码的设计. user.xml文件内容如下: <

ext net-VS中安装ext.net后控件无法正确显示,浏览器中查看正常

问题描述 VS中安装ext.net后控件无法正确显示,浏览器中查看正常 设计界面中EXT控件显示 please configure in source view

Visula Basic工程-引用和工程-部件中的控件用法有什么不同

问题描述 Visula Basic工程-引用和工程-部件中的控件用法有什么不同 Visula Basic工程-引用和工程-部件中的控件用法有什么不同,是不是引用的控件必须先new才能使用? 解决方案 通常工程-引用是activex dll,而工程-部件是activex-ocx,前者是库,后者是界面控件. 解决方案二: 说VB.net 吧?通常不需要 new , 使用方法并没有大的区别

【大神sos】后台创建了ext的checkbox控件,添加到界面的panel中,如何设置checkbox之间的距离

问题描述 [大神sos]后台创建了ext的checkbox控件,添加到界面的panel中,如何设置checkbox之间的距离 解决方案 http://www.itzhai.com/extjs-based-on-background-data-of-dynamically-created-checkboxgroup-method.html

Android实现在列表List中显示半透明小窗体效果的控件用法详解_Android

本文实例讲述了Android实现在列表List中显示半透明小窗体效果的控件用法.分享给大家供大家参考,具体如下: Android 在列表List中显示半透明小窗体效果的控件,多的不多直接上代码,要说的都在注释里了: import com.hiapk.market.R; import android.content.Context; import android.graphics.PixelFormat; import android.os.Handler; import android.view

Android中日期与时间设置控件用法实例_Android

本文实例讲述了Android中日期与时间设置控件用法.分享给大家供大家参考.具体如下: 1.日期设置控件:DatePickerDialog 2.时间设置控件:TimePickerDialog 实例代码: 页面添加两个Button,单击分别显示日期设置控件和时间设置控件,还是有TextView控件,用于显示设置后的系统时间 main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

Android中日期与时间设置控件用法实例

本文实例讲述了Android中日期与时间设置控件用法.分享给大家供大家参考.具体如下: 1.日期设置控件:DatePickerDialog 2.时间设置控件:TimePickerDialog 实例代码: 页面添加两个Button,单击分别显示日期设置控件和时间设置控件,还是有TextView控件,用于显示设置后的系统时间 main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x