1. #31
    Sencha Premium Member andrei.neculau's Avatar
    Join Date
    Jul 2007
    Location
    Sweden
    Posts
    197
    Vote Rating
    0
    andrei.neculau is on a distinguished road

      0  

    Default


    @tjstuart
    since you're preparing for a new release, you might want to consider the following for visual consistency:
    When you mark it as invalid, you have that extra border bumping the whole element down 1px and right 1px (the red border).
    What you should try to do is this:

    1. make .ux-mselect { border: 0; overflow:auto; } in order to counter the border effect of the x-combo-list

    2. add x-form-field to the element, inside onRender, and set width and height
    Code:
    this.el = ct.createChild(); 
    this.el.dom.style.zoom = 1;
    this.el.addClass(this.fieldCls);
    this.el.setWidth(this.width);
    this.el.setHeight(this.height);
    3. set list height and width
    Code:
    this.list = new Ext.Layer({
    shadow: false, cls: [cls, 'ux-mselect'].join(' '), constrain:false
    }, div);
            
    var lw = this.width - this.el.getFrameWidth('lr');
    var lh = this.height - this.el.getFrameWidth('tb');
    This way when you have the usual blue border for the field, and when you markInvalid the red border is not taking up more space.

  2. #32
    Sencha Premium Member andrei.neculau's Avatar
    Join Date
    Jul 2007
    Location
    Sweden
    Posts
    197
    Vote Rating
    0
    andrei.neculau is on a distinguished road

      0  

    Default


    Another "improvement" is related to validation.
    For my interests I added validation for blank, min length and max length (length = number of selections)

    for instance... adding these properties
    Code:
        allowBlank:true,
        minLength:0,
        maxLegnth:Number.MAX_VALUE,
        blankText:Ext.form.TextField.prototype.blankText,
        minLengthText:'Minimum {0} item(s) required',
        maxLengthText:'Maximum {0} item(s) allowed',
    then append to onViewClick and to setValue
    Code:
    this.validate();
    and then append these functions to the component
    Code:
        getRawValue: function(valueField){
            var tmp = this.getValue(valueField);
            if (tmp.length){
                tmp = tmp.split(',');
            }
            else{
                tmp = [];
            }
            return tmp;
        },
    
        setRawValue: function(values){
            setValue(values);
        },
    
                validateValue : function(value){
            if(value.length < 1){ // if it has no value
                 if(this.allowBlank){
                     this.clearInvalid();
                     return true;
                 }else{
                     this.markInvalid(this.blankText);
                     return false;
                 }
            }
            if(value.length < this.minLength){
                this.markInvalid(String.format(this.minLengthText, this.minLength));
                return false;
            }
            if(value.length > this.maxLength){
                this.markInvalid(String.format(this.maxLengthText, this.maxLength));
                return false;
            }
            return true;
        }
    The reason why I kept allowBlank is because the value of the field is actually textual..
    Theoretically it should be without allowBlank, since allowBlank = false means minLength = 1

  3. #33
    Sencha Premium Member andrei.neculau's Avatar
    Join Date
    Jul 2007
    Location
    Sweden
    Posts
    197
    Vote Rating
    0
    andrei.neculau is on a distinguished road

      0  

    Default GridEditor with MultiSelect and resizable GridEditor

    GridEditor with MultiSelect and resizable GridEditor


    Here I come with another thing --- implementing gridEditor with Multiselect

    first of all, there's a need for a proper setSize function
    Code:
    setSize:function(w, h){
            Ext.ux.Multiselect.superclass.setSize.call(this, w, h);
            if(typeof w == 'object'){
                h = w.height;
                w = w.width;
            }
            if (!this.boxReady){
                return this;
            }
            if (typeof w == 'number'){
                this.el.setWidth(w);
                var lw = w - this.el.getFrameWidth('lr');
                this.list.setWidth(lw);
                this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
            }
            if (typeof h == 'number'){
                this.el.setHeight(h);
                var lh = h - this.el.getFrameWidth('tb');
                this.list.setHeight(lh);
                this.innerList.setHeight(lh - this.list.getFrameWidth('tb'));
            }
            return this;
        },
    and then there are some tweaks for the GridEditor. The main tweaking is that we should make the editor resizable. Why?.. well.. consider that field equals "1,4,5" but then the store is like 1->Home, 4->At the office, 5->Everywhere else.
    Imagine the editor being connected to a column that is only 25px wide. You would see probably just Home, At the o, Everyw.. and nothing past that. So let's add the resizable property to the GridEditor

    Code:
    Ext.grid.GridEditor.prototype.onRender = Ext.grid.GridEditor.prototype.onRender.createSequence(function(ct, position){
        if (this.resizable){
            this.resizer = new Ext.Resizable(this.el,{
                pinned:true, handles:'e'
            });
            this.resizer.on('resize', function(r, w, h){
                this.setSize(w, h);
            }, this);
        }
        this.setSize(this.width, this.height);
    });
    
    Ext.grid.GridEditor.prototype.onShow = Ext.grid.GridEditor.prototype.onShow.createSequence(function(){
        if (this.resizable){
            var sz = this.el.getSize();
            this.field.setSize(sz.width, sz.height);
        }
    });
    [LATER EDIT]
    one quick fix needed for this.. because there is no field to acquire focus/blur, the grideditor will need to be taken away some other way. My solution was catching rowclick, so..
    Code:
    Ext.override(Ext.grid.EditorGrid, {
        onClick : function(e){
            this.stopEditing();
            this.processEvent("click", e);
        }
    });

  4. #34
    Sencha Premium Member andrei.neculau's Avatar
    Join Date
    Jul 2007
    Location
    Sweden
    Posts
    197
    Vote Rating
    0
    andrei.neculau is on a distinguished road

      0  

    Default


    I'm coming with another small improvement. Since the normal getName() for a field looks like

    Code:
    getName: function(){
             return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
        },
    inside the onRender function, you should append this

    Code:
            this.hiddenField = this.el.createChild(this.defaultAutoCreate);
    
            this.hiddenName = this.name;
    This way, you can also do form.loadRecord(rec), otherwise the parsing of the fields will not find the Multiselect component.

    Hope you find these tweaks/fixes useful I'm just posting them while I'm using them inside my application.

    Cheers

    PS: the GridEditor implementation.. well.. it works, but I think it would be much more natural to make it look liek ComboBox.. meaning.. a textfield with the multiselect as drop-down. It kind of makes more sense visually. Anyone? as I'm not plunging into that very soon.

  5. #35
    Sencha User tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    310
    Vote Rating
    0
    tjstuart is on a distinguished road

      0  

    Default


    Great stuff andrei.neculau! Good man!

    I've incorporated most of your suggestions. See thread detailing v2.0 of Ext.ux.Multiselect/ItemSelector ... http://extjs.com/forum/showthread.php?t=13202

  6. #36
    Ext User
    Join Date
    May 2007
    Posts
    35
    Vote Rating
    0
    Magicbob is on a distinguished road

      0  

    Default Datastore load

    Datastore load


    Hello

    I don't know if it is because i don't use well your great extension but i had a little problem when using itemselector with datastores. when the toStore was not empty when loading and when i submit the form directly without doing anything the hidden field value was empty.
    After a click to add a value it was ok and there was all values when submitting

    I fixed my problem by adding

    Code:
    this.toStore.on('load', this.valueChanged, this);
    Thanks

    Magicbob

  7. #37
    Sencha User tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    310
    Vote Rating
    0
    tjstuart is on a distinguished road

      0  

    Default


    Well spotted Magicbob! I'll add this fix to 2.1 which I'll release early next week. Also, please use this thread in future http://extjs.com/forum/showthread.php?t=13202

    Cheers

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi