1. #21
    Ext User nassaja-rus's Avatar
    Join Date
    Mar 2007
    Location
    Russia
    Posts
    314
    Vote Rating
    1
    nassaja-rus is on a distinguished road

      0  

    Default


    Forgive me, it is complex to state ideas in foreign language in five oclock of mornings, after ten hours of programming =)

    I spoke about a new option which allow to show long lines in the dropping out list and short when i check some long items:

    |[X] Long Name1 - Long Description1 |
    |[ ] Long Name2 - Long Description3 |
    |[X] Long Name3 - Long Description3 |
    -------------------------------------

    And when I shall choose some elements, they will be shown as:

    [ Short Name1, Short Name3 |V|]

    Typycal record from combo-store conteins: id, long_name, short_name

    And now we have displayField:long_name for items in dropdown list, selectedFieldhort_name for checked items in checkbox field
    -= miu-miu =-

    Linux, Perl, GNU, Open Source, Ajax, Ubuntu 9.04

  2. #22
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Oh, I see. Have you also modified beforequery code? The original plays nicely with typing and subsequent dropdown filtering. If you haven't then you deprive yourself, and your users, of convenient keyboard input.

    Any demo/code I can test?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #23
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    Hi Saki,

    I like your lovcombo, it's really good extension, thanks for sharing

    I've found some issues, maybe you have already fixed them or maybe it's my fault, I have to admit that I haven't check the source code too much...

    First example that does not work for me, if I do not specify valueField, I can not select values (maybe it's a feature):
    PHP Code:
    var lc = new Ext.ux.form.LovCombo({
             
    id:'lovcombo'
            
    ,renderTo:'lovcomboct'
            
    ,width:300
            
    ,hideOnSelect:false
            
    ,store:new Ext.data.SimpleStore({
                 
    fields:[{name:'id'}]
                ,
    data:[
                     [
    '1 ()']
                    ,[
    '11 ()']
                    ,[
    '2']
                    ,[
    '22']
                    ,[
    '3']
                ]
            })
            ,
    triggerAction:'all'
            
    ,displayField:'id'
            
    ,mode:'local'
        
    }); 
    2)If then I add the valueField to the config, I have problem selecting the data containing "()"...
    PHP Code:
    var lc = new Ext.ux.form.LovCombo({
             
    id:'lovcombo'
            
    ,renderTo:'lovcomboct'
            
    ,width:300
            
    ,hideOnSelect:false
            
    ,store:new Ext.data.SimpleStore({
                 
    fields:[{name:'id'}]
                ,
    data:[
                     [
    '1 ()']
                    ,[
    '11 ()']
                    ,[
    '2']
                    ,[
    '22']
                    ,[
    '3']
                ]
            })
            ,
    triggerAction:'all'
            
    ,valueField:'id'
            
    ,displayField:'id'
            
    ,mode:'local'
        
    }); 
    I'd like only to know if I'm doing something wrong

    Thanks for your help and for this beautifull extension.

  4. #24
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Re 1: You need both valueField and displayField.
    Re 2: You need 2d array, e.g. [[1, '1 ()'],[11, '11 ()']]
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #25
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #26
    Ext User
    Join Date
    May 2008
    Posts
    9
    Vote Rating
    0
    malord is on a distinguished road

      0  

    Default


    hey I just found your site (extjs.eu) today and I am really liking these additions to ExtJS. I found a problem with the onRealBlur event for the LovCombo though. Due to the RegExp matching in that function, if you have an unclicked option that is contained inside a clicked option (e.g. 'no' is inside 'another') then when you blur, the unclicked option will suddenly appear in the value list.

    PHP Code:
                    var re = new RegExp(r.get(this.displayField));
                    if(
    v.match(re)) {
                        
    va.push(r.get(this.valueField));
                    } 

  7. #27
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Post please a showcase so I can debug it. Or you have a proposed patch?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #28
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    Hi Saki,
    I wanted to use your lovcombo instead a normal combobox, and I could not change the data for the store in my code, because the same data are used in different context (store load data from server).

    1) So I've tried to make it works also with simple data like the following:
    PHP Code:
    var data = [
                     [
    '15 (prova)']
                    ,[
    '11 ()']
                    ,[
    '2']
                    ,[
    '22']
                    ,[
    '3']
                ]; 
    2) and without specify the valueField (so that if not specified, I suppose that the valueField is the same of the displayField.)

    For me it works, but I have not tested a lot, and I have some problem in case the store is loaded remotely and you want to preset a value in the combo, the first time you expand the combo, the preselected element it does not appear checked (I have a workaround in my code, in the load event of the store, I change the mode of the lovcombo instance from remote to local and then I call setValue()).

    This is the code changes:
    PHP Code:
     ,charsToEscape: ['(',')','['']''^''|''?''*''+''{''}']//to complete

    ,initComponent:function() {
            
            
    // template with checkbox
            
    if(!this.tpl) {
                
    this.tpl 
                     
    '<tpl for=".">'
                    
    +'<div class="x-combo-list-item">'
                    
    +'<img src="' Ext.BLANK_IMAGE_URL '" '
                    
    +'class="ux-lovcombo-icon ux-lovcombo-icon-'
                    
    +'{[values.' this.checkField '?"checked":"unchecked"' ']}">'
                    
    +'<div class="ux-lovcombo-item-text">{' this.displayField '}</div>'
                    
    +'</div>'
                    
    +'</tpl>'
                
    ;
            }
    //************************
            
    if(!this.valueField)
                
    this.valueField this.displayField;
    //************************
            // call parent
            
    Ext.ux.form.LovCombo.superclass.initComponent.apply(thisarguments);

            
    // install internal event handlers
            
    this.on({
                 
    scope:this
                
    ,beforequery:this.onBeforeQuery
                
    ,blur:this.onRealBlur
            
    });

            
    // remove selection from input field
            
    this.onLoad this.onLoad.createSequence(function() {
                if(
    this.el) {
                    var 
    this.el.dom.value;
                    
    this.el.dom.value '';
                    
    this.el.dom.value v;
                }
            });
            
        } 
    // e/o function initComponent

        
    ,onRealBlur:function() {
            
    this.list.hide();
            var 
    this.getRawValue();
            var 
    va = [];
            
    this.store.clearFilter();
            
    this.store.each(function(r) {
    //***********************
                
    var innerRethis.escapeStringValue(r.get(this.displayField));
    //***********************
                
    var re = new RegExp(innerRe);
                if(
    v.match(re)) {
                    
    va.push(r.get(this.valueField));
                }
            }, 
    this);
            
    this.setValue(va.join(this.separator));
        } 
    // eo function onRealBlur

    ,setValue:function(v) {
            if(
    v) {
                
    '' v;
                if(
    this.valueField) {
                    
    this.store.clearFilter();
                    
    this.store.each(function(r) {
    //*****************************
                        
    var stringValue this.escapeStringValue(r.get(this.valueField));
                        var 
    checked = !(!v.match('(^|' this.separator ')' stringValue +'(' this.separator '|$)'));
    //******************************
                        
    r.set(this.checkFieldchecked);
                    }, 
    this);
                    
    this.value this.getCheckedValue();
                    
    this.setRawValue(this.getCheckedDisplay());
                    if(
    this.hiddenField) {
                        
    this.hiddenField.value this.value;
                    }
                }
                else {
                    
    this.value v;
                    
    this.setRawValue(v);
                    if(
    this.hiddenField) {
                        
    this.hiddenField.value v;
                    }
                }
            }
            else {
                
    this.clearValue();
            }
        } 
    // eo function setValue

    ,escapeStringValue: function(stringValue) {
            for(var 
    0this.charsToEscape.lengthi++) {
                var 
    charToEscape this.charsToEscape[i];
                var 
    replaceWith "\\" charToEscape;
                
    stringValue '' stringValue;
                
    stringValue stringValue.replace(charToEscapereplaceWith);
            }
            return 
    stringValue;
        } 
    This is the complete code:
    [PHP]
    // vim: ts=4w=4:nu:fdc=4:nospell
    /**
    * Ext.ux.form.LovCombo, List of Values Combo
    *
    * @author Ing. Jozef Sak

  9. #29
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    Fix:

    PHP Code:
    ,escapeStringValue: function(stringValue) {
            for(var 
    0this.charsToEscape.lengthi++) {
                var 
    charToEscape this.charsToEscape[i];
                var 
    replaceWith "\\" charToEscape;
                
    stringValue '' stringValue;
                
    stringValue stringValue.replace(charToEscapereplaceWith);
            }
            return 
    stringValue;
        } 
    Now it works also with your example
    (Updated my prevoius post)

  10. #30
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,561
    Vote Rating
    384
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Function to escape regular expression special characters doesn't belong to this extension in fact as it is more general. I was playing a bit with it and this is what I came out with:
    PHP Code:
    RegExp.escape = function(s) {
        if(
    'string' !== typeof s) {
            return 
    s;
        }
        
    // see attached image for line that should come here. Forum strips backslashes
    }; // eo function escape 
    It defines static method escape of RegExp object and is called as:
    PHP Code:
    var RegExp.escape('1 ()'); 
    Play please a bit with it; I'm not 100% sure if I've included all RegExp special characters.

    As to, valueField: I wouldn't hard code it in the extension as other users may have reversed preferences. It can be configured from outside anyway.
    Attached Images
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


Thread Participants: 195

  1. galdaka (2 Posts)
  2. Dumbledore (8 Posts)
  3. nassaja-rus (2 Posts)
  4. mystix (4 Posts)
  5. fabrizim (1 Post)
  6. sdrew (1 Post)
  7. x5150 (4 Posts)
  8. exo (1 Post)
  9. JorisA (2 Posts)
  10. rarerules (2 Posts)
  11. Darklight (2 Posts)
  12. RhythmFighter (2 Posts)
  13. hui2008 (9 Posts)
  14. ntulip (1 Post)
  15. tobiu (3 Posts)
  16. cmendez21 (1 Post)
  17. steffenk (4 Posts)
  18. zapatista (2 Posts)
  19. george.antoniadis (1 Post)
  20. vlados (3 Posts)
  21. Alcoholov (1 Post)
  22. vibez (1 Post)
  23. dclaussen (1 Post)
  24. stefan.riedel-seifert (1 Post)
  25. nkohari (1 Post)
  26. vishalg (3 Posts)
  27. paparent (3 Posts)
  28. cnelissen (1 Post)
  29. wm003 (2 Posts)
  30. wvuong (3 Posts)
  31. SxOrpheus (5 Posts)
  32. mabello (21 Posts)
  33. sean.zhou (1 Post)
  34. kerbo (2 Posts)
  35. bendawg (2 Posts)
  36. sigaref (3 Posts)
  37. syscobra (1 Post)
  38. mankz (2 Posts)
  39. Sesshomurai (2 Posts)
  40. cblin (1 Post)
  41. smagen (1 Post)
  42. muh-die-kuh (2 Posts)
  43. Zolcsi (1 Post)
  44. evanc (1 Post)
  45. graveyardfashions (2 Posts)
  46. tarini (2 Posts)
  47. franck34 (1 Post)
  48. angelflaree (1 Post)
  49. BuckBazooka (2 Posts)
  50. skbach (5 Posts)
  51. jarnix (1 Post)
  52. ry.extjs (3 Posts)
  53. savva (1 Post)
  54. spiderman123 (1 Post)
  55. razvanioan (2 Posts)
  56. EasyEl (3 Posts)
  57. salvo (5 Posts)
  58. hpet (1 Post)
  59. futurezhang (4 Posts)
  60. chalu (6 Posts)
  61. Maharshi (4 Posts)
  62. siebertm (1 Post)
  63. TwystNeko (1 Post)
  64. dotchris (4 Posts)
  65. brenda (1 Post)
  66. mholyszko (3 Posts)
  67. bt_bruno (2 Posts)
  68. codeminer (1 Post)
  69. dgms (1 Post)
  70. cojas99 (1 Post)
  71. epoks (1 Post)
  72. shay2501 (1 Post)
  73. Remy (3 Posts)
  74. johnathanhebert (3 Posts)
  75. malord (1 Post)
  76. nescha (3 Posts)
  77. dxi (2 Posts)
  78. Efex (3 Posts)
  79. rails_user (1 Post)
  80. nebbian (6 Posts)
  81. evelynloo (2 Posts)
  82. nitznitz (1 Post)
  83. VictorSmirnov (1 Post)
  84. astagl (1 Post)
  85. supercharge2 (2 Posts)
  86. 7twenty (1 Post)
  87. mbajema (2 Posts)
  88. mthad (4 Posts)
  89. s4brown (1 Post)
  90. tripkos (2 Posts)
  91. cmaster (1 Post)
  92. hallow (1 Post)
  93. chiefclaudio (2 Posts)
  94. stive (2 Posts)
  95. Rothariger (7 Posts)
  96. ajatib (1 Post)
  97. freddd (2 Posts)
  98. kagupta@quark.com (2 Posts)
  99. Jack9 (6 Posts)
  100. jingyang (1 Post)
  101. lionheart33806 (3 Posts)
  102. proximus121 (3 Posts)
  103. Achim74 (2 Posts)
  104. foxmarco (1 Post)
  105. frank_ash (1 Post)
  106. wolverline (2 Posts)
  107. amnesia7 (1 Post)
  108. DoS (7 Posts)
  109. zeke (2 Posts)
  110. atian25 (1 Post)
  111. lakshmi (1 Post)
  112. anjuprema00 (1 Post)
  113. oliverseitz (2 Posts)
  114. olriche38 (3 Posts)
  115. Zack7 (2 Posts)
  116. dizor (1 Post)
  117. malstroem (1 Post)
  118. Stju (1 Post)
  119. kora.kanchan (4 Posts)
  120. whodat (7 Posts)
  121. minusForty (2 Posts)
  122. Seatle83 (1 Post)
  123. chelflores (1 Post)
  124. j_mmontero (1 Post)
  125. dbassett74 (1 Post)
  126. Gjslick (1 Post)
  127. eufire (4 Posts)
  128. salihgedik (1 Post)
  129. asnem (2 Posts)
  130. casbar (4 Posts)
  131. jack sparrow (1 Post)
  132. sajjan (3 Posts)
  133. bergstyle (1 Post)
  134. zyon (3 Posts)
  135. anaju (3 Posts)
  136. Smeraldo (2 Posts)
  137. gomby (1 Post)
  138. vivitron (5 Posts)
  139. Andreas B. (1 Post)
  140. wolfhowlmedia (2 Posts)
  141. Gadbury (1 Post)
  142. Thomas Triplet (5 Posts)
  143. Gonfi (1 Post)
  144. walta (3 Posts)
  145. Gustavo Silva (2 Posts)
  146. heavywave (1 Post)
  147. xjpmauricio (2 Posts)
  148. gtegos (1 Post)
  149. Rotterdam (2 Posts)
  150. chullan (1 Post)
  151. Ajithamani (1 Post)
  152. frederickd (1 Post)
  153. hazimdikenli (1 Post)
  154. completej (1 Post)
  155. harel (4 Posts)
  156. fitzkarraldo (1 Post)
  157. idmsch (3 Posts)
  158. headshredder (2 Posts)
  159. vikasj (2 Posts)
  160. cbhawk89 (1 Post)
  161. taronja (3 Posts)
  162. Keith Chadwick (1 Post)
  163. brainunit (2 Posts)
  164. milestonebass (1 Post)
  165. pankajsharma (3 Posts)
  166. devtig (2 Posts)
  167. fff398 (1 Post)
  168. Jensen (7 Posts)
  169. f0rmycurry (1 Post)
  170. hotdesc (1 Post)
  171. aghextjs (2 Posts)
  172. a.bongardt (1 Post)
  173. abdel.e (1 Post)
  174. alexxey (1 Post)
  175. ccyborg (4 Posts)
  176. ryanfebus (1 Post)
  177. dirkc (2 Posts)
  178. RCV (2 Posts)
  179. amanind (4 Posts)
  180. pipiet06 (1 Post)
  181. alukin (2 Posts)
  182. raghu.gitam (1 Post)
  183. dicos (1 Post)
  184. docsnyder (1 Post)
  185. dgeiselman (7 Posts)
  186. adavsko (2 Posts)
  187. andrei.stoleru (2 Posts)
  188. i.stojanovic (2 Posts)
  189. ldubois (1 Post)
  190. rodo008 (1 Post)
  191. kman (1 Post)
  192. googlebush (1 Post)
  193. ldashevskiy (2 Posts)
  194. yerman (1 Post)
  195. kwyc (1 Post)