How to Load UI module to Tabs UI?

Develop and Deploy Cross-Browser Web Apps .

Re: How to Load UI module to Tabs UI?

Postby support » Sat Apr 27, 2013 9:24 am

Actually, insertItems + append is bettter way.
support
 
Posts: 346
Joined: Sat Apr 27, 2013 9:22 am

Re: How to Load UI module to Tabs UI?

Postby wahono77 » Sat Apr 27, 2013 6:02 pm

If I use linb.ComFactory.getCom, after tab closed, I can't load this module again.
And this problem can be fixed using linb.ComFactory.newCom. I'm sure that this module destroyed when it's parent (tab) destroyed.

I create a samples about link module to UI.Tabs. But I got a bug about dock. Please see module1 and module2, docking is broken.
I think this sample can be share with other in CodeSnipse forum after you fix it.

Thanks
Attachments
ModuleLink.rar
(5.61 KiB) Downloaded 191 times
wahono77
 
Posts: 90
Joined: Sat Apr 13, 2013 6:04 am

Re: How to Load UI module to Tabs UI?

Postby support » Sun Apr 28, 2013 1:02 am

linb.ComFactory.getCom will catch the com, if the com be destroyed, there's a error raise.

To use linb.ComFactory.getCom, you have to stop the com be destroyed.

And, about the dock problem.

You have to add a line,


js code
this.getUIComponents().reLayout(true);
support
 
Posts: 346
Joined: Sat Apr 27, 2013 9:22 am

Re: How to Load UI module to Tabs UI?

Postby wahono77 » Sun Apr 28, 2013 8:14 am

Yes, it works now. But for UI.Label I got problem. This label with hAlign=center, after relayout(true), label widget stretched to parent width, but the label still painted in left (it should painted in center widget)

Thanks
wahono77
 
Posts: 90
Joined: Sat Apr 13, 2013 6:04 am

Re: How to Load UI module to Tabs UI?

Postby linb » Sun Apr 28, 2013 8:42 am

You need add a root Panel to your sub model.

There is only a root control in the sub model is better.
linb
Site Admin
 
Posts: 102
Joined: Thu Apr 25, 2013 6:51 am

Re: How to Load UI module to Tabs UI?

Postby wahono77 » Sun Apr 28, 2013 8:47 am

Hmm, I don't undertand what you suggested. Can you explain it with code? :D
wahono77
 
Posts: 90
Joined: Sat Apr 13, 2013 6:04 am

Re: How to Load UI module to Tabs UI?

Postby linb » Sun Apr 28, 2013 9:53 am

   
Class('App.module1', 'linb.Com',{
Instance:{
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0))};

append(
(new linb.UI.Pane)
.setHost(host,"ctl_pane11")
.setDock("fill")
);

