uniPanel with rounded corners

[Ronak]

Hi,

How can I have corners of the Panel rounded?

 

Thanks

[lema]

I'm not sure if the following is correct , but it works for me.

 

.x-panel {
   border-radius: 10px;
}

[Ronak]

I'm not sure if the following is correct , but it works for me.

 

.x-panel {
   border-radius: 10px;
}

 

Thanks,

 

I made an attempt with ExtEvents but ...

can you please tell me where do I put this code?

[ChenHaibin]

I also want to know

[heromo80]

With UniPanel

 

ClientEvents.ExtEvents, OnAfterrender

 

function OnAfterrender(sender)
{
 sender.setBodyStyle('border-radius','5px');
}

 

regards

[Ronak]

With UniPanel

 

ClientEvents.ExtEvents, OnAfterrender

 

function OnAfterrender(sender)
{
 sender.setBodyStyle('border-radius','5px');
}

 

regards

 

works very nice, Thanks

[ChenHaibin]

With UniPanel

 

ClientEvents.ExtEvents, OnAfterrender

 

function OnAfterrender(sender)
{
 sender.setBodyStyle('border-radius','5px');
}

 

regards

 

Error:

O14F=new Ext.Panel({id:"O14F_id",layout:"absolute",bodyBorder:false,baseCls:"x-window",html:"",width:1196,height:496,x:0,y:0,style:"border:none"});O14F.nm="O14F";_cdo_("MarkersFrm");MarkersFrm.ajxS=AjaxSuccess;MarkersFrm.ajxF=AjaxFailure;MarkersFrm.form=O10;O14F.rootObj=true;MarkersFrm.appRoot="/";_cdo_("FramePanel",O14F,null,MarkersFrm); O15E=new Ext.Panel({id:"O15E_id",layout:"absolute",baseCls:"",width:192,height:496,x:0,y:0});O15E.nm="O15E";_cdo_("UniPageControl1",O15E,null,MarkersFrm); O16D=new Ext.TabPanel({plain:true,anchor:"0 0",enableTabScroll:true,deferredRender:false,id:"O16D_id",activeTab:0});O16D.nm="O16D";O16D.on("tabchange",function(P0,P1){ if (typeof P1=="undefined") return; _rpl_(P1,false,true);return Ext.Ajax.request({url:"/HandleEvent",params:"Ajax=1&IsEvent=1&Obj=O16D&Evt=tabchange&This="+P0.nm+"&Tab="+P1.nm+""+_gv_(O10),success:AjaxSuccess,failure:AjaxFailure,obj:O16D,e:"tabchange"});});O15E.add(O16D); O17C=new Ext.Panel({y:22,anchor:"0 0",baseCls:"x-tab-panel-inner"});O17C.nm="O17C";O15E.add(O17C);O14F.add(O15E);O10.doLayout(false,false); O18B=new Ext.Panel({id:"O18B_id",layout:"absolute",bodyBorder:false,cls:"x-tab-panel-sheet",forceLayout:true,itemId:"1",baseCls:"x-window",width:186,height:468,x:0,y:28,title:"functions",style:"border:none"});O18B.nm="O18B";_cdo_("UniTabSheet1",O18B,null,MarkersFrm);_psr_(O18B);O16D.add(O18B);O10.doLayout(false,false); O19A=new Ext.Panel({id:"O19A_id",layout:"absolute",bodyBorder:false,baseCls:"x-window",html:"\x3Ctable border=\"0\" width=\"100%\" height=\"100%\"\x3E\x3Ctr\x3E\x3Ctd id=\"O19A_id_td\" style=\"font:11px Tahoma;text-align:center\"\x3EUniPanel2\x3C/td\x3E\x3C/tr\x3E\x3C/table\x3E",width:142,height:119,x:25,y:128,bodyStyle: "background-color:#3399FE",style:"border:thin outset white"});O19A.nm="O19A";_cdo_("UniPanel2",O19A,null,MarkersFrm);_coe_(MarkersFrm,"UniPanel2",null,"afterrender",function(sender) { sender.setBodyStyle('border-radius','5px'); });O18B.add(O19A);O10.doLayout(false,false); O1A9=new Ext.Panel({id:"O1A9_id",layout:"absolute",bodyBorder:false,baseCls:"x-window",html:"\x3Ctable border=\"0\" width=\"100%\" height=\"100%\"\x3E\x3Ctr\x3E\x3Ctd id=\"O1A9_id_td\" style=\"font:11px Tahoma;text-align:center\"\x3EUniPanel1\x3C/td\x3E\x3C/tr\x3E\x3C/table\x3E",width:998,height:494,x:196,y:0,style:"border:thin outset white"});O1A9.nm="O1A9";_cdo_("UniPanel1",O1A9,null,MarkersFrm);O14F.add(O1A9);O10.doLayout(false,false); O1B8=new Ext.Panel({id:"O1B8_id",layout:"absolute",bodyBorder:false,border:false,width:1000,height:496,x:0,y:0});O1B8.nm="O1B8";_cdo_("UniGMap1",O1B8,null,MarkersFrm);O1A9.add(O1B8);O10.doLayout(false,false); O1C7=new Ext.Panel({id:"O1C7_id",baseCls:"x-window",bodyBorder:false,border:false,width:4,height:496,x:192,y:0});O1C7.nm="O1C7";_cdo_("UniSplitter1",O1C7,null,MarkersFrm); O1D6=new Ext.Panel({id:"O1D6_id",anchor:"r b",bodyBorder:false,border:false});O1D6.nm="O1D6";O14F.add(O1C7);O10.doLayout(false,false);O14F.add(O1D6);O10.doLayout(false,false);O6B.add(O14F);O10.doLayout(false,false);O6B.setTitle("map","");O15E.Id1="O4D_id";O15E.Id2="O6B_id";O18B.Id1="O4D_id";O18B.Id2="O6B_id";O19A.Id1="O16D_id";O19A.Id2="O18B_id";O1A9.Id1="O4D_id";O1A9.Id2="O6B_id";O1B8.Id1="O4D_id";O1B8.Id2="O6B_id";O1C7.Id1="O4D_id";O1C7.Id2="O6B_id"; O1E5=new Ext.util.TaskRunner(50);O1E5.nm="O1E5";_cdo_("UniTimer1",O1E5,null,MarkersFrm);try{O1E5.stopAll()}catch(e){}; O1E6= ({run: function(){ O1E5.cEvent(O1E5);Ext.Ajax.request({url:"/HandleEvent",params:"Ajax=1&IsEvent=1&Obj=O1E5&Evt=timer"+_gv_(O10),success:AjaxSuccess,failure:null,obj:O1E5});}, interval:10});O1E6.nm="O1E6";O1E5.cEvent=function(sender) { } ;O1E5.start(O1E6);O1E6.taskRunTime=O1E6.taskStartTime;O14F.Id1="O4D_id";O14F.Id2="O6B_id";O16D.setActiveTab("1");O18B.doLayout(false,false); O1E7=new Ext.SplitBar("O1C7_id","O1D6_id",2,1);O1E7.nm="O1E7";O1E7.minSize=30;O1E7.maxSize=10000;O1E7.on("moved",function(P0,P1){return Ext.Ajax.request({url:"/HandleEvent",params:"Ajax=1&IsEvent=1&Obj=O1E7&Evt=moved&This="+P0.nm+"&NewSize="+P1+""+_gv_(O10),success:AjaxSuccess,failure:AjaxFailure,obj:O1E7,e:"moved"});});O1E7.setCurrentSize(192);O1E7.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("O14F_id"));

