ColdFusion.Layout.createTab CSS Styling
I have been playing around with lots of the new ColdFusion 8 goodies. I am particularly impressed with CFGRID (HTML Format) and have been using CFLAYOUT a lot. These tags allow me build applications really fast without having to understand some of the complex things going on in the background. I don't know if you think this is a good thing or not, but for me it means I can concentrate on my project and not the UI.
Just one thing a wanted to share in regards to creating a new tab. I found it hard to find any example on how to create a new tab and then 'style' it as it was created using CSS. (Yes I know I can attach a stylesheet in the include) In my case I wanted to open up a new tab when a users clicks on a button in my CFGRID.
When I have time or if anyone really cares i will explain my code bellow in full but now i am only interested in the javascript:ColdFusion.Layout.createTab in my JavaScript functions
Function syntax
configObject is what I was interested in. It sets configuration parameters for the object. Its in here you can style using CSS you new tab
Example
Full code not yet commented on
2<head>
3<InvalidTag type="text/javascript">
4function init(){
5 var grid = ColdFusion.Grid.getGridObject("ordersSearch");
6 var gridHead = grid.getView().getHeaderPanel(true);
7 var tbar = new Ext.Toolbar(gridHead);
8 //view customer button
9 tbar.addButton({
10 text:"View Customer",
11 cls:"x-btn-text-icon",
12 icon:"./images/icons/group_go.png",
13 handler:onCustView
14 });
15 tbar.addSeparator()
16 console.log(tbar);
17}
18//function runs when view customers is clicked
19function onCustView(button,event){
20 var grid = ColdFusion.Grid.getGridObject("ordersSearch");
21 var record = grid.getSelections();
22 var custEmail = record[0].data.EMAIL;
23 javascript:ColdFusion.Layout.createTab('search-orders','customerEdit', 'Customer Details',"includes/customerEdit.cfm?custId=" + custEmail,{inithide:false,selected:true,closable:true,style:"padding:0.5em"});
24 console.log(button);
25 console.log(event);
26}
27
28</script>
29</head>
30<body>
31<cfform>
32<cfgrid name="ordersSearchGrid"
33 format="html"
34 pagesize="20"
35 striperows="yes"
36 width="auto"
37 height="auto"
38 selectmode="edit"
39 bind="cfc:components.grids.SearchFunction({cfgridpage},
40 {cfgridpagesize},
41 {cfgridsortcolumn},
42 {cfgridsortdirection}, '#searchString#', '#searchType#')"
43 onchange="cfc:components.grids.EditFunction({cfgridaction},
44 {cfgridrow},
45 {cfgridchanged})"
46
47 >
48 <cfgridcolumn name="order_id" header="ID" width="50" select="no"/>
49 <cfgridcolumn name="name" header="Customer Name" width="150" select="no"/>
50 <cfgridcolumn name="email" header="Email Address/ID" width="200" select="no"/>
51</cfgrid>
52</cfform>
53<cfset ajaxOnLoad("init")>
54</body>
55</html>
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]