1. #31
    Ext User
    Join Date
    Oct 2007
    Posts
    3
    Vote Rating
    0
    pixelwiz is on a distinguished road

      0  

    Default Does this work with ExtJS 2.0 Alpha1?

    Does this work with ExtJS 2.0 Alpha1?


    Hi All,

    I can't get this to work at all with eitehr ExtJS 2.0 or 1.1.1

    Any ideas?

    In IE I get a JS error that says "Liine 17. Object doesn't support this property or method"

    In Firefox, I get 2 errors:

    Error: Ext.form.Field has no properties
    Source File: js/Multiselect/Multiselect.js
    Line: 107

    Error: Ext.form.Field has no properties
    Source File: js/Multiselect/Multiselect.js
    Line: 107

    Below is the code...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>FOC Participants Report</title>

    <link rel='stylesheet' type='text/css' href='js/extjs_latest/ext-all.css'>
    <link rel='stylesheet' type='text/css' href='js/Multiselect/Multiselect.css'>

    <script type="text/javascript" src="js/extjs_latest/ext-base.js"></script>
    <script type="text/javascript" src="js/extjs_latest/ext-all.js"></script>

    <script type="text/javascript" src="js/Multiselect/Multiselect.js"></script>
    <script type="text/javascript" src="js/Multiselect/DDView.js"></script>

    <script type="text/javascript">
    Ext.onReady(function()
    {
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';

    /*
    * Ext.ux.ItemSelector Example Code
    */

    var formItemSelector = new Ext.form.Form({ labelWidth: 75 });

    var itemSelector = new Ext.ux.ItemSelector({

    name : 'itemselector',
    fieldLabel : 'ItemSelector',

    //store : null,

    dataFields : ['code', 'desc'],

    fromData : [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']],
    toData : [['6', 'Six']],

    msWidth : 100,
    msHeight : 200,

    valueField : 'code',
    displayField : 'desc'

    });

    formItemSelector.add(itemSelector);

    formItemSelector.addButton('Get Value', function() { alert(formItemSelector.getValues(true)); })
    formItemSelector.addButton('Mark Invalid', function() { itemSelector.markInvalid('Invalid'); })

    formItemSelector.render('form-ct-itemselector');


    });
    </script>

    </head>

    <body>
    hello
    <div style="width:450px;">
    <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
    <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
    <div id="form-ct-itemselector"></div>
    </div></div></div>
    <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
    </div>

    </body>
    </html>

  2. #32
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
    anjelika is on a distinguished road

      0  

    Default custom (smaller) fonts?

    custom (smaller) fonts?


    Heya,
    I am using this excellent extension sience its first version, but now my customer asked me to make the Multiselect box fonts a bit smaller, so that they can see more of the options at one time.
    Is there a simple way to do this?
    I tried to search through css but couldn't find anything about this.
    Thanks in advance.
    Cristian

  3. #33
    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


    Quote Originally Posted by pixelwiz View Post
    Hi All,
    I can't get this to work at all with eitehr ExtJS 2.0 or 1.1.1

    Any ideas?

    In IE I get a JS error that says "Liine 17. Object doesn't support this property or method"

    In Firefox, I get 2 errors:

    Error: Ext.form.Field has no properties
    Source File: js/Multiselect/Multiselect.js
    Line: 107

    Error: Ext.form.Field has no properties
    Source File: js/Multiselect/Multiselect.js
    Line: 107
    Hi pixelwiz,

    Firstly this extension does not yet work with Ext2. Planning to upgrade when Ext2 goes beta/stable.

    The error you are getting in IE seems to have something to do with the text above the widget "hello". If you remove it the error is gone. I think this might have something to do with Animal's DDView extension. I will investigate.

    The error you are getting in Firefox ... I'm guessing this has to do with 'Ext.form.TextField.prototype.blankText' (line 107/Multiselect.js) not being valid in Ext2.

    The extension works perfectly in Ext1.1.

    Regards

  4. #34
    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


    Quote Originally Posted by anjelika View Post
    Heya,
    I am using this excellent extension sience its first version, but now my customer asked me to make the Multiselect box fonts a bit smaller, so that they can see more of the options at one time.
    Is there a simple way to do this?
    I tried to search through css but couldn't find anything about this.
    Thanks in advance.
    Cristian
    Hi Cristian,

    There is no 'simple' way to change the font attributes for the Multiselect/ItemSelector widget only. You can however change the attributes of the 'x-combo-list-item' class specifically font-size. The downside with this approach is that all widgets that use this class will assume those attributes.

    Regards

  5. #35
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
    anjelika is on a distinguished road

      0  

    Default


    Hello,
    Thanks for the tip.
    Will try that and see how it affects the whole application.
    Regards,
    Cristian

  6. #36
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    504
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Exclamation Working link to demo and source?

    Working link to demo and source?


    The links seem to be down. Where can I get the source code.

  7. #37
    Ext User
    Join Date
    Aug 2007
    Posts
    1
    Vote Rating
    0
    foxguan is on a distinguished road

      0  

    Default Ext.ux.Multiselect/ItemSelector [v2.0]'s link is not available !

    Ext.ux.Multiselect/ItemSelector [v2.0]'s link is not available !


    First thank your excellent work, i am attracted by it.but the link of the demo and download is not available , when i click the link of the Ext.ux.Multiselect/ItemSelector [v2.0] ,the webpage shows the message as follow:


    Object not found!

    The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

    If you think this is a server error, please contact the webmaster.
    Error 404
    www.figtreesystems.com
    Mon Oct 22 03:12:20 2007
    Apache/2.2.3 (Linux/SUSE)


    Would you fix it ? your work is very helpful to me ,thank you !

  8. #38
    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


    Sorry about that. Web Server upgraded over weekend. All back up now.

  9. #39
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    504
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Thumbs up Enhancements for version 2.1

    Enhancements for version 2.1


    Nice work! I have added a few enhancements:
    -imagePath: set to the path where the itemselector images are located
    -switchToFrom: set to true to put the to box to the left of the from box
    -enableToolbars: set to true to put a tool bar in the to and from boxes
    these toolbars are accessed via toMultiselect.toolbar and fromMultiselect.toolbar
    -allowDup: set to true to allow items to be copied to the "to" box multiple times

    The dup required a small change to DDView.js
    Remaining changes fell under Multiselect.js

    I needed these extras, and I hope they will make it into the next version.

    Cheers!

    Diff follows:
    diff origMult/DDView.js MultiselectItemSelector-2.1/DDView.js
    392c392,404
    < Ext.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
    ---
    > if(!this.allowDup){
    > Ext.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
    > return true
    > }
    > var x=new Ext.data.Record();
    > r.id=x.id;
    > delete x;
    > }
    > if (data.copy) {
    > var c = r.copy();
    > if (this.fireEvent("drop", this, n, dd, e, data, c) !== false) {
    > this.store.insert(insertAt++, c);
    > }
    394,405c406,409
    < if (data.copy) {
    < var c = r.copy();
    < if (this.fireEvent("drop", this, n, dd, e, data, c) !== false) {
    < this.store.insert(insertAt++, c);
    < }
    < } else {
    < if (this.fireEvent("drop", this, n, dd, e, data, r) !== false) {
    < if (data.sourceView) {
    < data.sourceView.isDirtyFlag = true;
    < data.sourceView.store.remove(r);
    < }
    < this.store.insert(insertAt++, r);
    ---
    > if (this.fireEvent("drop", this, n, dd, e, data, r) !== false) {
    > if (data.sourceView) {
    > data.sourceView.isDirtyFlag = true;
    > data.sourceView.store.remove(r);
    406a411
    > this.store.insert(insertAt++, r);
    408d412
    < this.isDirtyFlag = true;
    409a414
    > this.isDirtyFlag = true;
    diff origMult/Multiselect.html MultiselectItemSelector-2.1/Multiselect.html
    6c6
    < <link rel='stylesheet' type='text/css' href='../../../ext-1.1/resources/css/ext-all.css'>
    ---
    > <link rel='stylesheet' type='text/css' href='../ext/resources/css/ext-all.css'>
    9,10c9,10
    < <script type="text/javascript" src="../../../ext-1.1/adapter/ext/ext-base.js"></script>
    < <script type="text/javascript" src="../../../ext-1.1/ext-all-debug.js"></script>
    ---
    > <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    > <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    diff origMult/Multiselect.js MultiselectItemSelector-2.1/Multiselect.js
    62c62,63
    < 'change' : true
    ---
    > 'change' : true,
    > 'drop' : true
    112a114,118
    > copy : false,
    > allowDup : false,
    > enableToolbar : false,
    > focusClass : undefined,
    >
    150a157,162
    > if(this.enableToolbar){
    > var toolbardiv = this.list.createChild({tag:'div'});
    > this.toolbar=new Ext.Toolbar(toolbardiv);
    > lh = lh - 27;
    > }
    >
    167c179
    < , copy: false, allowCopy: false, dragGroup: this.dragGroup, dropGroup: this.dragGroup, jsonRoot: 'collection'
    ---
    > , allowDup:this.allowDup, copy: this.copy, allowCopy: false, dragGroup: this.dragGroup, dropGroup: this.dragGroup, jsonRoot: 'collection'
    173a186,188
    > this.view.on('drop', function(ddView, n, dd, e, data, r){
    > return this.fireEvent("drop", ddView, n, dd, e, data, r);
    > }, this);
    315a331,332
    > if(this.imagePath && this.imagePath.charAt(this.imagePath.length-1)!="/")
    > this.imagePath+="/";
    354a372,376
    > imagePath : "",
    > switchToFrom : false,
    > allowDup : false,
    > enableToolbar: false,
    > focusClass : undefined,
    360,365c382,387
    < this.iconUp = (this.iconUp) ? this.iconUp : "up2.gif";
    < this.iconDown = (this.iconDown) ? this.iconDown : "down2.gif";
    < this.iconLeft = (this.iconLeft) ? this.iconLeft : "left2.gif";
    < this.iconRight = (this.iconRight) ? this.iconRight : "right2.gif";
    < this.iconTop = this.iconTop || 'up2.gif';
    < this.iconBottom = this.iconBottom || 'down2.gif';
    ---
    > this.iconUp = this.imagePath + (this.iconUp || "up2.gif");
    > this.iconDown = this.imagePath + (this.iconDown || "down2.gif");
    > this.iconLeft = this.imagePath + (this.iconLeft || "left2.gif");
    > this.iconRight = this.imagePath + (this.iconRight || "right2.gif");
    > this.iconTop = this.imagePath + (this.iconTop || 'up2.gif');
    > this.iconBottom = this.imagePath + (this.iconBottom || 'down2.gif');
    375,376c397,398
    < this.fromMultiselect = new Ext.ux.Multiselect({draggable: true, dragGroup: this.el.dom.id, width: this.msWidth, height: this.msHeight, dataFields: this.dataFields, data: this.fromData, displayField: this.displayField, valueField: this.valueField, store: this.fromStore, isFormField:false});
    <
    ---
    > this.fromMultiselect = new Ext.ux.Multiselect({enableToolbar:this.enableToolbar, allowDup:this.allowDup, copy:this.allowDup, draggable: true, dragGroup: this.el.dom.id, width: this.msWidth, height: this.msHeight, dataFields: this.dataFields, data: this.fromData, displayField: this.displayField, valueField: this.valueField, store: this.fromStore, isFormField:false});
    > if(this.allowDup)this.fromMultiselect.on('drop', this.dropFrom, this);
    385c407
    < this.addIcon = td.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
    ---
    > this.addIcon = td.createChild({tag:'img', src:this.switchToFrom?this.iconLeft:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
    388c410
    < this.removeIcon = td.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
    ---
    > this.removeIcon = td.createChild({tag:'img', src:this.switchToFrom?this.iconRight:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
    410c432,433
    < this.toMultiselect = new Ext.ux.Multiselect({draggable: true, dragGroup: this.el.dom.id, width: this.msWidth, height: this.msHeight, displayField: this.displayField, valueField: this.valueField, store: this.toStore, isFormField:false});
    ---
    > this.toMultiselect = new Ext.ux.Multiselect({enableToolbar:this.enableToolbar, allowDup:this.allowDup, draggable: true, dragGroup: this.el.dom.id, width: this.msWidth, height: this.msHeight, displayField: this.displayField, valueField: this.valueField, store: this.toStore, isFormField:false});
    > if(this.allowDup)this.toMultiselect.on('drop', this.dropTo, this);
    412,413c435,436
    < this.fromMultiselect.render(divFrom);
    < this.toMultiselect.render(divTo);
    ---
    > this.fromMultiselect.render(this.switchToFrom ? divTo : divFrom);
    > this.toMultiselect.render(this.switchToFrom ? divFrom : divTo);
    510c533
    < selectionsArray = [];
    ---
    > if(!this.allowDup)selectionsArray = [];
    513,515c536,545
    < this.fromMultiselect.view.store.remove(record);
    < this.toMultiselect.view.store.add(record);
    < selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
    ---
    > if(this.allowDup){
    > var x=new Ext.data.Record();
    > record.id=x.id;
    > delete x;
    > this.toMultiselect.view.store.add(record);
    > }else{
    > this.fromMultiselect.view.store.remove(record);
    > this.toMultiselect.view.store.add(record);
    > selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
    > }
    520c550,551
    < this.toMultiselect.view.select(selectionsArray);
    ---
    > if(this.allowDup)this.fromMultiselect.view.select(selectionsArray);
    > else this.toMultiselect.view.select(selectionsArray);
    535,536c566,569
    < this.fromMultiselect.view.store.add(record);
    < selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
    ---
    > if(!this.allowDup){
    > this.fromMultiselect.view.store.add(record);
    > selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
    > }
    543a577,588
    > dropTo: function(ddView, n, dd, e, data, r){
    > return true;
    > },
    >
    > dropFrom : function(ddView, n, dd, e, data, r){
    > if (data.sourceView != ddView){
    > data.sourceView.isDirtyFlag = true;
    > data.sourceView.store.remove(r);
    > }
    > return false;
    > },
    >

  10. #40
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Virginia, USA
    Posts
    504
    Vote Rating
    0
    vtswingkid is on a distinguished road

      0  

    Default


    I have a few more things also...I'll post them tommorrow...
    readOnly: disables dragging and buttons
    enableClear: puts a clear button in the toolbar for the todata
    token: allows you to replace ',' for data separation

    will hopefully get a labeling mechanism in...such as two fieldsets...one for each box.