Question

我需要检测extjs 4.2中pagingtoolbar页面输入字段中页面更改的变化。我正在浏览文档，但找不到任何方法。我已成功覆盖了next，previous，＆amp; 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

这个例子是我的帮助

在代码中，您可以将所有文本都设置为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);
    }
}

}）;

Answer 3

感谢您的帮助。

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

使用extjs 4.2覆盖pagingtoolbar中的页面输入字段

3 个答案: