Ron Posted March 29, 2021 Share Posted March 29, 2021 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 More sharing options...
mhmda Posted March 30, 2021 Share Posted March 30, 2021 Easy, use column layout Link to comment Share on other sites More sharing options...
Ron Posted March 30, 2021 Author Share Posted March 30, 2021 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 More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now