Eextj3.x扩展（转）

guo583

浏览: 75473 次
性别:
来自: 厦门

最近访客更多访客>>

angel20082008

shunshuiyuanxin

zwljava

直下看山河

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Extjs

http://www.cnblogs.com/dickhead/

2011年8月6日

继续ext3.x，扩展3

这个扩展可以通过插件支持的方式很方便的让表格的行可以拖动排序，下面是预览效果。HTML页面的代码可以看预览效果的框架页的代码

/*
** edit by Dickhead
** goal 让GridPanel的行支持拖动排序的插件 
** 插件方式支持
** time 2011-08-05 22:04:27
*/

//<extension>
(function () {
    //先扩展一个拖放操作的放置区
    Ext.ns('Ext.ux.grid');
    Ext.ux.grid.GridDropZone = Ext.extend(Ext.dd.DropZone, {
        ddGroup: 'GridDD',
        constructor: function (grid, config) {
            this.view = grid.getView();
            Ext.ux.grid.GridDropZone.superclass.constructor.call(this, this.view.scroller.dom, config);
            this.proxyEl = document.createElement('div');
            this.proxyEl.style.cssText = "background:url(http://images.cnblogs.com/cnblogs_com/dickhead/314392/o_arrow_right.png);" +
            "width:16px;height:16px;position:absolute;";
            Ext.fly(this.proxyEl).insertAfter(this.view.scroller).hide();
        },
        getTargetFromEvent: function (e) {
            return e.getTarget(this.view.rowSelector);
        },
        onNodeEnter: function (target, dd, e, data) {
            var rowIndex = this.view.findRowIndex(target);
            data.targetRowIndex = rowIndex;
            if (rowIndex !== false) {
                rowIndex < data.rowIndex && (rowIndex += 1);
                data.targetRowIndex = rowIndex;
                if (rowIndex !== data.rowIndex) {
                    Ext.fly(this.proxyEl).show().alignTo(target, 'br-bl', [16, 9]);
                    return;
                }
            }
            Ext.fly(this.proxyEl).hide();
        },
        onNodeOut: function () {
            Ext.fly(this.proxyEl).hide();
        },
        onNodeOver: function (target, dd, e, data) {
            if (data.targetRowIndex !== false && data.targetRowIndex !== data.rowIndex) {
                return Ext.dd.DropZone.prototype.dropAllowed;
            } else {
                return Ext.dd.DropZone.prototype.dropNotAllowed;
            }
        },
        onNodeDrop: function (target, dd, e, data) {
            if (data.targetRowIndex !== data.rowIndex) {
                var record = data.grid.store.getAt(data.rowIndex);
                data.grid.store.data.removeAt(data.rowIndex);
                data.grid.store.data.insert(data.targetRowIndex, record);
                this.view.refresh();
                return true;
            }
            return false;
        },
        destroy: function () {
            Ext.destroy(this.proxyEl);
            delete this.proxyEl;
            Ext.ux.grid.GridDropZone.destroy.apply(this, arguments);
        }
    });

    //支持行拖动的插件
    //扩展自Ext.util.Observable方便以后添加事件支持
    Ext.ux.grid.RowGragable = Ext.extend(Ext.util.Observable, {
        init: function (grid) {
            grid.enableDragDrop = true;
            var group = Math.random().toString();
            grid.ddGroup = group;
            var dropZone;
            grid.on('afterrender', function () {
                dropZone = new Ext.ux.grid.GridDropZone(grid, { ddGroup: group });
            });
            grid.on('destroy', function () {
                dropZone.destroy();
            });
        }
    })
})();
//</extension>

