Jump to content

Simple TIP: CheckComboBox Plugin


estrify
 Share

Recommended Posts

Hi,

 

I show a simple use of a CheckComboBox Plugin...

  • Add "CheckComboBox_Plugin.js" to UniServerModule->CustomFiles (adjust the path to the .JS file to yours)
  • Add the following to UniServerModule->CustomCSS (adjust the path to the .GIF file to yours):
    .ux-boundlist-item-checkbox
    {
        background-repeat: no-repeat;
        background-color: transparent;
        width: 13px;
        height: 13px;
        display: inline-block;
        line-height: 13px;
        background-image: url('checkbox.gif');
        background-position: 0 0;
    }
    .x-boundlist-selected .ux-boundlist-item-checkbox
    {
        background-position: 0 -13px;
    }
    
  • Add UniComboBox->ExtEvents->Ext.form.field.ComboBox -> change

    function change(sender, newValue, oldValue, eOpts)
    {
        for (var i=0; i<newValue.length; i++)
        {
           var found=false;
           
           for (var j=0; j<oldValue.length; j++)
             if (newValue[i]==oldValue[j])   { found=true; break;}
           
           if (!found)  ajaxRequest(sender, "checkevent", [ "text="+newValue[i] ]);
        }
    
        for (var i=0; i<oldValue.length; i++)
        {
           var found=false;
           
           for (var j=0; j<newValue.length; j++)
             if (oldValue[i]==newValue[j])   { found=true; break;}
           
           if (!found)  ajaxRequest(sender, "uncheckevent", [ "text="+oldValue[i] ]);
        }
    }
    
  • Add to UniComboBox->UniEvents -> Ext.form.Field.ComboBox -> beforeInit:

    function beforeInit(sender, config)
    {
       Ext.apply(sender, {
          emptyText: 'empty text',
          multiSelect: true,
          plugins: Ext.create('Ext.ux.form.plugin.CheckComboBox')
       });
    }
  • Look at Main.pas to see sample ways to do things...
     

I hope you find it useful to adapt it to your needs...

 

Regards,

 

 

 

20150928_CheckComboBox_Plugin.rar

  • Upvote 6
Link to comment
Share on other sites

  • 10 months later...
  • 1 year later...
  • 10 months later...
  • 6 months later...

Hello,

I get "c is not a constructor" error in my application, how can I find this error ?  "plugins: Ext.create('Ext.ux.form.plugin.CheckComboBox')" this line create this error but where, I couldn't find.

Problem in my app. Demo work normal. on ver 1480

How to find this error? or any suggession cheklist useage in filter.

Thank you.

Link to comment
Share on other sites

2 hours ago, Freeman35 said:

I get "c is not a constructor" error in my application, how can I find this error ?  "plugins: Ext.create('Ext.ux.form.plugin.CheckComboBox')" this line create this error but where, I couldn't find.

Problem in my app. Demo work normal. on ver 1480

Hello,

On 9/28/2015 at 8:26 PM, estrify said:
  • Add "CheckComboBox_Plugin.js" to UniServerModule->CustomFiles (adjust the path to the .JS file to yours)
  • Add the following to UniServerModule->CustomCSS (adjust the path to the .GIF file to yours):

 

Link to comment
Share on other sites

I get a another strange problem.

When I add in Column's for filtering editor, ClearButton showing. This is not importend for me, but if clearButton is visible, at this time check glyphs not showing. Just for test, I removed combobox from column filter editor, and on form. ClearButton property work normal, I mean if ClearButton is true, then show, if false not showing. Not just for this component. I test this on TUniEdit. Same result. I mean TuniEdit.ClearButton is false, but when in filtering (I mean in edit type something) ClearButton bean visible why? or

How to remove ClearButton in filter editor in grid column

or how to show check glyph in this js code ?

Thank you.

Link to comment
Share on other sites

Ok, can you try this approach for now?

For example for UniComboBox1

1. UniComboBox1.ClearButton = False

2. function beforeInit:

function beforeInit(sender, config)
{
    Ext.apply(sender, {
        multiSelect: true,
        plugins: [
            Ext.create('Ext.ux.form.plugin.CheckComboBox'),
            Ext.create('Ext.ux.field.plugin.Clearable')
        ]
    });
}

3. function afterrender:

function afterrender(sender, eOpts)
{
    if (sender.getValue().length == 0 && sender.triggers.clear) {
        sender.triggers.clear.setHidden(true);
    }
}

4. function change:

function change(sender, newValue, oldValue, eOpts)
{
    if (sender.getValue().length > 0 && sender.triggers.clear) {
        sender.triggers.clear.setHidden(false)
    }
    
    ...
    ...
}

 

Link to comment
Share on other sites

And the end :) I found problem

unidbGrid.Options.dgFilterClearButton := False;

in ......\uniGUI\Source\Components\uniDBGrid.pas

      if not FFilterInited then
      begin
       (FEdit as IUniFormControl).ClearButton := True;      >>>>>  Line: 5432  Why it has to be True? I don't wanna ClearButton....
        (FEdit as IUniFormControl).CheckChangeDelay := FFiltering.ChangeDelay;
        (FEdit as IUniFormControl).VarValue := Null;

It should

 (FEdit as IUniFormControl).ClearButton := dgFilterClearButton in FGrid.Options;//True;

unigui builded but in application grid not showing.

Is this bug?

Link to comment
Share on other sites

On 1/24/2019 at 1:23 PM, Freeman35 said:

Is this bug?

Hello,

One possible solution:

UniComboBox2

1. function beforeInit:

function beforeInit(sender, config)
{
    Ext.apply(sender, {
        multiSelect: true,
        plugins: []
    });
}

2. function afterCreate:

function afterCreate(sender)
{
    sender.newCheckBoxPlugin = new Ext.create('Ext.ux.form.plugin.CheckComboBox');
    sender.newCheckBoxPlugin.init(sender);    
}

 

Link to comment
Share on other sites

On 1/23/2019 at 8:41 PM, Sherzod said:

Ok, can you try this approach for now?

For example for UniComboBox1

1. UniComboBox1.ClearButton = False

2. function beforeInit:


function beforeInit(sender, config)
{
    Ext.apply(sender, {
        multiSelect: true,
        plugins: [
            Ext.create('Ext.ux.form.plugin.CheckComboBox'),
            Ext.create('Ext.ux.field.plugin.Clearable')
        ]
    });
}

3. function afterrender:


function afterrender(sender, eOpts)
{
    if (sender.getValue().length == 0 && sender.triggers.clear) {
        sender.triggers.clear.setHidden(true);
    }
}

4. function change:


function change(sender, newValue, oldValue, eOpts)
{
    if (sender.getValue().length > 0 && sender.triggers.clear) {
        sender.triggers.clear.setHidden(false)
    }
    
    for (var i=0; i<newValue.length; i++)
    {
       var found=false;
       
       for (var j=0; j<oldValue.length; j++)
         if (newValue[i]==oldValue[j])   { found=true; break;}
       
       if (!found)  ajaxRequest(sender, "checkevent", [ "text="+newValue[i] ]);
    }

    for (var i=0; i<oldValue.length; i++)
    {
       var found=false;
       
       for (var j=0; j<newValue.length; j++)
         if (oldValue[i]==newValue[j])   { found=true; break;}
       
       if (!found)  ajaxRequest(sender, "uncheckevent", [ "text="+oldValue[i] ]);
    }
//For lazy :)
  var vls= sender.getValue();
  ajaxRequest(sender,"where_str",["where_str="+vls]);
}

 

All thanks to @Sherzod and @estrify

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

Good morning friends.

Today to select a checkbox inside the ComboBox I use the following code.

UniSession.AddJS (UniComboBox1.JSName + '. SetValue (["Item 1", "Item 2"]);');

The above code unchecks any other selection leaving only "Item 1" and "Item 2".

This way I have "Item 1" and "Item 2" selected.

Now I would like to select "Item 3" but I want to just pass the "Item 3" name and select it.

Without deselecting "Item 1" and "Item 2".

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...