host.ctl_pane11.append(
(new linb.UI.TreeGrid)
.setHost(host,"ctl_treegrid13")
.setDock("cover")
.setDockMargin({"left":10, "top":100, "right":10, "bottom":10})
.setEditable(true)
.setRowHandler(false)
.setHeader([{"id":"label", "type":"label", "width":80, "caption":"label"}, {"id":"input", "type":"input", "width":80, "caption":"input"}, {"id":"combobox", "type":"combobox", "width":80, "caption":"combobox"}, {"id":"listbox", "type":"listbox", "width":80, "caption":"listbox"}, {"id":"getter", "type":"getter", "width":80, "caption":"getter"}, {"id":"cmdbox", "type":"cmdbox", "width":80, "caption":"cmdbox"}, {"id":"popbox", "type":"popbox", "width":80, "caption":"popbox"}, {"id":"date", "type":"date", "width":80, "caption":"date"}, {"id":"time", "type":"time", "width":80, "caption":"time"}, {"id":"datetime", "type":"datetime", "width":80, "caption":"datetime"}, {"id":"color", "type":"color", "width":80, "caption":"color"}, {"id":"spin", "type":"spin", "width":80, "caption":"spin"}, {"id":"currency", "type":"currency", "width":80, "caption":"currency"}, {"id":"number", "type":"number", "width":80, "caption":"number"}])
.setRows([{"cells":[{"value":"label1", "id":"c_a", "oValue":"label1"}, {"value":"input1", "id":"c_b", "oValue":"input1"}, {"value":"", "id":"c_c", "oValue":""}, {"value":"", "id":"c_d", "oValue":""}, {"value":"", "id":"c_e", "oValue":""}, {"value":"", "id":"c_f", "oValue":""}, {"value":"", "id":"c_g", "oValue":""}, {"value":new Date(2013,3,27,23,15,36,848), "id":"c_h", "oValue":new Date(2013,3,27,23,15,36,848)}, {"value":"00:00", "id":"c_i", "oValue":"00:00"}, {"value":new Date(2013,3,27,23,15,36,848), "id":"c_j", "oValue":new Date(2013,3,27,23,15,36,848)}, {"value":"#FFFFFF", "id":"c_k", "oValue":"#FFFFFF"}, {"value":0.12, "id":"c_l", "oValue":0.12}, {"value":23.44, "id":"c_m", "oValue":23.44}, {"value":43.23, "id":"c_n", "oValue":43.23}], "id":"d"}, {"cells":[{"value":"label2", "id":"c_o", "oValue":"label2"}, {"value":"input2", "id":"c_p", "oValue":"input2"}, {"value":"", "id":"c_q", "oValue":""}, {"value":"", "id":"c_r", "oValue":""}, {"value":"", "id":"c_s", "oValue":""}, {"value":"", "id":"c_t", "oValue":""}, {"value":"", "id":"c_u", "oValue":""}, {"value":new Date(2013,3,27,23,15,36,848), "id":"c_v", "oValue":new Date(2013,3,27,23,15,36,848)}, {"value":"02:00", "id":"c_w", "oValue":"02:00"}, {"value":new Date(2013,3,27,23,15,36,848), "id":"c_x", "oValue":new Date(2013,3,27,23,15,36,848)}, {"value":"#F0F0F0", "id":"c_y", "oValue":"#F0F0F0"}, {"value":0.13, "id":"c_z", "oValue":0.13}, {"value":123, "id":"c_aa", "oValue":123}, {"value":56.32, "id":"c_ab", "oValue":56.32}], "id":"e"}, {"cells":[{"value":"label3", "id":"c_ac", "oValue":"label3"}, {"value":"input3", "id":"c_ad", "oValue":"input3"}, {"value":"", "id":"c_ae", "oValue":""}, {"value":"", "id":"c_af", "oValue":""}, {"value":"", "id":"c_ag", "oValue":""}, {"value":"", "id":"c_ah", "oValue":""}, {"value":"", "id":"c_ai", "oValue":""}, {"value":new Date(2013,3,27,23,15,36,848), "id":"c_aj", "oValue":new Date(2013,3,27,23,15,36,848)}, {"value":"03:00", "id":"c_ak", "oValue":"03:00"}, {"value":new Date(2013,3,27,23,15,36,848), "id":"c_al", "oValue":new Date(2013,3,27,23,15,36,848)}, {"value":"#0F0F0F", "id":"c_am", "oValue":"#0F0F0F"}, {"value":0.14, "id":"c_an", "oValue":0.14}, {"value":233.55, "id":"c_ao", "oValue":233.55}, {"value":43.53, "id":"c_ap", "oValue":43.53}], "id":"f"}])
);

host.ctl_pane11.append(
(new linb.UI.SButton)
.setHost(host,"ctl_sbutton1")
.setWidth(240)
.setCaption("Activate Object in tab 'Home'")
.onClick("_ctl_sbutton1_onclick")
);

host.ctl_pane11.append(
(new linb.UI.Label)
.setHost(host,"ctl_label12")
.setTop(50)
.setWidth(230)
.setCaption("Content from module 1")
.setHAlign("center")
);

return children;
// ]]Code created by CrossUI RAD Tools
},
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
// This instance's events
events : {},
_ctl_sbutton1_onclick : function (profile, e, src, value) {
var uictrl = profile.boxing();
MainPanel.setUIValue('home',true);
MainPanel.getPanelChildren('home').ctl_input5.activate();
}
}
});
   
linb
Site Admin
 
Posts: 102
Joined: Thu Apr 25, 2013 6:51 am

Re: How to Load UI module to Tabs UI?

Postby wahono77 » Sun Apr 28, 2013 11:03 am

I still can not fix label alignment in module2.
But I modify it and combine load module to a tab using linb.History. And calling module from URL works now.
Attachments
ModuleLink.rar
(5.57 KiB) Downloaded 187 times
wahono77
 
Posts: 90
Joined: Sat Apr 13, 2013 6:04 am

Previous

Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 1 guest

cron