歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

ExtJS 下拉框

剛剛熟練了easyui控件的使用,又開始了現在的這個項目。這個項目是個半成品,前端使用的是Extjs控件,jsp中沒有代碼,就引用了很多的js。。。於是乎有種不知所措了呀。。。

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

大概了解後,就開始copy,past,將原模塊中js原封不動的考到了jsp頁面,於是乎就這樣運行起來了,只不過調用的不是我自己的方法。後台業務簡單啊,一會兒就把後台弄好了,然後將界面js中的url路徑改為自己的。到現在為止,界面是有了,文本框下拉框也都出來了,界面也就這些控件。

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

1,靜態賦值。如性別下拉框

代碼如下:

        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
         })

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

顯示結果如下圖所示:

2,動態賦值

代碼如下:

//獲取數據
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%'
      })

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

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

ExtJS中運用HTML5 Canvas簡單例子 http://www.linuxidc.com/Linux/2012-04/59389.htm

用ExtJS 4.0打造自己的Web桌面 http://www.linuxidc.com/Linux/2014-08/105208.htm

ExtJS 的詳細介紹:請點這裡
ExtJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved