combos.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:3k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. Ext.onReady(function(){
  8.     Ext.QuickTips.init();
  9.     // simple array store
  10.     var store = new Ext.data.ArrayStore({
  11.         fields: ['abbr', 'state', 'nick'],
  12.         data : Ext.exampledata.states // from states.js
  13.     });
  14.     var combo = new Ext.form.ComboBox({
  15.         store: store,
  16.         displayField:'state',
  17.         typeAhead: true,
  18.         mode: 'local',
  19.         forceSelection: true,
  20.         triggerAction: 'all',
  21.         emptyText:'Select a state...',
  22.         selectOnFocus:true,
  23.         applyTo: 'local-states'
  24.     });
  25.     
  26.     //Simple arrays can be used directly as the store config.  1-dimensional arrays
  27.     //will automatically be expanded (each array item will be the combo value and text)
  28.     //and for multi-dimensional arrays, the value in index 0 of each item will be assumed
  29.     //to be the value, while the value at index 1 is assumed to be the text.  For example,
  30.     //[['AL', 'Alabama'],['AK', 'Alaska'], etc.]. Any other values beyond index 1 within
  31.     //each item will be ignored using this approach.
  32.     var comboFromArray = new Ext.form.ComboBox({
  33.         store: Ext.exampledata.states,
  34.         typeAhead: true,
  35.         forceSelection: true,
  36.         triggerAction: 'all',
  37.         emptyText:'Select a state...',
  38.         selectOnFocus:true,
  39.         applyTo: 'array-states'
  40.     });
  41.     var comboWithTooltip = new Ext.form.ComboBox({
  42.         tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
  43.         store: store,
  44.         displayField:'state',
  45.         typeAhead: true,
  46.         forceSelection: true,
  47.         mode: 'local',
  48.         triggerAction: 'all',
  49.         emptyText:'Select a state...',
  50.         selectOnFocus:true,
  51.         applyTo: 'local-states-with-qtip'
  52.     });
  53.     var converted = new Ext.form.ComboBox({
  54.         typeAhead: true,
  55.         triggerAction: 'all',
  56.         transform:'state',
  57.         width:135,
  58.         forceSelection:true
  59.     });
  60.     
  61. //  Create code view Panels. Ignore.
  62.     new Ext.Panel({
  63.      contentEl: 'state-combo-code',
  64.      width: Ext.getBody().child('p').getWidth(),
  65.      title: 'View code to create this combo',
  66.      hideCollapseTool: true,
  67.      titleCollapse: true,
  68.      collapsible: true,
  69.      collapsed: true,
  70.      renderTo: 'state-combo-code-panel'
  71.     });
  72.     new Ext.Panel({
  73.      contentEl: 'state-combo-qtip-code',
  74.      autoScroll: true,
  75.      width: Ext.getBody().child('p').getWidth(),
  76.      title: 'View code to create this combo',
  77.      hideCollapseTool: true,
  78.      titleCollapse: true,
  79.      collapsible: true,
  80.      collapsed: true,
  81.      renderTo: 'state-combo-qtip-code-panel'
  82.     });
  83.     new Ext.Panel({
  84.      contentEl: 'array-combo-code',
  85.      autoScroll: true,
  86.      width: Ext.getBody().child('p').getWidth(),
  87.      title: 'View code to create this combo',
  88.      hideCollapseTool: true,
  89.      titleCollapse: true,
  90.      collapsible: true,
  91.      collapsed: true,
  92.      renderTo: 'array-combo-code-panel'
  93.     });
  94.     new Ext.Panel({
  95.      contentEl: 'transformed-combo-code',
  96.      autoScroll: true,
  97.      width: Ext.getBody().child('p').getWidth(),
  98.      title: 'View code to create this combo',
  99.      hideCollapseTool: true,
  100.      titleCollapse: true,
  101.      collapsible: true,
  102.      collapsed: true,
  103.      renderTo: 'transformed-combo-code-panel'
  104.     });
  105. });