combos.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /*
  2. * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
  3. *
  4. * http://extjs.com/license
  5. */
  6. Ext.onReady(function() {
  7. Ext.QuickTips.init();
  8. // simple array store
  9. var store = new Ext.data.SimpleStore({
  10. fields : ['abbr', 'state', 'nick'],
  11. data : Ext.exampledata.states
  12. // from states.js
  13. });
  14. var combo = new Ext.form.ComboBox({
  15. store : store,
  16. displayField : 'state',
  17. typeAhead : true,
  18. mode : 'local',
  19. triggerAction : 'all',
  20. emptyText : 'Select a state...',
  21. selectOnFocus : true,
  22. applyTo : 'local-states'
  23. });
  24. var comboWithTooltip = new Ext.form.ComboBox({
  25. tpl : '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
  26. store : store,
  27. displayField : 'state',
  28. typeAhead : true,
  29. mode : 'local',
  30. triggerAction : 'all',
  31. emptyText : 'Select a state...',
  32. selectOnFocus : true,
  33. applyTo : 'local-states-with-qtip'
  34. });
  35. var converted = new Ext.form.ComboBox({
  36. typeAhead : true,
  37. triggerAction : 'all',
  38. transform : 'state',
  39. width : 135,
  40. forceSelection : true
  41. });
  42. // Create code view Panels. Ignore.
  43. new Ext.Panel({
  44. contentEl : 'state-combo-code',
  45. width : Ext.getBody().child('p').getWidth(),
  46. title : 'View code to create this combo',
  47. hideCollapseTool : true,
  48. titleCollapse : true,
  49. collapsible : true,
  50. collapsed : true,
  51. renderTo : 'state-combo-code-panel'
  52. });
  53. new Ext.Panel({
  54. contentEl : 'state-combo-qtip-code',
  55. autoScroll : true,
  56. width : Ext.getBody().child('p').getWidth(),
  57. title : 'View code to create this combo',
  58. hideCollapseTool : true,
  59. titleCollapse : true,
  60. collapsible : true,
  61. collapsed : true,
  62. renderTo : 'state-combo-qtip-code-panel'
  63. });
  64. new Ext.Panel({
  65. contentEl : 'transformed-combo-code',
  66. autoScroll : true,
  67. width : Ext.getBody().child('p').getWidth(),
  68. title : 'View code to create this combo',
  69. hideCollapseTool : true,
  70. titleCollapse : true,
  71. collapsible : true,
  72. collapsed : true,
  73. renderTo : 'transformed-combo-code-panel'
  74. });
  75. });