1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    25
    Vote Rating
    0
    leon.wood is on a distinguished road

      0  

    Question How to add a tip for multiselect

    How to add a tip for multiselect


    Hi everybody

    Does anyone know how to add a tip for multiselect?

    like this:
    cc.jpg
    Thank you very much.
    http://www.extjs.com/deploy/dev/exam...lect-demo.html

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    IIRC, that's a DataView isn't it? Use a DataTip

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Posts
    25
    Vote Rating
    0
    leon.wood is on a distinguished road

      0  

    Question something wrong....

    something wrong....


    thanks for your job,but there is something wrong in my project.
    look down pictures:
    1.jpg

    2.jpg

    it looks can't get data...and if data is null it always have tip...

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    There should not be elements in the DataView which are "null". Check your Store.

    It gets the data for its template from the Record. You have to give it a template just like your DataView.

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Another solution would be to configure your combobox with:
    Code:
    tpl: new Ext.XTemplate(
      '<tpl for="."><div class="x-combo-list-item"',
      '<tpl if="myTipField"> ext:qtip="{myTipField:htmlEncode}"</tpl>',
      '>{myDisplayField:htmlEncode}</div></tpl>'
    )
    (replace red field names with your own field names)

  6. #6
    Sencha User
    Join Date
    Apr 2010
    Posts
    25
    Vote Rating
    0
    leon.wood is on a distinguished road

      0  

    Default


    er...thx condor ,but not combox ,just like combox's effects. i want to implement it in the multiselect
    this is
    http://www.extjs.com/deploy/dev/exam...lect-demo.html
    3.jpg

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    OK, it needed a tweak.

    Latest DataTip code is in post #1 of the DataTip thread.

    Plus, you must init the plugin on the MultiSelect's view, not the MultiSelect itself, so configure your MultiSelect with

    Code:
                listeners: {
                    render: function(ms) {
                        new Ext.ux.DataTip({
                            tpl: 'Number: {text}'
                        }).init(ms.view);
                    }
                },

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    OK, it needed a tweak.

    Latest DataTip code is in post #1 of the DataTip thread.

    Plus, you must init the plugin on the MultiSelect's view, not the MultiSelect itself, so configure your MultiSelect with

    Code:
                listeners: {
                    render: function(ms) {
                        new Ext.ux.DataTip({
                            tpl: 'Number: {text}'
                        }).init(ms.view);
                    }
                },

  9. #9
    Sencha User
    Join Date
    Apr 2010
    Posts
    25
    Vote Rating
    0
    leon.wood is on a distinguished road

      0  

    Question


    I really do not know where my code is wrong...

    Code:
    *Ext JS Library 3.0.0
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = 'side';
        /*
         * Ext.ux.form.MultiSelect Example Code
         */
        var msForm = new Ext.form.FormPanel({
            title: 'MultiSelect Test',
            width: 700,        
            renderTo: 'multiselect',
            items:[{
                xtype: 'multiselect',
                fieldLabel: 'Multiselect<br />(Required)',
                name: 'multiselect',
                width: 250,
                height: 200,
                allowBlank:false,
                store: [[123,'One Hundred Twenty Three'],
                        ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']],
    //            tbar:[{
    //                text: 'clear',
    //                handler: function(){
    //                 msForm.getForm().findField('multiselect').reset();
    //             }
    //            }],
    //                  listeners: {
    //                  render: function(ms) {
    //                      new Ext.ux.DataTip({
    //                          tpl: 'Number: {text}'
    //                      }).init(ms.view);
    //                  }
    //              },
                plugins: new Ext.ux.DataTip({
                    tpl: '<div class="x-combo-list-item">xxxx</div>'
                }),
       
                ddReorder: true
            }],
            tbar:[{
                text: 'Options',
                menu: [{
                 text: 'Set Value (2,3)',
                 handler: function(){
                     msForm.getForm().findField('multiselect').setValue('2,3');
                 }
             },{
                 text: 'Toggle Enabled',
                 handler: function(){
                     var m = msForm.getForm().findField('multiselect');
                     if (!m.disabled) {
                         m.disable();
                     } else {
                         m.enable();
                     }
                 }
                }]
            }],
            buttons: [{
                text: 'Save',
                handler: function(){
                    if(msForm.getForm().isValid()){
                     Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                         msForm.getForm().getValues(true));
                    }
                }
            }]
        });
    4.gif

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You don;t know? You've commented out the correct bit and left in the incorrect bit!