學習筆記-extjs3.4 下拉多選框
阿新 • • 發佈:2019-01-05
原先做的時候,在網上找了很多例子,最後定下了LovCombo這個擴充套件例子,比較好看,而且穩定性強一些,暫時還沒發現什麼bug,先貼張圖看看效果。
作為多選的時候,會是一種很好的選擇,下面是主要程式碼。
大多程式碼都是網路學習,僅供參考。<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="extjs/ux/Ext.ux.form.LovCombo.css"> <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="extjs/ext-all-debug.js"></script> <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="extjs/ux/Ext.ux.util.js"></script>//依賴的js檔案 <script type="text/javascript" src="extjs/ux/Ext.ux.form.LovCombo.js"></script> //重寫css定位選中的圖片位置 <style type="text/css"> .ux-lovcombo-icon-checked { background: transparent url(extjs/resources/themes/images/default/menu/checked.gif); } .ux-lovcombo-icon-unchecked { background: transparent url(extjs/resources/themes/images/default/menu/unchecked.gif); } </style> <script type="text/javascript"> Ext.onReady(function(){ var win = new Ext.Window({ title: 'LovCombo', height: 200, width: 200, items: [{ xtype: 'lovcombo', fieldLabel: '下拉多選', mode: 'local', triggerAction: 'all', store: new Ext.data.ArrayStore({ id: 0, fields: [ 'myId', 'displayText' ], data: [[1, 'item1'], [2, 'item2']] }), valueField: 'myId', displayField: 'displayText' }] }).show(); }); </script>