Forums

Board index » YUI 2.x: » DataTable and DataSource

Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view

Giancarlo

  • Username: gboaron
  • Joined: Tue Apr 05, 2011 2:58 pm
  • Posts: 3
  • Offline
  • Profile
Tags:

Datatable inside TabView, Layout Manager and Panel

Post Posted: Tue May 22, 2012 6:25 am
+0-
Hellow YUI Wizards!! :)

I think I really need some help with this issue: I have to make some updates in an existing system tha still uses YUI 2.7.0. In this system, there is a Panel. Inside this Panel, there is a Layout Manager that uses the top, left, center, right and bottom areas.

In the left area of Layou Manager, it has a Tab View with 3 Tabs. It also has a Tab View in the center (with 1 Tab) and a Tab View in the right (with 2 Tabs).

What I need to do is simple (I thought): in the first Tab of the left area I need to put a Data Table with values that comes from my database.

I tried so many times with variations of the code bellow, but it does not word for me. So, where is my mistake?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<link rel="stylesheet" type="text/css"href="arqyuicss/reset-fonts-grids.css">

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/resize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/assets/skins/sam/layout.css">

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/autocomplete/assets/skins/sam/autocomplete.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/tabview/assets/skins/sam/tabview.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/calendar/assets/skins/sam/calendar.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/menu/assets/skins/sam/menu.css">


<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/get/get-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/autocomplete/autocomplete-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/layout/layout-min.js"></script>

<style>

input
{
background-color: #eeeeee;
border-right: #000 0px solid;
border-top: #000 0px solid;
border-left: #000 0px solid;
border-bottom: #000 0px solid;
font-family: Arial, serif;
font-size: 8pt;
color: black;
font-style: normal;
cursor: pointer;
cursor: hand;
}

#fsmenubotoes {
background-color: #F2F2F2;
width:400px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

#fsaviso {
background-color: #F2F2F2;
width:400px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

td.bordasimples {border:1px solid black; border-left-style:solid; border-right-style:solid; border-bottom-style:solid;}

.yui-menu-button em.yui-button-label {

font-style: normal;
display: block;
text-align: left;
white-space: nowrap;

width: 10em;

overflow: hidden;

text-overflow: ellipsis;
-o-text-overflow: ellipsis;

}

li.yui-button-selectedmenuitem {
background: url(../button/assets/checkbox.png) left center no-repeat;
}

.yui-skin-sam div.yuimenubar {
width:98%;
margin: 0px auto;
}

.yui-content {
height: 520px;
}

</style>

</head>

<body class="yui-skin-sam" >

<br>
<div id="demo"></div>

<script type="text/javascript">

var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, layout = null, resize = null;

Event.onDOMReady( function() {

var panel1 = new YAHOO.widget.Panel( 'demo', {
draggable: false,
close: false,
autofillheight: "body",
underlay: 'none',
width: screen.width - 30 + 'px',
height: screen.height - 170 + 'px',
xy: [10, 50]
});

panel1.setHeader( 'PANEL HEADER');

panel1.setBody('<div id="layout"></div>');

panel1.renderEvent.subscribe(function() {

Event.onAvailable('layout', function() {

layout = new YAHOO.widget.Layout('layout', {

height: ( panel1.body.offsetHeight - 20 ), width: ( panel1.body.offsetWidth - 20 ), units: [

{ position: 'top', height: 80, resize: true, body: 'TOP', gutter: '2', collapse: false, minHeight: 4, maxHeight: 80 },
{ position: 'left', width: ( screen.width * 35 ) / 100, resize: true, body: '<div id=demotab class=yui-navset width=100%><ul class=yui-nav><li><a href=#tab1><em>TAB 1</em></a></li><li class=selected><a href=#tab2><em>TAB 2</em></a></li><li><a href=#tab3><em>TAB 3</em></a></li></ul><div class=yui-content><div id=tab4><p><div id="myContainer"><table id="myTable"><thead><tr><th>AAA</th><th>BBB</th><th>CCC</th></tr></thead><tbody><tr><td>1</td><td>bbb</td><td>ccc</td></tr><tr><td>2</td><td>bbb</td><td>ccc</td></tr><tr><td>3</td><td>bbb</td><td>ccc</td></tr></tbody></table></div></p></div><div id=tab5><p>TAB 2</p></div><div id=tab6><p>TAB 3</p></div></div></div>', gutter: '0 5 0 2', minWidth: 5, maxWidth: ( screen.width * 61.5 ) / 100, collapse: false },
{ position: 'bottom', height: 25, body: 'BOTTOM', gutter: '2', resize: true, collapse: false, minHeight: 4, maxHeight: 25 },
{ position: 'right', width: ( screen.width * 35 ) / 100, resize: true, body: '<div id=demotab2 class=yui-navset width=100%><ul class=yui-nav><li><a href=#tab1><em>TAB 4</em></a></li><li class=selected><a href=#tab2><em>TAB 5</em></a></li></ul><div class=yui-content><div id=tab1><p>TAB 4</p></div><div id=tab2><p>TAB 5</p></div></div></div>', gutter: '0 5 0 2', minWidth: 5, maxWidth: ( screen.width * 61.5 ) / 100, collapse: false },
{ position: 'center', body: '<div id=demotab1 class=yui-navset width=100%><ul class=yui-nav><li><a href=#tab1><em>TAB 6</em></a></li></ul><div class=yui-content><div id=tab1><p>TAB 6</p></div></div></div>', gutter: '0 2 0 0' }
]

});

layout.render();

var myDataSource = new YAHOO.util.DataSource( YAHOO.util.Dom.get( "myTable" ) );
myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
myDataSource.responseSchema = { fields: [

{ key: "AAA", parser:"number" },
{ key: "BBB" },
{ key: "CCC" }

]

};

var myColumnDefs = [

{ key: "AAA" },
{ key: "BBB" },
{ key: "CCC" }

];

var tabela = new YAHOO.widget.DataTable( "myContainer", myColumnDefs, myDataSource );

});

});

panel1.render();

var tabView = new YAHOO.widget.TabView( 'demotab' );
tabView.set('activeIndex', 0);

var tabView1 = new YAHOO.widget.TabView( 'demotab1' );
tabView1.set('activeIndex', 0);

var tabView2 = new YAHOO.widget.TabView( 'demotab2' );
tabView2.set('activeIndex', 0);

});

</script>

</body>
</html>

Satyam

YUI Contributor

  • Username: Satyam
  • Joined: Tue Dec 09, 2008 12:34 am
  • Posts: 2016
  • Location: Sitges, Spain
  • GitHub: Satyam
  • Gists: Satyam
  • IRC: DevaSatyam
  • YUI Developer
  • Offline
  • Profile

Re: Datatable inside TabView, Layout Manager and Panel

Post Posted: Tue May 22, 2012 7:04 am
+0-
Please post code in a way that it can be read with the proper indentation and stripped of all that is not required. Otherwise, post it in someplace like fiddle were it can be seen and run. Your posting is the worst of both worlds, it can't be read and it can't be run.
Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group