Jump to content

Fieldcontainer overflow to second field column


Ron
 Share

Recommended Posts

I want fields to be in two columns at a window width greater than a certain width,
and then only a single column when the window is smaller than this certain width.

How to do this?

I guess that I cannot use two containers, as in the first image, but if I use only
one container, how to make it overflow to a second column when the container
is too small for the fields?

PS: Unfortunately I was unable to upload images.

 

Link to comment
Share on other sites

7 hours ago, mhmda said:

Easy, use column layout

I have tried that, but as the fields rearrange with smaller window width, the height of the containing panel is not automatically adjusted to fit the fields.

To get variable field width, I have this arrangement:

1. A panel - CPanel - with layout "border", with maxheight and minheight, which acts as a container for the next panel

2. A panel - FPanel - with layout "auto", with maxwidth, minwidth, maxheight and minheight

3. A fieldcontainer with layout "column", with maxwidth and minwidth

But the height of the containing panels are not adjusted.

Here is the code, and I am trying to create everything at runtime, and it starts with createForm, which calls setupPanel, which calls createPanel, which calls createFC (fieldcontainer), which calls the fields creation methods.

Not sure if this is really possible, but I am not giving up easily.

 

function TUniMainModule.createPanel(aowner, aparent:TUniPanel;aHeight:integer;title, subtitle:string):TUniPanel;
var sTitle, lTitle:string;
    cPanel, FPanel:TUniPanel;
    heightStr, heightStr2, chStr:string;
begin
  CPanel:= TUniPanel.Create(aowner);
  with CPanel do
  begin
    parent:=aparent;
    name:= 'panCPanel'+getUniqueID;
    color:=$00EFEFEF;
    borderStyle:=ubsNone;
    layout:='border';
    titleVisible:=false;
    layoutConfig.Width:='100%';
    layoutConfig.Margin:='0 0 0 0';
    JSInterface.JSConfig('minHeight', [200]);
    JSInterface.JSConfig('maxHeight', [370]);
  end;

  sTitle:=title;
  lTItle:='<b>'+title+'</b><br>'+subtitle;
  heightStr:=inttostr(aHeight);
  heightStr2:=inttostr(aHeight+1);
  chStr:=inttostr(81);

  FPanel:= TUniPanel.Create(aowner);

  with FPanel do
  begin
    parent:=CPanel;
    name:= 'panFPanel'+getUniqueID;
    borderStyle:=ubsNone;
    layout:='auto';
    layoutAttribs.Align:='top';
    layoutConfig.Margin:='7 10 9 15';
    color:=clWhite;
    collapsible:=true;
    collapsed:=false;
    title:=sTitle;
    titleVisible:=true;
    layoutConfig.Region:='center';
    JSInterface.JSConfig('minWidth', [445]);
    JSInterface.JSConfig('maxWidth', [990]);
    JSInterface.JSConfig('minHeight', [200]);
    JSInterface.JSConfig('maxHeight', [370]);
    JSInterface.JSConfig('animCollapse', [250]);
    with clientEvents.UniEvents do
    begin
      values['afterCreate']:='function afterCreate(sender){sender.addCls("FPanel");sender.addCls("FPanelT");sender.addCls("shadowPanel");sender.addBodyCls("FBodyPanel")}';
      values['beforeInit']:='function beforeInit(sender, config){config.defaults={margin:"0px 15px 0px"}}';
    end;
    with clientEvents.ExtEvents do
    begin
      values['mouseover']:='function mouseover(sender, eOpts){sender.addCls("effectPanel2");}';
      values['mouseout']:='function mouseout(sender, eOpts){sender.removeCls("effectPanel2");}';
      values['collapse']:='function collapse(p, eOpts){'+FPanel.JSName+'.setTitle("'+lTitle+'");'+CPanel.JSName+'.setHeight('+chStr+',{duration:5,easing:"easeIn"});'+FPanel.JSName+'.removeCls("FPanelT");'+
        FPanel.JSName+'.addCls("FPanelTC")+'+aparent.JSName+'.updateLayout();}';
      values['beforeexpand']:='function beforeexpand(p, eOpts){var c='+CPanel.JSName+';c.setHeight('+heightStr2+');c.expand();'+aparent.JSName+'.updateLayout();}';
      values['expand']:='function expand(p, eOpts){'+FPanel.JSName+'.removeCls("FPanelTC");'+FPanel.JSName+'.addCls("FPanelT");'+FPanel.JSName+'.setTitle("'+sTitle+'");var c='+
        CPanel.JSName+';c.setHeight('+heightStr+');c.expand();'+aparent.JSName+'.updateLayout();}';
    end;
    JSInterface.JSConfig('titleCollapse', [True]);
  end;
  result:=FPanel;
