Ext.js5(加载本地数据)(自定义模板完成自定义UI)(29)
2015-12-20 14:05
579 查看
view
model
store
/** * This example illustrates a combo box which loads data from a local array * and uses a custom item template. * 这个例子演示了组合框从本地数组加载数据,并使用了一个自定义的模板 */ Ext.define('KitchenSink.view.form.combobox.CustomTemplate', { extend: 'Ext.form.Panel', xtype: 'custom-template-combo', title: 'Custom Template ComboBox', width: 500, layout: 'form', viewModel: {}, items: [{ xtype: 'fieldset', layout: 'anchor', items: [{ xtype: 'component', anchor: '100%', html: [ '<h3>Custom Item Templates</h3>', //主要是学习一下怎么用自定义模板创自定义UI,列表项的再现是通过重写了getInnerTpl 的方法,这样的情况下每一个元素都显示国家的缩写并且还有快速提示 '<p>This ComboBox uses the same data, but also illustrates ', 'how to use an optional custom template to create custom UI ', 'renditions for list items by overriding the getInnerTpl method. ', 'In this case each item shows the state\'s abbreviation, and has ', 'a QuickTip which displays the state\'s nickname when hovered over.</p>' ] }, { xtype: 'displayfield', fieldLabel: 'Selected State', bind: '{states.value}' }, { xtype: 'combobox', reference: 'states', publishes: 'value', fieldLabel: 'Select State', displayField: 'state', anchor: '-15', store: { type: 'states' }, queryMode: 'local', listConfig: { itemTpl: [ '<div data-qtip="{state}: {description}">{state} ({abbr})</div>' ] } }] }] });
model
Ext.define('KitchenSink.model.State', { extend: 'KitchenSink.model.Base', fields: [ 'abbr', 'state', 'description', 'country' ] });
store
Ext.define('KitchenSink.store.States', { extend: 'Ext.data.ArrayStore', alias: 'store.states', model: 'KitchenSink.model.State', storeId: 'states', data: [ [0, 'AL', 'Alabama', 'The Heart of Dixie'], [1, 'AK', 'Alaska', 'The Land of the Midnight Sun'], [2, 'AZ', 'Arizona', 'The Grand Canyon State'], [3, 'AR', 'Arkansas', 'The Natural State'], [4, 'CA', 'California', 'The Golden State'], [5, 'CO', 'Colorado', 'The Mountain State'], [6, 'CT', 'Connecticut', 'The Constitution State'], [7, 'DE', 'Delaware', 'The First State'], [8, 'DC', 'District of Columbia', "The Nation's Capital"], [9, 'FL', 'Florida', 'The Sunshine State'], [10, 'GA', 'Georgia', 'The Peach State'], [11, 'HI', 'Hawaii', 'The Aloha State'], [12, 'ID', 'Idaho', 'Famous Potatoes'], [13, 'IL', 'Illinois', 'The Prairie State'], [14, 'IN', 'Indiana', 'The Hospitality State'], [15, 'IA', 'Iowa', 'The Corn State'], [16, 'KS', 'Kansas', 'The Sunflower State'], [17, 'KY', 'Kentucky', 'The Bluegrass State'], [18, 'LA', 'Louisiana', 'The Bayou State'], [19, 'ME', 'Maine', 'The Pine Tree State'], [20, 'MD', 'Maryland', 'Chesapeake State'], [21, 'MA', 'Massachusetts', 'The Spirit of America'], [22, 'MI', 'Michigan', 'Great Lakes State'], [23, 'MN', 'Minnesota', 'North Star State'], [24, 'MS', 'Mississippi', 'Magnolia State'], [25, 'MO', 'Missouri', 'Show Me State'], [26, 'MT', 'Montana', 'Big Sky Country'], [27, 'NE', 'Nebraska', 'Beef State'], [28, 'NV', 'Nevada', 'Silver State'], [29, 'NH', 'New Hampshire', 'Granite State'], [30, 'NJ', 'New Jersey', 'Garden State'], [31, 'NM', 'New Mexico', 'Land of Enchantment'], [32, 'NY', 'New York', 'Empire State'], [33, 'NC', 'North Carolina', 'First in Freedom'], [34, 'ND', 'North Dakota', 'Peace Garden State'], [35, 'OH', 'Ohio', 'The Heart of it All'], [36, 'OK', 'Oklahoma', 'Oklahoma is OK'], [37, 'OR', 'Oregon', 'Pacific Wonderland'], [38, 'PA', 'Pennsylvania', 'Keystone State'], [39, 'RI', 'Rhode Island', 'Ocean State'], [40, 'SC', 'South Carolina', 'Nothing Could be Finer'], [41, 'SD', 'South Dakota', 'Great Faces, Great Places'], [42, 'TN', 'Tennessee', 'Volunteer State'], [43, 'TX', 'Texas', 'Lone Star State'], [44, 'UT', 'Utah', 'Salt Lake State'], [45, 'VT', 'Vermont', 'Green Mountain State'], [46, 'VA', 'Virginia', 'Mother of States'], [47, 'WA', 'Washington', 'Green Tree State'], [48, 'WV', 'West Virginia', 'Mountain State'], [49, 'WI', 'Wisconsin', "America's Dairyland"], [50, 'WY', 'Wyoming', 'Like No Place on Earth'] ] });
相关文章推荐
- UITableView基础【数据刷新 && 模型数据中嵌套模型数据】
- arduino实践问题
- win2008查看uuid和sid
- UEFI+GPT+WIN7无法使用智能响应技术
- installsheild2011打包程序internal build error 6213
- It seems that this file has not been built yet.Do you want to build it now? Codeblocks能构建build不能运run
- codeforces 597C - Subsequences
- 【自考实践】PowerBuilder的初次学习
- Range Sum Query - Immutable
- poj 2533 Longest Ordered Subsequence 最长递增子序列(LIS)
- [iOS]iOS8可用的识别用户方式(idfa、UUID、idfv)
- [Android] 使用Fragment创建动态UI
- rp++ find ROP sequences
- EasyUI之DataGrid使用
- 303. Range Sum Query - Immutable
- 织梦dedecms整合Ueditor1.4.3百度编辑器(最新版2015年12月整合)
- UIScrollView源码分析(一)
- iOS UI进阶-6.0 手势
- 初识Power Builder9.0
- MVC jsonModelBuilder