Ext. Form. ComboBox common attributes

Ext. Form. ComboBox common attributes Tags: extjs JS combo


JS Code

1. VaR combo = new Ext. Form. ComboBox ({
2. Store: New Ext. Data. simplestore ({
3. Fields: ['value', 'text'],
4. Data: [['000000', 'pediatric dicao'], ['000000', 'Adult dicao'], ['000000', 'xiuyuan']
5. }),
6. Hiddenname: 'product _ Code', // name of the Input submitted to the background
7. Mode: 'local', // data loading mode, 'local' local loading, and 'remote' Remote Loading
8. Valuefield: 'value', // Value Field
9. Displayfield: 'text', // display field
10. Value: '000000', // default value. It must be set to the value submitted to the background. Do not set it to display text.
11. Emptytext: 'Please select', // prompt message
12. Mode: 'local', // data loading mode. Local indicates local data.
13. Triggeraction: 'all', // display all the following data. Set triggeraction to.
14. Readonly: false, // read-only. If it is true, it cannot be edited and cannot be clicked.
15. Editable: false, // whether it can be edited. If it is set to true, it can be input manually.
16. Pagesize: 0 // the pagination button is displayed when the value is greater than 0.
17. })

If you use the combo control in editorgrid, after editing, you will find that the displayed values are encoded rather than the displayed values. You can add the Renderer method in columnmode to modify the displayed values. The following is an example from the combo source code.
JS Code

1. Ext. util. format. comborenderer = function (Combo ){
2. Return function (value ){
3. VaR record = combo. findrecord (combo. {@ link # valuefield}, value );
4. Return record? Record. Get (combo. {@ link # displayfield}): combo. {@ link # valuenotfoundtext };
5. }
6. }
8. // Create the combo instance
9. VaR combo = new Ext. Form. ComboBox ({
10. {@ Link # typeahead}: True,
11. {@ Link # triggeraction}: 'all ',
12. {@ Link # lazyrender}: True,
13. {@ Link # mode}: 'local ',
14. {@ Link # store}: New Ext. Data. arraystore ({
15. ID: 0,
16. Fields :[
17. 'Myid ',
18. 'Displaytext'
19. ],
20. Data: [[1, 'item1'], [2, 'item2']
21. }),
22. {@ Link # valuefield}: 'myid ',
23. {@ Link # displayfield}: 'displaytext'
24. });
26. // Snippet of column model used within Grid
27. VaR CM = new Ext. Grid. columnmodel ([{
28. ...
29. },{
30. Header: "Some Header ",
31. Dataindex: 'whatever ',
32. Width: 130,
33. Editor: combo, // specify reference to combo instance
34. Renderer: Ext. util. format. comborenderer (Combo) // pass combo instance to reusable Renderer
35. },
36. ...
37. ]);

Combo is very convenient to use, and many attributes are not used at ordinary times. They all have default values, such as entering several words for data query, display template, and drop-down display height. If you are not satisfied with its display content or method, you can modify its attributes to expand it. The comments in the source code are very detailed and can be modified according to the prompted information.