end;



function TUniMainModule.createFC(owner, aParent:TUniPanel; aHeight:integer):TUniFieldContainer;
var fc:TUniFieldContainer;
begin
  fc:=TUniFieldContainer.Create(owner);
  with fc do
  begin
    parent:=aParent;
    name:='fc'+getUniqueID;
    //title:='';
    //width:=900;
    fieldLabel:='';
    layout:='column';
    //layout:='form';
    //layout:='fit';
    height:=aHeight;
    layoutConfig.Margin:='10 75 0 25';
    layoutConfig.width:='100%';
    //JSInterface.JSConfig('labelAlign', [top]);
    //JSInterface.JSConfig('minWidth', [205]);
    //JSInterface.JSConfig('maxWidth', [410]);
    JSInterface.JSConfig('minWidth', [425]);
    JSInterface.JSConfig('maxWidth', [950]);
  end;
  result:=fc;
end;




procedure TUniMainModule.createForm(aOwner, aParent:TUniPanel;formID:integer);
var tPan:TUniPanel;
    fc:TUniFieldContainer;
    queryComp, sqlParam, formSQL, aTitle, fLabel:string;
    queryID, fMaxLength, fWidth, fieldID, fTYpe, aHeight, panID:integer;
    dbQuery:TMySQLQuery;

function getFormQuery(s:string):TMySQLQuery;
var i:integer;
begin
  for i:=0 to componentCount-1 do
    if (Components[i] is TMySQLQuery) and sameText(uppercase(Components[i].Name), uppercase(s)) then
    result:=Components[i] as TMySQLQuery;
end;

begin
  createSpacer(aOwner, aParent);
  //formID determines form setup
  //select * from forms where id=:form_id;
  with formQuery do
  begin
    paramByName('form_ID').AsInteger:=formID;
    open;
    if not (recordCount=0) then
    begin
      formSQL:=fieldByName('sql').AsString;
      sqlParam:=fieldByName('parameter').AsString;
      queryComp:=fieldByName('querycomp').AsString;
    end;
    close;
  end;

  //get correct query parameter ID from formID
  case formID of
    1: queryID:=customerID;
  end;

  //get correct query from form setup table
  dbQuery:=getFormQuery(queryComp);
  with dbQuery do
  begin
    sql.Text:=formSQL;
    paramByName(sqlParam).AsInteger:=queryID;
    open;
  end;

  //loop through panels table
  //select * from panels where form_id=:form_id order by id;
  with panelsQuery do
  begin
    paramByName('form_ID').AsInteger:=formID;
    open;
    if not (recordCount=0) then
    begin
      while not eof do
      begin
        aTitle:=fieldByName('title').AsString;
        aHeight:=fieldByName('height').AsInteger;
        panID:=fieldByName('id').AsInteger;
        setupPanel(aOwner, aParent, dbQuery, formID, panID, aHeight, aTitle,'subtitle');
        Next;
      end;
    end else begin
      //Log error
      close;
      exit;
    end;
    close;
  end;
  createSpacer(aOwner, aParent);
end;




