Extjs 下拉框


  剛剛熟練了easyui控件的使用,又開始了如今的這個項目。

這個項目是個半成品。前端使用的是Extjs控件,jsp中沒有代碼。就引用了非常多的js。。。於是乎有種不知所措了呀。

 說實話特別的不想去看那些代碼,第一是不熟悉,第二是太亂沒條理,另一個原因界面連html不想看又不行,公司要做這個項目,你又不能跟公司領導說我不會,。所以還是硬着頭皮看了一天。

 大概了解后,就開始copy,past,將原模塊中js原封不動的考到了jsp頁面,於是乎就這樣執行起來了,僅僅只是調用的不是我自己的方法。后台業務簡單啊,一會兒就把后台弄好了。然后將界面js中的url路徑改為自己的。

到如今為止。界面是有了,文本框下拉框也都出來了,界面也就這些控件。

 extjs中文本框相對下拉框簡單多了。下拉框涉及到賦值,是動態賦值還是靜態賦值。以下就來介紹一下下拉框的這兩種賦值。

1。靜態賦值。

如性別下拉框

代碼例如以下:

<span style="font-size:18px;">          new Ext.form.ComboBox({
      		name : 'usersex_id',
      		id : 'usersex_id',
    		hiddenName : 'usersex_id',
    		typeAhead : true,
    		triggerAction : 'all',
    		lazyRender : true,
    		mode : 'local',
    		store : new Ext.data.ArrayStore({
    					fields : ['value', 'text'],
    					data : [["1", '男'], ["2", '女']]
    				}),
    		valueField : 'value',
    		displayField : 'text',
    		emptyText : '請選擇性別',
    		editable : false,
    		selectOnFocus : true,
    		width : 85
        	})</span>

    當中store項中data數組為下拉框的內容,emptyText為下拉框為空時提示的信息 

顯示結果例如以下圖所看到的:

                                                                        

2。動態賦值

代碼例如以下:

<span style="font-size:18px;">//獲取數據
var userSexStore = new Ext.data.Store({
		proxy : new Ext.data.HttpProxy({
					url : '。。。。。

' }), reader : new Ext.data.JsonReader({}, [{ name : 'value' }, { name : 'communityname' }]), listeners : { // 設置遠程數據源下拉選擇框的初始值 'load' : function(obj) { } } }); userSexStore.load(); //下拉框 new Ext.form.ComboBox({ hiddenName : 'usersex_id', name:'usersex_id', id:'usersex_id', emptyText : '請選擇,。,', triggerAction : 'all', store : userSexStore, displayField : 'text', valueField : 'value', mode : 'local', // 數據會自己主動讀取,假設設置為local又調用了store.load()則會讀取2次。也能夠將其設置為local,然后通過store.load()方法來讀取 editable : false, anchor : '100%' })</span>

     通過url返回的結果是“ [["1", '男'], ["2", '女']]”格式的數據,使用動態賦值時,一定要設置ComboBox的hiddenName屬性。triggerAction:‘all’ 屬性的作用下拉框多個值時選中一個其它的項不會丟失,不設置此屬性其它項會丟失。


    Extjs還在繼續學習中。還是那句話就copy past吧。若僅僅是想它難。那么它就真的難了,着手去做,做出來了也就不難了。。。



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM