定制ext4 combobox分页导航格式

  本实例居于ext-4.1.1a,直接操作ext4生成的combobox分页DOM对象,隐藏不需要的导航对象,缩减导航条的长度。


  如果你使用的是其他版本的ext,可以先试试代码,如果没效果可能是DOM结构不一样或者一些方法不兼容导致出错,自己参考对应版本的ext的api修改代码,并用firebug或者其他调试工具查看combobox生成的导航条的DOM结构。
 

  本实例有2种显示方法,效果如下,推荐第二种

定制ext4 combobox分页导航格式 定制ext4 combobox分页导航格式
设置为float定位,按钮连续排列 重新定位后面2个按钮

 

  源代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grouped Header Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        Ext.define('State', {
            extend: 'Ext.data.Model',
            fields: ['abbr','name','slogan']});
        var states = [
            { "abbr": "AL", "name": "Alabama", "slogan": "The Heart of Dixie" },
             { "abbr": "AK", "name": "Alaska", "slogan": "The Land of the Midnight Sun" },
             { "abbr": "AZ", "name": "Arizona", "slogan": "The Grand Canyon State" },
             { "abbr": "AR", "name": "Arkansas", "slogan": "The Natural State" },
             { "abbr": "CA", "name": "California", "slogan": "The Golden State"}];
        var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
            fieldLabel: 'Select a single state',
            renderTo: document.body,
            displayField: 'name',
            pageSize: 10,//设置pageSize显示combobox导航
            listeners: { expand: function () {
                var el = Ext.query('#' + this.picker.getId() + '-paging-toolbar-targetEl')[0], pNodeWidth = el.parentNode.offsetWidth, c = el.childNodes, num = 0;
                if (el.getAttribute('init') == '1') return false; //已经初始化,退出
                el.setAttribute('init', 1); //设置为已经初始化,不需要重复初始化
                for (var i = 0; i < c.length; i++) {
                    if (c[i].className.indexOf('x-btn') != -1) {
                        num++;
                        //方法一,重新定位后面2个按钮,这个设置比较麻烦,推荐方法二
                        /*if (num > 4) c[i].style.display = 'none';//隐藏刷新按钮
                        else if (num > 2) c[i].style.left = (num == 3 ? pNodeWidth - 20 - 24 - 20 : pNodeWidth - 20 - 20) + 'px';*/
                        //方法二,设置为float定位,按钮连续排列
                        if (num > 4) c[i].style.display = 'none';
                        else c[i].style.cssText += ';position:static !important;float:left';
                    }
                    else c[i].style.display = 'none'; //隐藏分隔符号和displayMsg内容
                }
            }
            },
            width: 320,
            labelWidth: 130,
            store: Ext.create('Ext.data.Store', {
                autoDestroy: true,
                model: 'State',
                data: states
            }),
            queryMode: 'local',
            typeAhead: true
        });
    });
</script>
</head>
<body></body>
</html>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:定制ext4 combobox分页导航格式

评论(0)Web开发网
阅读(245)喜欢(0)extjs开发技巧