procedure TUniMainModule.setupPanel(aowner, aparent:TUniPanel;query:TMySQLQuery;formID, panID, aHeight:integer;title, subtitle:string);
var tPan:TUniPanel;
    fc, fc1, fc2:TUniFieldContainer;
    dSource, fName, fLabel:string;
    fMaxLength, fWidth, fieldID, fTYpe:integer;
    ds:TDataSource;
    containerID:integer;

function getDS(q:TMySQLQuery):TDataSource;
var i:integer;
begin
  for i:=0 to componentCount-1 do
    if (Components[i] is TDataSource) and ((Components[i] as TDataSource).Dataset=q) then
    result:=Components[i] as TDataSource;
end;

begin
  tPan:=createPanel(aOwner, aParent, aHeight, Title,'subtitle');

  //create fieldcontainer - local variable as this has to be unique for each panel...
  fc1:=createFC(aOwner, tPan, aHeight);
  //fc2:=createFC(aOwner, tPan, aHeight);

  //loop through fields connected to selected panel
  //select * from fields where form_ID=:formId order by panel_id, id;
  with fieldDataQuery do
  begin
    if active then close;
    paramByName('form_ID').AsInteger:=formID;
    paramByName('panel_ID').AsInteger:=panID;
    open;
    if not (recordCount=0) then
    begin
      while not eof do
      begin
        fType:=fieldByName('fTYpe').AsInteger;
        fieldID:=fieldByName('id').AsInteger;
        fLabel:=fieldByName('label').AsString;
        fWidth:=fieldByName('width').AsInteger;
        fMaxLength:=fieldByName('maxlength').AsInteger;
        fName:=fieldByName('fieldname').AsString;
        containerID:=fieldByName('container').AsInteger;
        {case containerID of
          1: fc:=fc1;
          2: fc:=fc2;
        end; }
        ds:=GetDS(query);
        case fTYpe of
          1: createCB(fc1, ds, fName, fLabel, fWidth);
          2: createEdit(fc1, ds, fName, fLabel, fWidth, fMaxLength);
        end;
        Next;
      end;
    end else begin
      //Log error
      close;
      exit;
    end;
    close;
  end;
end;

In addition there are functions for creating the fields:

procedure TUniMainModule.createEdit(aParent:TUniFieldContainer;aDataSource: TDataSource; fName:string; aLabel:string;aWidth, aMaxlength:integer);
var ed:TUniDBEdit;
begin
  ed:=TUniDBEdit.Create(aParent.owner);
  with ed do
  begin
    name:='ed'+getUniqueID;
    parent:=aParent;
    text:='Kaj Ronny Nilsen';
    fieldLabel:=aLabel;
    datafield:=fName;
    dataSource:=aDataSource;
    width:=aWidth;
    maxLength:=aMaxLength;
    font.Size:=11;
    tag:=0;
    borderStyle:=ubsSingle;
    layoutConfig.Margin:='10 20 0 0';
    layoutConfig.ColumnWidth:=0.45;
    fieldLabelSeparator:='';
    fieldLabelAlign:=laTop;
    fieldLabelFont.Color:=clDkGray;
    with clientEvents.UniEvents do
    begin
      values['afterCreate']:='function afterCreate(sender){sender.addCls("SPEdit");}';
    end;
  end;
end;

procedure TUniMainModule.createCB(aParent:TUniFieldContainer;aDataSource: TDataSource; fName:string; aCaption:string;aWidth:integer);
var cb:TUniDBCheckBox;
begin
  cb:=TUniDBCheckBox.Create(aParent.owner);
  with cb do
  begin
    name:='cb'+getUniqueID;
    parent:=aParent;
    tag:=1;
    caption:=aCaption;
    datafield:=fName;
    dataSource:=aDataSource;
    width:=aWidth;
    font.Size:=11;
    layoutConfig.Margin:='10 20 0 0';
    layoutConfig.ColumnWidth:=0.45;
  end;
end;

 

 

 

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...