Extjs下拉框擴充套件

2021-07-03 17:14:21 字數 1534 閱讀 2018

本文主要講解了下拉框的基礎使用和擴充套件使用.擴充套件使用本文寫了乙個動態變化元件型別的示例。

1、基礎使用部分** 只介紹了常用屬性。

//使用 new 或者 ext.create 方法例項化物件

//下拉框資料store物件

var combostore = new ext.data.store(

}});//下拉框物件

var combo = new ext.form.combobox();

以上**combostore鏈結更改為你自己的鏈結,fields放入你的字段,即可生成下拉框,到此,基礎部分結束。

2、擴充套件使用部分** 自定義屬性動態生成文字框型別

適應需求:根據選擇的下拉框項,獲取選擇欄位的型別,生成對應型別的輸入/選擇框(你們可自定義設定更多的型別);

結果圖:

選擇日期型別的值 :

選擇文字型別的值 :

**:

//屬性實體 對應屬性表 (只新增了部分屬性,可根據自己特殊需求新增)

public class

propertybean

/***************************js**************************/

var indexbtn = new ext.button.button(

});//預設下拉框右側的輸入框

var searchfield = new ext.form.field();

//下拉框的store

var combostore = new ext.data.store(

}});//獲取搜尋框 根據屬性bean的值

function getsearchfield(property,item,isselectcombo);

//如果是日期型別的 覆蓋預設配置 可自定義更多型別的判斷,改變生成的元件

if(property.datatype == 'd'));

if(isselectcombo));}}

}item.items[0] = config;

}//新增自定義屬性 type --> 用於獲取所需生成的右側元件型別

var combo = new ext.form.combobox(;

getsearchfield(records[0].raw,items,true);

*******.add(items.items[0]); //工具條新增根據引數生成的新元件

*******.add(indexbtn); //工具條重新新增搜尋按鈕

*******.dolayout(); //工具條重新布局}}

});var ******* = new ext.*******.*******();

extJs之下拉框聯動

在ext的世界裡面,我重新感受到了在學校裡玩swing的記憶.那時我們都需要為乙個控制項建立乙個資料來源,在把這個資料來源繫結在控制項上.ext也是如此.首先,兩個下拉框,第乙個下拉框首先load資料來源,在select的事件中在load第二個資料來源,這就是乙個簡單的二級聯動的實現原理了.第乙個下...

extjs 下拉框增加空選項

資料字典下拉控制項 ext.ns uc uc.cbodic function config listeners var rs new ext.data.record data store.insert 0 rs store storedic,triggeraction all querymode l...

extjs動態和靜態載入下拉框

載入組 var portstore new ext.data.store reader new ext.data.jsonreader var khsjfzcombo new ext.form.combobox var checkflag new ext.form.combobox displayf...