1. 程式人生 > >學習筆記-extjs3.4 下拉多選框

學習筆記-extjs3.4 下拉多選框

      原先做的時候,在網上找了很多例子,最後定下了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>
大多程式碼都是網路學習,僅供參考。