Ext TextArea 在光标位置插入文本_ext textarea 光标位置-优快云博客

前两天做了一个公式编辑窗口，使用textarea作为编辑框，要实现的主要功能有：

1、可以任意编辑，

2、点击操作符号按钮（+-*/等）时在textarea的光标位置插入操作符

3、双击grid字段时，在textarea的光标位置插入字段名

基本代码很容易就完成了，如下：

/**
 * Created with JetBrains WebStorm.
 * User: 常绍新
 * Date: 12-7-27
 * Time: 下午6:36
 * To change this template use File | Settings | File Templates.
 */

Ext.onReady(function () {
Ext.define('TextEdit', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.textedit',

    autoShow: true,
    initComponent: function() {
        var store = Ext.create('Ext.data.Store',{
            fields:['fieldName'],
            data:[
                {fieldName:"供电量"},
                {fieldName:"售电量"},
                {fieldName:"线损率"},
                {fieldName:"月份"},
                {fieldName:"单位"}
            ]
        });
        this.items = [
			{
				region:'north',
                xtype: 'panel',
                title:'公式编辑',
                items: [
                {
                    xtype: 'textareafield',
                    width:400,
                    height:100
                },{
                    xtype:'toolbar',
                    ui:'footer',
                    items:['->',{
                        action:'add_button',
                        text:'+',
                        handler:this.btnOpClick
                    },{
                        action:'subs_button',
                        text : '-',
                        handler:this.btnOpClick
                    },{
                        action:'multi_button',
                        text:'*',
                        handler:this.btnOpClick
                    },{
                        action:'devide_button',
                        text:'/',
                        handler:this.btnOpClick
                    },{
                        action:'percent_button',
                        text:'%',
                        handler:this.btnOpClick
                    },{
                        action:'quete_button',
                        text:'(',
                        handler:this.btnOpClick
                    },{
                        action:'quete_button',
                        text:')',
                        handler:this.btnOpClick
                    }]

                },{
                    width:400,
                    height:200,
                    key:'field',
                    xtype: 'grid',
                    columns:[{header:'字段名称',dataIndex:'fieldName', flex:1}],
                    store:store,
                    listeners:{
                        itemdblclick:{
                            fn:function(view,record,item,index,e,eOpts){
                                view.up("textedit").insertValue("${" + record.get("fieldName") + "}");
                            }
                        }
                    }
                }]
            }
        ];

        this.callParent(arguments);
    },

	insertValue:function(value){
		var ta = this.down("textareafield");
		var oriValue = ta.getValue().toString();
		//ta.setValue(oriValue.substring(0,this.selectionStart) + value + oriValue.substring(this.selectionEnd));
		ta.setValue(oriValue.toString() + value );
	},
    btnOpClick:function(srcObj, record){
   		srcObj.up("textedit").insertValue(" " + srcObj.getText()+" ");
   	}
});

    var textEdit= Ext.create('TextEdit',{

    });
    var win = Ext.create('Ext.Window', {
            width: 400,
            height: 400,
            hidden: false,
            maximizable: true,
            //title: 'Line Chart',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: textEdit
        });

});

但就是在一直得不到textarea的当前光标位置，查Ext的Api文档，也没有一点的提及得到或设置textarea的光标位置的内容。getPosition(),getInsertPosition()都不是得到光标位置，而是得到当前组件的位置。

折腾了一天多，后来终于在网上找到了相关文章，原来是使用inputEl.dom.selectionStart和inputEl.dom.selectionEnd得到当前选中的位置（如果没有选中就是光标位置）。

于是很快的实现了在光标位置插入指定信息的要求。改进后的代码如下：

/**
 * Created with JetBrains WebStorm.
 * User: 常绍新
 * Date: 12-7-27
 * Time: 下午6:36
 * To change this template use File | Settings | File Templates.
 */

Ext.onReady(function () {
Ext.define('TextEdit', {
    extend: 'Ext.panel.Panel',
    alias : 'widget.textedit',

    autoShow: true,
    initComponent: function() {
		this.selectionStart=0;
		this.selectionEnd=0;
        var store = Ext.create('Ext.data.Store',{
            fields:['fieldName'],
            data:[
                {fieldName:"供电量"},
                {fieldName:"售电量"},
                {fieldName:"线损率"},
                {fieldName:"月份"},
                {fieldName:"单位"}
            ]
        });
        this.items = [
			{
				region:'north',
                xtype: 'panel',
                title:'公式编辑',
                //width:"60%",
                items: [
                {
                    xtype: 'textareafield',
                    width:400,
                    height:100,
	 	    enableKeyEvents:true,
                   name : 'formula',
					listeners:{
						blur:{
							fn:function(ta, the, eOpts){
								ta.up("textedit").selectionStart = ta.inputEl.dom.selectionStart;
								ta.up("textedit").selectionEnd = ta.inputEl.dom.selectionEnd;
							}
						}
					}
                },{
                    xtype:'toolbar',
                    ui:'footer',
                    items:['->',{
                        action:'add_button',
                        text:'+',
                        handler:this.btnOpClick
                    },{
                        action:'subs_button',
                        text : '-',
                        handler:this.btnOpClick
                    },{
                        action:'multi_button',
                        text:'*',
                        handler:this.btnOpClick
                    },{
                        action:'devide_button',
                        text:'/',
                        handler:this.btnOpClick
                    },{
                        action:'percent_button',
                        text:'%',
                        handler:this.btnOpClick
                    },{
                        action:'quete_button',
                        text:'(',
                        handler:this.btnOpClick
                    },{
                        action:'quete_button',
                        text:')',
                        handler:this.btnOpClick
                    }]

                },{
                    width:400,
                    height:200,
                    key:'field',
                    xtype: 'grid',
                    columns:[{header:'字段名称',dataIndex:'fieldName', flex:1}],
                    store:store,
                    listeners:{
                        itemdblclick:{
                            fn:function(view,record,item,index,e,eOpts){
                                view.up("textedit").insertValue("${" + record.get("fieldName") + "}");
                            }
                        }
                    }
                }]
            }
        ];

        this.callParent(arguments);
    },

	insertValue:function(value){
		var ta = this.down("textareafield");
		var oriValue = ta.getValue().toString();
		ta.setValue(oriValue.substring(0,this.selectionStart) + value + oriValue.substring(this.selectionEnd));
		//ta.setValue(oriValue.toString() + value );
		this.selectionStart += value.length;
		this.selectionEnd += value.length;
	},
    btnOpClick:function(srcObj, record){
   		srcObj.up("textedit").insertValue(" " + srcObj.getText()+" ");
   	}
});

    var textEdit= Ext.create('TextEdit',{

    });
    var win = Ext.create('Ext.Window', {
            width: 400,
            height: 400,
            hidden: false,
            maximizable: true,
            //title: 'Line Chart',
            renderTo: Ext.getBody(),
            layout: 'fit',
            items: textEdit
        });

});