Jump to content
uniGUI Discussion Forums
Sign in to follow this  
estrify

Simple TIP: CheckComboBox Plugin

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

Share this post


Link to post
Share on other sites

How to programmatically mark multiple positions?

The issue is canceled, I found the answer in the example

Share this post


Link to post
Share on other sites

Hi.

 

Is this still not possible with standard components?

 

Thanks.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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):

 

Share this post


Link to post
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.

Share this post


Link to post
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)
    }
    
    ...
    ...
}

 

Share this post


Link to post
Share on other sites

Thank you so much, this is work in testcase. I think problem in my app. I have to investigate more, tomorrow.

Thank you so much.

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites
Sign in to follow this  

×