//sample 使用插件让表格支持行拖动
Ext.onReady(function () {
    Ext.get('loading').remove();
    new Ext.grid.GridPanel({
        height: 130, plugins: [new Ext.ux.grid.RowGragable()],
        columns: [
            new Ext.grid.RowNumberer({ renderer: function () { return '&nbsp;'; } }),
            { header: '书名', dataIndex: 'BookName' },
            { header: '作者', dataIndex: 'Author' },
            { header: '价格', dataIndex: 'Price' },
            { header: '出版日期', dataIndex: 'PublishDate' }
        ],
        store: {
            xtype: 'simplestore', fields: ['BookName', 'Author', 'Price', 'PublishDate'],
            data: [
                ['CLR via C#', 'Jeffrey Richter', '99.0', '2010-04-13'],
                ['北京售楼小姐', '不详', '54.0', '2011-02-13'],
                ['武经七书1', '大概是神', '54.0', '2010-04-13'],
                ['空谷幽兰', 'somebody', '99.0', '2010-04-13']
            ]
        },
        renderTo: 'main'
    });
})

posted @ 2011-08-06 00:08 Dickhead 阅读(140) 评论(0) 编辑

2011年8月5日

继续ext3.x，扩展2

简单的扩展，让表单的tooltip更简单，博客园写东西没预览功能吗？下面是预览效果，哈哈，看了下还好

/*
** edit by dickhead
** goal 扩展form表单元素，可以便捷的配置其tooltip 。
** 以插件或者其他方便插入的方式实现的扩展
** time 2011-08-04 23:06:45
*/

//<extension>
(function () {
    var fieldTipTpl = new Ext.Template([
            '<div style="padding-left:18px;border-bottom:1px dotted gray;',
            'background:url(http://images.findicons.com/files/icons/99/office/16/info.png) no-repeat left center;',
            'font-weight:bold;padding-bottom:2px;">提示</div>',
            '<div style="padding:3px 2px;">{tip}</div>'
        ].join(''));
    fieldTipTpl.compile();
    /*
    ** @cfg tooltip {string} 一段描述性文字，可以是html代码段
    */
    Ext.form.Field.prototype.afterRender = Ext.form.Field.prototype.afterRender.createSequence(function () {
        if (this.tooltip) {
            var el = this.el.next() || this.el; //为什么要next?因为triggerfield(日期/下拉等空间)后面借这个img标签。
            var tip = new Ext.ToolTip({
                target: el, autoHide: false, anchor: 'left',
                html: fieldTipTpl.apply({ tip: this.tooltip }),
                showDelay: 100000,
                onTargetOver: Ext.emptyFn
            });
            this.on('focus', function () {
                tip.show();
            });
            this.on('blur', function () {
                tip.hide();
            });
            this.on('destroy', function () {
                tip.destroy();
            });
        }
    });
})();
//</extension>

Ext.onReady(function () {
    new Ext.form.FormPanel({
        border: false,
        items: [
            { xtype: 'textfield', tooltip: '不是你的就不是你的，该放手的就要放手，包括内存资源。',
                fieldLabel: '兴趣史'
            },
            { xtype: 'datefield', fieldLabel: '选择个日期',
                tooltip: 'Ext为什么叫ext。。。'
            }
        ],
        renderTo: 'main'
    });
});

posted @ 2011-08-05 00:14 Dickhead 阅读(84) 评论(0) 编辑

2011年3月8日

js—extjs—扩展1

还是截个图吧,我表述的不是很清楚

本人用的是extjs3.3.1.如扩展代码无法使用，请根据各个版本进行修改。

扩展内容：本扩展用于使Ext.grid.GridView（以及任何继承自Ext.grid.GridView的类，如GroupingView、LockingGridView）支持如下的功能

1、在双击表头的调整列宽的区域，能够自动的将该列调整到最适合的宽度，够刚好容纳该列中最宽的内容

2、在列头菜单中加入一个菜单项，菜单项功能也是实现1中的功能。

说明：下文不会对代码进行详细的解释，许多细节希望读者可以自己细究，顺便提下，很多细节需要通过阅读ext.debug.js去了解。图我就不截了，扩展代码的使用方法很简单，只要将它放在一个Js文件中，添加到页面就可以支持上述的两个扩展功能了。