[Farshad Mohajeri]

Error:

O14F=new Ext.Panel({id:"O14F_id",layout:"absolute",bodyBorder:false,baseCls:"x-window",html:"",width:1196,height:496,x:0,y:0,style:"border:none"});O14F.nm="O14F";_cdo_("MarkersFrm");MarkersFrm.ajxS=AjaxSuccess;MarkersFrm.ajxF=AjaxFailure;...

 

Please do not paste many lines of JS code in forums. It is not helpful.

 

Instead send a test case.

[Farshad Mohajeri]

With UniPanel

 

ClientEvents.ExtEvents, OnAfterrender

 

function OnAfterrender(sender)
{
 sender.setBodyStyle('border-radius','5px');
}

 

regards

 

PS: You must set the BorderStyle->ubsDefault first.

[miguel.tradatel]

I'm going all of post and this is the error.

 

Ajax Error: Object [object Object] has no method 'setBodyStyle'

 

Help me please.

[tzal]

I use this:

 

procedure SetPanelRoundBorders(const APanel: TUniPanel; APixels: Integer = 5);
begin
 APanel.ClientEvents.ExtEvents.Add
   ('OnAfterrender=function OnAfterrender(sender){' +
   'sender.body.applyStyles('#39'border-radius:' + IntToStr(APixels) +
   'px'#39');}');
end;

[Ronak]

I'm going all of post and this is the error.

 

Ajax Error: Object [object Object] has no method 'setBodyStyle'

 

Help me please.

Panel.rar

[Alexandrovf]

Link broken