定制ext4 combobox分页导航格式
本实例居于ext-4.1.1a,直接操作ext4生成的combobox分页DOM对象,隐藏不需要的导航对象,缩减导航条的长度。
如果你使用的是其他版本的ext,可以先试试代码,如果没效果可能是DOM结构不一样或者一些方法不兼容导致出错,自己参考对应版本的ext的api修改代码,并用firebug或者其他调试工具查看combobox生成的导航条的DOM结构。
本实例有2种显示方法,效果如下,推荐第二种
设置为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分页导航格式