//使得双击表头的resize区域可以让该列自动将宽度置为最适合宽度{
    Ext.grid.GridView.prototype.splitHandleWidth = 8;
Ext.grid.GridView.SplitDragZone.prototype.init = Ext.grid.GridView.SplitDragZone.prototype.init.createSequence(function (id, sGroup, config) {
    Ext.EventManager.on(this.id, 'dblclick', this.handleDblClick, this);
    Ext.EventManager.on(this.id, 'click', this.handleClick, this);
});
Ext.grid.GridView.SplitDragZone.prototype.destroy = Ext.grid.GridView.SplitDragZone.prototype.destroy.createSequence(function () {
    Ext.EventManager.un(this.id, 'dblclick', this.handleDblClick, this);
    Ext.EventManager.un(this.id, 'click', this.handleClick, this);
});
Ext.grid.GridView.SplitDragZone.prototype.setOuterHandleElId = Ext.grid.GridView.SplitDragZone.prototype.setOuterHandleElId.createSequence(function (id) {
    Ext.EventManager.on(id, 'dblclick', this.handleDblClick, this);
    Ext.EventManager.on(id, 'click', this.handleClick, this);
});
Ext.grid.GridView.SplitDragZone.prototype.handleClick = function (e, el, o) {
    var t = this.view.findHeaderCell(e.getTarget());
    this.isHit = false;
    if (t && this.allowHeaderDrag(e)) {
        var xy = this.view.fly(t).getXY(),
            x = xy[0],
            exy = e.getXY(),
            ex = exy[0],
            w = t.offsetWidth,
            adjust = false;

        if ((ex - x) <= this.hw) {
            adjust = -1;
        } else if ((x + w) - ex <= this.hw) {
            adjust = 0;
        }
        if (adjust !== false) {
            this.cm = this.grid.colModel;
            var ci = this.view.getCellIndex(t);
            if (adjust == -1) {
                if (ci + adjust < 0) {
                    return;
                }
                while (this.cm.isHidden(ci + adjust)) {
                    --adjust;
                    if (ci + adjust < 0) {
                        return;
                    }
                }
            }
            this.cellIndex = ci + adjust;
            if (this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)) {
                this.isHit = true;
                e.preventDefault();
                e.stopPropagation();
            }
        }
    }
}
Ext.grid.GridView.prototype.fixColumnWidth = function (colIndex) {
    var maxW = Ext.fly(this.getHeaderCell(colIndex)).getTextWidth();
    for (var i = 0; i < this.grid.store.getCount(); i++) {
        maxW = Math.max(maxW, Ext.fly(this.getCell(i, colIndex)).getTextWidth());
    }
    this.cm.setColumnWidth(colIndex, maxW + 10);
}
Ext.grid.GridView.SplitDragZone.prototype.handleDblClick = function (e, el, o) {
    if (this.isHit === true) {
        this.view.fixColumnWidth(this.cellIndex);
    }
}
//向列菜单中增加一个菜单项
Ext.grid.GridPanel.prototype.afterRender = Ext.grid.GridPanel.prototype.afterRender.createSequence(function () {
    if(this.view.hmenu){
    this.view.hmenu.add([
        { text: '合适列宽', id: this.getId() + '-auto-colwidth' }
    ]);
    this.view.hmenu.on('show', function () {
        var index = this.view.hdCtxIndex;
        if (this.colModel.isResizable(index)) {
            this.view.hmenu.get(this.getId() + '-auto-colwidth').show();
        } else {
            this.view.hmenu.get(this.getId() + '-auto-colwidth').hide();
        }
        this.view.hmenu.doLayout();
    }, this);
    this.view.hmenu.get(this.getId() + '-auto-colwidth').on('click', function () {
        this.view.fixColumnWidth(this.view.hdCtxIndex);
    }, this);
    }
})
//}