javascript - 使用 extjs 4.2 覆盖分页工具栏中的页面输入字段

Question

我需要检测 extjs 4.2 中 pagingtoolbar 的页面输入字段中页面更改的更改。我正在浏览文档，但找不到任何方法。我已成功覆盖下一个、上一个和 &c. 按钮，但找不到任何内容来覆盖页面输入字段。你会怎么做？

Answer 1

我在 ExtJS Combobox 组件上添加了 afterrender 监听器。您可以相应地添加以覆盖分页工具栏的输入字段。这是工作代码：

'afterrender' : function(thisCombo){

    thisCombo.getPicker().pagingToolbar.addListener('change', function() {

        var me = this;

        thisCombo.getPicker().pagingToolbar.child("#inputItem").addListener('specialkey', function(field, e) {
            if (e.getKey() == e.ENTER) { 

                /////   Do your modifications here 

                var inputItem = thisCombo.getPicker().pagingToolbar.child('#inputItem').getValue();

                total = me.getPageData().pageCount;

                if (inputItem <= total) {
                    if (me.fireEvent('beforechange', me, inputItem) !== false) {
                        me.store.inputItemPage({
                            // Enter params 
                        });
                    }
                }

            }
        }); 

    });

}

}

Answer 2

谢谢你的帮助。

我还有另一个问题，#inputItem字段。什么事件处理回车键？我需要覆盖这个函数，因为我有一个禁用/启用按钮。

Answer 3

这个例子我的帮助

就像在代码中一样，你可以看到所有的文本，因为它们有 setter 等 http://jsfiddle.net/acteon/sZ3y6/1/

Ext.toolbar.Paging.override({
onLoad: function () {
    var me = this,
        pageData, currPage, pageCount, afterText, count, isEmpty;

    count = me.store.getCount();
    isEmpty = count === 0;
    if (!isEmpty) {
        pageData = me.getPageData();
        currPage = pageData.currentPage;
        pageCount = pageData.pageCount;
        afterText = Ext.String.format(me.afterPageText, (isNaN(pageCount) || (pageCount === 0)) ? 1 : pageCount);
    } else {
        currPage = 0;
        pageCount = 0;
        afterText = Ext.String.format(me.afterPageText, 1);
    }

    Ext.suspendLayouts();
    me.child('#afterTextItem').setText("my precious text");
  // this one is the input field
    me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);
    me.child('#first').setDisabled(currPage === 1 || isEmpty);
    me.child('#prev').setDisabled(currPage === 1 || isEmpty);
    me.child('#next').setDisabled(currPage === pageCount || isEmpty);
    me.child('#last').setDisabled(currPage === pageCount || isEmpty);
    me.child('#refresh').enable();
    me.updateInfo();
    Ext.resumeLayouts(false);

    if (me.rendered) {
        me.fireEvent('change', me, pageData);
    }
}

});