在前端開發中,常常會使用下拉列表來展示一系列可選項。而在實際應用中,我們可能需要從后端接收一些數據來填充這些選項。這時候,我們就需要使用到ext json
綁定到下拉列表。
首先,我們需要加載ext
庫的相關文件。比如:
<script type="text/javascript" src="extjs/5.1.0/build/ext-all.js"></script><link rel="stylesheet" type="text/css" href="extjs/5.1.0/build/classic/theme-classic/resources/theme-classic-all.css" />
接著,在 HTML 中創建一個下拉列表:
<select id="mySelect"></select>
然后,我們需要創建一個數據模型,并在其上定義數據字段。
var MyModel = Ext.define('MyModel', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ] });
接下來,我們需要創建一個數據源,并指定數據模型和數據地址。
var store = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type: 'ajax', url : 'data.json', reader: { type: 'json', rootProperty: 'data' } }, autoLoad: true });
在數據源中,我們使用了 Ajax 代理,其數據地址指向我們的數據源,該數據源可以是一個 JSON 文件,也可以是后端提供的 API 接口。
最后,我們需要使用下拉列表的bindStore()
方法來綁定數據源到下拉列表。
var mySelect = Ext.getCmp('mySelect'); mySelect.bindStore(store);
當我們運行應用并訪問頁面時,下拉列表就會自動從數據源中獲取數據并填充到選項中了。
上一篇css3水平運動
下一篇css 鼠標點擊換手勢