Created
May 20, 2012 17:03
-
-
Save christophe-g/2758780 to your computer and use it in GitHub Desktop.
Test html for comboFieldBox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>ComboFieldBox test</title> | |
| <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css"/> | |
| <!--link rel="stylesheet" type="text/css" href="https://raw.github.com/krikrou/ComboFieldBox/master/src/ComboFieldBox.css"/> | |
| <link rel="stylesheet" type="text/css" href="https://raw.github.com/krikrou/ComboFieldBox/master/sample/ComboFieldBoxSample.css"/--> | |
| <style> | |
| /* line 7, ../../scss/form/combofieldbox.scss */ | |
| .x-form-field.x-boxselect { | |
| padding: 0px 3px; | |
| } | |
| /* line 11, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect ul.x-boxselect-list { | |
| height: auto; | |
| cursor: text; | |
| min-height: 20px; | |
| padding: 0px; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| } | |
| /* line 19, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect input { | |
| border: none; | |
| background: none; | |
| line-height: 18px; | |
| height: 20px; | |
| } | |
| /* line 26, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect-input, .x-boxselect-item { | |
| display: inline-block; | |
| position: relative; | |
| *display: inline; | |
| /* IE7 */ | |
| zoom: 1; | |
| /* IE */ | |
| } | |
| /* line 32, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect-stacked .x-boxselect-item { | |
| display: block; | |
| } | |
| /* line 35, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect-item { | |
| -moz-border-radius: 6px; | |
| -webkit-border-radius: 6px; | |
| -o-border-radius: 6px; | |
| -ms-border-radius: 6px; | |
| -khtml-border-radius: 6px; | |
| border-radius: 6px; | |
| border: 1px solid #8fafe0; | |
| padding: 0px 1px 0px 5px !important; | |
| margin: 1px 1px 1px 0; | |
| background-color: #dfe8f6; | |
| cursor: default; | |
| } | |
| /* line 43, ../../scss/form/combofieldbox.scss */ | |
| .x-field:not(.x-item-disabled) .x-boxselect-item:hover { | |
| background: #b7cbeb; | |
| border: 1px solid #6892d4; | |
| } | |
| /* line 49, ../../scss/form/combofieldbox.scss */ | |
| .x-field:not(.x-item-disabled) .x-boxselect-item.x-item-selected { | |
| background: #6892d4; | |
| color: white; | |
| border: 1px solid #0557be !important; | |
| } | |
| /* line 56, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect-item-text { | |
| line-height: 16px; | |
| padding-right: 20px; | |
| } | |
| /* line 60, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect-item-close { | |
| cursor: pointer; | |
| } | |
| /* line 63, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect .empty { | |
| color: gray; | |
| } | |
| /* line 66, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect-icon, .x-boundlist-icon { | |
| background-repeat: no-repeat !important; | |
| background-position: 2px center !important; | |
| } | |
| /* line 70, ../../scss/form/combofieldbox.scss */ | |
| .x-boxselect-icon { | |
| text-indent: 17px !important; | |
| } | |
| /* line 73, ../../scss/form/combofieldbox.scss */ | |
| .x-boundlist-icon { | |
| text-indent: 20px !important; | |
| } | |
| .x-icon-au{ | |
| background-image: url(https://github.com/krikrou/ComboFieldBox/blob/master/sample/img/Australia.png) !important; | |
| } | |
| .x-icon-at{ | |
| background-image: url(https://github.com/krikrou/ComboFieldBox/blob/master/sample/img/Austria.png) !important; | |
| } | |
| .x-icon-fr{ | |
| background-image: url(https://github.com/krikrou/ComboFieldBox/blob/master/sample/img/France.png) !important; | |
| } | |
| </style> | |
| <script type="text/javascript" src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all.js"></script> | |
| <script type="text/javascript" src="https://raw.github.com/krikrou/ComboFieldBox/master/src/ComboView.js"></script> | |
| <script type="text/javascript" src="https://raw.github.com/krikrou/ComboFieldBox/master/src/ComboFieldBox.js"></script> | |
| <!--script type="text/javascript" src="ComboTree.js"></script--> | |
| <script> | |
| // Define the model for a State | |
| Ext.define('State', { | |
| extend: 'Ext.data.Model', | |
| fields: [ | |
| {type: 'string',name: 'abbr'}, | |
| {type: 'string',name: 'name'}, | |
| {type: 'string',name: 'slogan'}, | |
| {type: 'string',name: 'iconCls'} | |
| ], | |
| }); | |
| Ext.onReady(function () { | |
| Ext.tip.QuickTipManager.init(); | |
| // The data for all states | |
| var states = [{"abbr": "AL","name": "Alabama","slogan": "The Heart of Dixie"}, | |
| {"abbr": "FR","name": "France","slogan": "Sarkozy will never be elected again. French people are not that stupid!", iconCls: 'x-icon-fr'}, | |
| {"abbr": "AU","name": "Australia", iconCls: 'x-icon-au'}, | |
| {"abbr": "AT","name": "Austria", iconCls: 'x-icon-at'}, | |
| {"abbr": "AK","name": "Alaska","slogan": "The Land of the Midnight Sun"}, | |
| {"abbr": "AZ","name": "Arizona","slogan": "The Grand Canyon State"}, | |
| {"abbr": "AR","name": "Arkansas","slogan": "The Natural State"}, | |
| {"abbr": "CA","name": "California","slogan": "The Golden State"}, | |
| {"abbr": "CO","name": "Colorado","slogan": "The Mountain State"}, | |
| {"abbr": "CT","name": "Connecticut","slogan": "The Constitution State"}, | |
| {"abbr": "IA","name": "Iowa","slogan": "The Corn State"}, | |
| {"abbr": "LT","name": "Long test to see if it gets ellipsifyed","slogan": "The Constitution State"} | |
| ]; | |
| var i; | |
| for (i= 0; i<25; i++){ | |
| states.push({abbr: i, name: i, slogan: i}) | |
| }; | |
| var store = Ext.create('Ext.data.Store', { | |
| model: 'State', | |
| data: states | |
| }); | |
| var comboFieldBox = Ext.create('Ext.ux.ComboFieldBox', { | |
| fieldLabel: 'comboFieldBox {typeAhead : true, iconClsField: "iconCls"}', | |
| displayField: 'name', | |
| iconClsField: 'iconCls', | |
| valueField: 'abbr', | |
| value: ['FR'], | |
| descField: 'slogan', | |
| emptyText: 'select a state ...', | |
| width: 320, | |
| //editable: false, | |
| labelWidth: 130, | |
| //trigger2Cls:null, | |
| trigger1Cls: null, | |
| store: store, | |
| //multiSelect: false, | |
| queryMode: 'local', | |
| typeAhead: true | |
| //selectOnTab: true | |
| }); | |
| var comboFieldBox2 = Ext.create('Ext.ux.ComboFieldBox', { | |
| fieldLabel: 'comboFieldBox {createNewOnEnter: true, forceSelection: false, height: 70}', | |
| displayField: 'name', | |
| value: ['AK', 'CT'], | |
| emptyText: 'select a country...', | |
| descField: 'slogan', | |
| valueField: 'abbr', | |
| width: 320, | |
| labelWidth: 130, | |
| store: store, | |
| queryMode: 'local', | |
| height: 70, | |
| createNewOnEnter : true, | |
| forceSelection: false | |
| }); | |
| var simpleCombo = Ext.create('Ext.form.field.ComboBox', { | |
| fieldLabel: 'Select a single state', | |
| displayField: 'name', | |
| valueField :'abbr', | |
| value:'AK', | |
| width: 320, | |
| //multiSelect: true, | |
| labelWidth: 130, | |
| store: store, | |
| //editable: false, | |
| queryMode: 'local', | |
| typeAhead: true | |
| }); | |
| var form = Ext.create('Ext.form.Panel', { | |
| renderTo:'formPanel', | |
| title:'ComboFieldBox Examples', | |
| bodyPadding: 10, | |
| fieldDefaults: { | |
| labelWidth: 55, | |
| labelAlign: 'top', | |
| anchor: '80%' | |
| }, | |
| layout: 'anchor', | |
| items: [ comboFieldBox, comboFieldBox2, simpleCombo] | |
| }); | |
| }); | |
| </script> | |
| <style type="text/css"> | |
| .example { | |
| width: 600px; | |
| border: 1px solid #CCC; | |
| padding: 0 10px; | |
| margin: 0 0 10px; | |
| } | |
| .x-fieldset { | |
| margin-top: 20px; | |
| } | |
| #transformCombo label { | |
| display: block; | |
| margin: 1em 0 2px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="test1"/> | |
| <div id="formPanel"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment