Jump to content


Photo

uniDbGrid Tray Add Objects (buttons)


  • Please log in to reply
20 replies to this topic

#1 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 12 October 2017 - 07:21 PM

I want to be able to add to the uniDbGrid Tray (for lack of a word) extra objects (in particular SpeedButtons) - please show me how - thanks.

 

Mock up attached.

Attached Files


  • 0

Andy


#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 12 October 2017 - 07:59 PM

Hi,

 

For a start you can do this:

function pagingBar.boxready(sender, width, height, eOpts)
{
    this.add({
        text: "Test",
        handler: function() {
            alert("test")
        }
    });
}

  • 0

#3 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 12 October 2017 - 08:03 PM

OK, which JS section do I add it ?

 

Also, will I be able to add buttons ?


  • 0

Andy


#4 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 12 October 2017 - 08:21 PM

Also, will I be able to add buttons ?

 

This is the button.

 

 

OK, which JS section do I add it ?

 

UniDBGrid1 -> ClientEvents -> ExtEvents -> Ext.toolbar.Paging [pagingBar] -> function pagingBar.boxready


  • 0

#5 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 12 October 2017 - 09:00 PM

Please show me Delphi code as all attempts with ExtEvents fail (there is no toolbar) ?


  • 0

Andy


#6 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 13 October 2017 - 04:31 AM

Please show me Delphi code as all attempts with ExtEvents fail (there is no toolbar) ?

 

Attached File  pagingBar.png   32.22KB   5 downloads


  • 0

#7 mohammad

mohammad

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 690 posts
  • LocationKufur Kassem, Palestine

Posted 13 October 2017 - 05:10 AM

Hi

 

Project from here: http://3msoft.net/mhmd/dbgridtray.rar

 

We will turn paging tool bar from:

 

0.png

 

To this:

 

1.png

 

What we did:

  • We hide the First page, Last page, Refresh buttons
  • We add a label to show how many selected rows
  • we add two buttons aligned to the right

 

We will use two images and we will put them inside a folder 'images':

 

2.png

 

when we want to hide buttons we will need there index...

 

3.png

 

4.png

 

5.png

 

6.png

 

7.png


  • 0

#8 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 13 October 2017 - 07:01 AM

Thank You


  • 0

Andy


#9 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 13 October 2017 - 06:36 PM

Taking this a step forward:-

 

How can I use Icons from an UniImageList instead of a file ?

 

How would I use a UniDatePicker instead of a button ?

 

Thanks in advance


  • 0

Andy


#10 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 17 October 2017 - 08:11 PM

With my uniDBGrid I want to add two uniDatePickers (not time) to the paging bar next to the Refresh button and capture the date change so I can fetch new data - please advise.


  • 0

Andy


#11 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 18 October 2017 - 05:38 AM

Hi,

 

With my uniDBGrid I want to add two uniDatePickers (not time) to the paging bar next to the Refresh button and capture the date change so I can fetch new data - please advise.

 

Can you try this approach ?!:

function pagingBar.boxready(sender, width, height, eOpts)
{
    this.add([

        '-',

        {
            xtype: "datefield",
            fieldLabel: 'Start Date',
            labelWidth: "60px",
            format: 'm/d/Y',
            width: 200,
            listeners: {
                change: function(el, v) {
                    alert(v)
                }
            }
        },

        '-',

        {
            xtype: "datefield",
            fieldLabel: 'End Date',
            labelWidth: "60px",
            format: 'm/d/Y',
            width: 200,
            listeners: {
                change: function(el, v) {
                    alert(v)
                }
            }
        }
    ]);
}

Best regards,


  • 0

#12 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 18 October 2017 - 05:57 AM

Thank You :).

 

Moving forward:-

 

1) I need to seed them with today's date

 

2) I want to fire a delphi procedure when the date is changed (not counting seeding)

 

3) When midnight is crossed I would need to re-seed them with the new date


  • 0

Andy


#13 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 18 October 2017 - 06:09 AM

1) I need to seed them with today's date

{
    xtype: "datefield",
    fieldLabel: 'Start Date',
    labelWidth: "60px",
    format: 'm/d/Y',
    value: new Date(), // <----------
    width: 200,
    listeners: {
        change: function(el, v) {
            alert(v)
        }
    }
}

  • 0

#14 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 18 October 2017 - 06:31 AM

2) I want to fire a delphi procedure when the date is changed (not counting seeding)

 

Well, try this:

 

1.

{
    xtype: "datefield",
    fieldLabel: 'Start Date',
    labelWidth: "60px",
    format: 'm/d/Y',
    value: new Date(),
    width: 200,
    listeners: {
        change: function(el, v) {
            ajaxRequest(sender, "_dateChange", ["dtIndx=0", "val=" + Ext.Date.format(v, "d/m/Y")]) // <------
        }
    }
}

2.

procedure TMainForm.UniDBGrid1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
var
  newDate : TDate;
  Fmt: TFormatSettings;
begin
  if EventName = '_dateChange' then
  begin
    Fmt.ShortDateFormat:='dd/mm/yyyy';
    Fmt.DateSeparator  :='/';

    newDate := StrToDate(Params.Values['val'], Fmt);
    //ShowMessage(DateToStr(newDate));
  end;
end;

  • 0

#15 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 18 October 2017 - 06:31 AM

3) When midnight is crossed I would need to re-seed them with the new date

 

?


  • 0

#16 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 18 October 2017 - 08:23 AM

Perfect - Thank You Farshad, I appreciate your help.

 

3) I intend to have a session (dashboard) last indefinitely so when the clock ticks past midnight I will need to re-seed the date pickers -or- restart the app automatically ?


  • 0

Andy


#17 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 18 October 2017 - 06:20 PM

Could you show me how to achieve 3) above - thanks


  • 0

Andy


#18 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 18 October 2017 - 06:55 PM

Hi,

 

Could you show me how to achieve 3) above - thanks

 

If I understand you correctly, first of all you must determine this time most likely in the UniTimer I guess, and after setting the date, to disable the timer and re-enable after a certain time...

 

How can you do this?


  • 0

#19 andyhill

andyhill

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 159 posts
  • LocationMelbourne Australia

Posted 18 October 2017 - 07:00 PM

OK, that is strait forward, use timer event to test current date. Now when date needs to be changed, how in code at runtime would I change the DatePickers as they are not delphi objects ?


  • 0

Andy


#20 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3660 posts

Posted 18 October 2017 - 07:19 PM

For example:

 

1.

uses ... DateUtils

2. UniTimer:

 

Interval = 60000

OnTimer ->

procedure TMainForm.UniTimer1Timer(Sender: TObject);
begin
  if CompareTime(Time, EncodeTime(0,0,0,0)) >= 1 then
  begin
    UniTimer1.Interval := ? // or other logic
    UniSession.AddJS('Ext.getCmp("startDateID").setValue(new Date());');
  end
  ...
  ...
end;

3.

{
    xtype: "datefield",
    fieldLabel: 'Start Date',
    labelWidth: "60px",
    format: 'm/d/Y',
    value: new Date(),
    id: "startDateID",  //<--------------
    width: 200,
    listeners: {
        change: function(el, v) {
            ajaxRequest(sender, "_dateChange", ["dtIndx=0", "val=" + Ext.Date.format(v, "d/m/Y")])
        }
    }
}

  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users