PDA

View Full Version : Beginning with the Grid



allaboutyui
14 Nov 2006, 5:10 PM
The following code creates a grid, but with no data displayed. Just the box and the heading columns.

I attempted to extract the code from http://www.jackslocum.com/yui/2006/09/10/adding-built-in-editing-support-to-the-yahoo-ui-extensions-grid/

but I am missing something. There are no javascript errors thrown. Firebug shows that the XML is loaded from plants.xml.

Code below.

allaboutyui
14 Nov 2006, 5:19 PM
Damn.. I didn't select disable HTML and now it won't let me edit it !

Errors:


Error in deleting post

DEBUG MODE

SQL Error : 1030 Got error 134 from table handler

DELETE FROM phpbb_search_wordmatch WHERE post_id IN (3186)

Line : 419
File : functions_search.php

allaboutyui
14 Nov 2006, 5:20 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>GRID</title>
<style type="text/css">
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
.ygrid-cell-text {
display: block;
font: normal 8pt arial;
overflow: hidden;
padding: 3px 5px;
white-space: nowrap;
}
.ygrid-col{
cursor: default;
height:21px !important;
box-sizing: border-box;
-moz-box-sizing: border-box;
position:absolute;
display:block;
-moz-outline: none;
-moz-user-focus: normal;
overflow: hidden;
border-left: 1px solid #f1efe2;
}
.yeditgrid .ygrid-col{
-moz-outline: normal;
}
.ygrid-col, .ygrid-hd {
font: normal 8pt arial;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.ygrid-col-0{
border-left: 0px;
}
.ygrid-col-last{
border-right: 1px solid #f1efe2;
}
.ygrid-editor{
box-sizing: border-box;
-moz-box-sizing: border-box;
position:absolute;
visibility:hidden;
font: normal 8pt arial;
border: 1px solid #afbdc9;
z-index:10;
}
.ygrid-editor input{
font: normal 8pt arial;
border: 0px;
padding-top:2px;
padding-left:3px;
}
.ygrid-editor-container{
overflow:hidden;
display:block;
background-color:white;
}
.ygrid-editor .pick-button{
width:15px;
height:20px;
position:absolute;
display:block;
right:0;
top:0;
z-index:2;
background-image: url(../images/grid/pick-button.gif);
background-repeat: no-repeat;
}
.ygrid-editor-invalid{
background-image: url(../images/grid/invalid_line.gif);
background-repeat: repeat-x;
background-position: bottom;
border: 1px solid #afbdc9;
}
.ygrid-checkbox-editor{
text-align: center;
overflow:hidden;
display:block;
background-color:white;
}
.ygrid-checkbox-editor input{
margin-top:3px;
height:13px;
width:13px;
}
select.ygrid-editor{
padding: 0px;
-moz-outline: none;
border: 1px solid #afbdc9;
}
.ygrid-num-editor{
text-align:right;
padding-top:2px;
padding-left:3px;
}
.ygrid-text-editor{
padding-top:2px;
padding-left:3px;
}
.ygrid-hd{
background-color: #ebeadb;
border-bottom: 1px solid #cbc7b8;
box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
position: absolute;
overflow:hidden;
}
.ygrid-column-sizer {
width:1px;
border-right:1px dashed #6593cf;
background:none;
cursor: col-resize;
}
.ygrid-drag-proxy{
width:150px;
height:24px;
background-color:#3366cc;
border: 1px solid #002266;
position:absolute;
visibility:hidden;
z-index:10000;
}
.ygrid-drag-text{
font: normal 8pt arial;
color:white;
position:absolute;
top:0px;
left:26px;
padding:3px;
display:block;
}
.ygrid-drop-icon{
position:absolute;
top:0px;
left:0px;
display:block;
width:24px;
height:100%;
background-position: center;
background-repeat: no-repeat;
}
.ygrid-drop-nodrop{
background-image: url(../images/grid/drop-no.gif);
}
.ygrid-drop-ok{
background-image: url(../images/grid/drop-yes.gif);
}
.ygrid-hd .sort-asc {
background-image: url(../images/grid/sort_asc.gif);
background-position: right;
background-repeat: no-repeat;
display: none;
height: 14px;
width: 16px;
}
.ygrid-hd .sort-desc {
background-image: url(../images/grid/sort_desc.gif);
background-position: right;
background-repeat: no-repeat;
display: none;
height: 14px;
width: 16px;
}
.ygrid-hd-body {
border-bottom: 2px solid #d6d2c2;
cursor: default;
display: block;
font: normal 8pt arial;
left: 0;
overflow: hidden;
padding: 3px 5px;
position: relative;
top: 0;
white-space: nowrap;
}
.ygrid-hd-body span {
font: normal 8pt arial;
white-space: nowrap;
}
.ygrid-hd-over{
border-bottom: 2px solid #fcc247;
}
.ygrid-hd-over .ygrid-hd-body{
background-color: #faf9f4;
border-bottom: 1px solid #f9a900;
}
.ygrid-hd-split {
background-image: url(../images/grid/grid-split.gif);
background-position: center;
background-repeat: no-repeat;
cursor: e-resize;
display: block;
font-size: 1px;
height: 16px;
overflow: hidden;
position: absolute;
top: 2px;
width: 6px;
z-index: 3;
}
.ygrid-hrow{
background-color: #ebeadb;
display: block;
height: 22px;
left: 0;
position: relative;
top: 0;
width: 10000px;
overflow:hidden;
z-index:2;
}
.ygrid-hrow-frame{
height: 22px;
left: 0;
display:block;
position: absolute;
top: 0;
width: 10000px;
z-index:1;
}
.ygrid-footer .ytoolbar{
border:0px;
}
.ygrid-page-number{
width:24px;
height:14px;
}
.ygrid-page-first{
background-image: url(../images/grid/page-first.gif);
}
.ygrid-loading{
background-image: url(../images/grid/done.gif);
}
.ygrid-page-last{
background-image: url(../images/grid/page-last.gif);
}
.ygrid-page-next{
background-image: url(../images/grid/page-next.gif);
}
.ygrid-page-prev{
background-image: url(../images/grid/page-prev.gif);
}
.ytb-button-disabled .ygrid-loading{
background-image: url(../images/grid/loading.gif);
}
.ytb-button-disabled .ygrid-page-first{
background-image: url(../images/grid/page-first-disabled.gif);
}
.ytb-button-disabled .ygrid-page-last{
background-image: url(../images/grid/page-last-disabled.gif);
}
.ytb-button-disabled .ygrid-page-next{
background-image: url(../images/grid/page-next-disabled.gif);
}
.ytb-button-disabled .ygrid-page-prev{
background-image: url(../images/grid/page-prev-disabled.gif);
}
.ygrid-mso{
}
.ygrid-mso .ygrid-hd{
background:none;
border-bottom:0px;
}
.ygrid-mso .ygrid-footer {
border-top: 1px solid #6593cf;
}

.ygrid-mso .ygrid-footer .ygrid-fbutton{
border:0px;
}
.ygrid-mso .ygrid-hd-body {
border-bottom:0px;
}
.ygrid-mso .ygrid-hd-over{
border-bottom:0px;
}
.ygrid-mso .ygrid-hd-over .ygrid-hd-body{
background-color: transparent;
}
.ygrid-mso .ygrid-hd-split {
background-image: url(../images/grid/grid-blue-split.gif);
}
.ygrid-mso .ytoolbar .ytb-sep {
background-image: url(../images/grid/grid-blue-split.gif);
}
.ygrid-mso .ygrid-hrow{
background: url(../images/grid/mso-hd.gif);
border-bottom: 1px solid #6593cf;
height: 21px;
}
.ygrid-mso .ygrid-row{
color: black;
border-bottom: 1px solid #ddecfe;
}
.ygrid-mso .ygrid-row-alt{
background-color: #f5f5f5;
}
.ygrid-mso .ygrid-row-selected{
background-color: #b3c8e8 !important;
color: black;
}
.ygrid-mso .ygrid-row-selected span{
color: black !important;
}
.yprops-grid .ygrid-col-1{
background-color: #f1efe2;
}
.yprops-grid .ygrid-col-1 .ygrid-cell-text{
background-color: white;
}
.yprops-grid .ygrid-col-0{
background-color: #f1efe2;
}
.yprops-grid .ygrid-col-0 .ygrid-cell-text{
background-color: white;
margin-left:10px;
}
.yprops-grid .ygrid-prop-edting .ygrid-col-0 .ygrid-cell-text{
background-color: #316ac5;
color: white;
}
.yprops-grid .ygrid-prop-edting .ygrid-col-0{
color: white;
}
.yprops-grid .ygrid-num-editor{
text-align:left;
}
.ygrid-row{
border-bottom: 1px solid #f1efe2;
overflow: visible;
white-space: nowrap;
height:21px;
width:10000px;
box-sizing: border-box;
-moz-box-sizing: border-box;
display:block;
position:absolute;
}
.ygrid-row-alt{
background-color: #fcfaf6;
}
.ygrid-row-over{
background-color: #f1f1f1;
color: black;
}
.ygrid-row-selected{
background-color: #316ac5 !important;
color: white;
}
.ygrid-row-selected span{
color: white !important;
}
.ygrid-vista{
border:1px solid #535353;
}
.ygrid-vista .ygrid-hd{
border-bottom:0px;
}
.ygrid-vista .ygrid-hd-body {
border-bottom: 1px solid #b3bcc0;
}
.ygrid-vista .ygrid-hd-over{
border-bottom:0px;
}
.ygrid-vista .ygrid-hd-over .ygrid-hd-body{
background-color: transparent;
border-bottom:0px;
}
.ygrid-vista .ygrid-hd-split {
background-image: url(../images/grid/grid-split.gif);
}
.ygrid-vista .ygrid-hrow{
background: url(../images/grid/grid-vista-hd.gif);
height: 21px;
}
.ygrid-vista .ygrid-row-alt{
background-color: #f5f5f5;
}
.ygrid-vista .ygrid-row-selected{
background-color: #535353 !important;
color: white;
}
.ygrid-vista .ygrid-row-selected span{
color: white !important;
}
.ygrid-vista .ygrid-wrap-body {
}
/*
To have the scrollbars overlap the header, change .ygrid-wrap top style to 0 and
and ygrid-wrap-body top to 22px
Then grid.getView().scrollbarMode = YAHOO.ext.grid.GridView.SCROLLBARS_OVERLAP;
*/
.ygrid-wrap {
height: 100%;
left: 0;
overflow: auto;
position: relative;
top: 22px;
width: 100%;
}
.ygrid-footer{
display: block;
padding:0px;
border-top: 1px solid #cbc7b8;
}
.ygrid-wrap-footer {
display: block;
overflow: hidden;
width:100%;
height:25px;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #ebeadb;
position:absolute;
bottom:0px;
}
.ygrid-wrap-body {
left: 0;
overflow: hidden;
position: absolute;
top: 0;
display: block;
}
.ygrid-wrap-headers {
left: 0;
overflow: hidden;
position: absolute;
top: 0;
z-index: 12;
}
/*
The grid first check if a column style is defined as:
#your-grid .ygrid-col-0
if it doesn't find it, it uses one of the generic empty rules below.
If you have more than one grid on your page - you MUST define you columns
like above - #container-id .ygrid-col-0 and they must each be a separate rule
*/
.ygrid-col-0{
}
.ygrid-col-1{
}
.ygrid-col-10{
}
.ygrid-col-11{
}
.ygrid-col-12{
}
.ygrid-col-13{
}
.ygrid-col-14{
}
.ygrid-col-15{
}
.ygrid-col-16{
}
.ygrid-col-17{
}
.ygrid-col-18{
}
.ygrid-col-19{
}
.ygrid-col-2{
}
.ygrid-col-20{
}
.ygrid-col-3{
}
.ygrid-col-4{
}
.ygrid-col-5{
}
.ygrid-col-6{
}
.ygrid-col-7{
}
.ygrid-col-8{
}
.ygrid-col-9{
}

.ygrid-header-0{
}
.ygrid-header-1{
}
.ygrid-header-10{
}
.ygrid-header-11{
}
.ygrid-header-12{
}
.ygrid-header-13{
}
.ygrid-header-14{
}
.ygrid-header-15{
}
.ygrid-header-16{
}
.ygrid-header-17{
}
.ygrid-header-18{
}
.ygrid-header-19{
}
.ygrid-header-2{
}
.ygrid-header-20{
}
.ygrid-header-3{
}
.ygrid-header-4{
}
.ygrid-header-5{
}
.ygrid-header-6{
}
.ygrid-header-7{
}
.ygrid-header-8{
}
.ygrid-header-9{
}
/* The styles below are for the examples and can be removed */
#grid-example{
border: 1px solid #cbc7b8;
left: 0;
position: relative;
top: 0;
}
#grid-example .ygrid-col-0 {
}
#grid-example .ygrid-col-1 {
text-align: right;
}
#grid-example .ygrid-col-2{
text-align: right;
}
#grid-example .ygrid-col-3 {
text-align: right;
}
#grid-example .ygrid-col-4 {
text-align: right;
}
#grid-example.ygrid-mso{
border: 1px solid #6593cf;
}
#grid-example.ygrid-vista{
border: 1px solid #b3bcc0;
}
#xml-grid-example{
border: 1px solid #cbc7b8;
left: 0;
position: relative;
top: 0;
}
#xml-grid-example .ygrid-col-0 {
}
#xml-grid-example .ygrid-col-1 {
}
#xml-grid-example .ygrid-col-2{
}
#xml-grid-example .ygrid-col-3 {
}
#xml-grid-example.ygrid-mso{
border: 1px solid #6593cf;
}
#xml-grid-example.ygrid-vista{
border: 1px solid #b3bcc0;
}
#editor-grid .ygrid-col-2{
text-align:right;
}
.ypopcal{
background: white;
padding:2px;
border: 1px solid gray;
}
.ypopcal-shadow {
background: #dddddd;
filter: progid:DXImageTransform.Microsoft.Blur(MakeShadow=true,pixelradius=1) Alpha(opacity=35,style=1,startX=0,finishX=200,FinishOpacity=35);
padding: 0px;
position:absolute;
}
.ypopcal-head{
width:150px;
background: #93b5e4;
}
.ypopcal-head td{
padding:1px;
}
.ypopcal-month{
color: white;
font: bold 7pt verdana;
text-decoration: none;
text-align:center;
}
.ypopcal-head .ypopcal-arrow{
width:16px;
text-align:center;
cursor:pointer;
-moz-user-select: none;
}

.ypopcal-head .next-month{
width:16px;
background-image: url(../images/grid/arrow-right-white.gif);
background-position: center;
background-repeat: no-repeat;
cursor:pointer;
}
.ypopcal-head .prev-month{
width:16px;
background-image: url(../images/grid/arrow-left-white.gif);
background-position: center;
background-repeat: no-repeat;
cursor:pointer;
}

.ypopcal-table {
background:white;
border-bottom: 1px solid #cccccc;
}
.ypopcal-table tr{

}
.ypopcal-table td{
box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid white;
text-align:right;
color:#aaaaaa;
cursor:pointer;
font:normal 8pt arial;
background:white;
padding:1px 2px;
width:12px;
height:12px;
}
.ypopcal-table td.today{
border: 1px solid darkred;
}
.ypopcal-table .ypopcal-daynames td{
text-align:center !important;
border:0px;
border-bottom: 1px solid #cccccc;
font-size: 8pt;
font-weight: normal;
text-align:right;
color:black;
cursor:default;
}
.ypopcal-table td.active{
cursor:pointer;
color:black;
}
.ypopcal-table td.ypopcal-disabled{
cursor:default;
background:#eeeeee;
border: 1px solid #eeeeee;
color:#bbbbbb;
}
.ypopcal-table td.selected{
background: #ddecfe;
border: 1px solid #c3daf9;
}
.ypopcal-today{
color: black;
cursor: hand;
display: inline-block;
font: normal 8pt arial;
margin-left: 2px;
text-decoration: none;
margin-top:0px;
}

.ygrid-simple-view .ygrid-col{
height:100% !important;
position:static;
display:table-cell;
display:inline-block;
}
.ygrid-simple-view .ygrid-row{
position:static;
display: table-row;
}
.yresizable-handle {
position:absolute;
z-index:100;
/* ie needs these */
font-size:1px;
line-height:1px;
overflow:hidden;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
.yresizable-handle-east{
width:5px;
cursor:e-resize;
right:0px;
top:0px;
height:100%;
}
.yresizable-handle-south{
width:100%;
cursor:s-resize;
left:0px;
bottom:0px;
height:5px;
}
.yresizable-handle-west{
width:5px;
cursor:w-resize;
left:0px;
top:0px;
height:100%;
}
.yresizable-handle-north{
width:100%;
cursor:n-resize;
left:0px;
top:0px;
height:5px;
}
.yresizable-handle-southeast{
width:6px;
cursor:se-resize;
right:0px;
bottom:0px;
height:6px;
z-index:101;
}
.yresizable-over .yresizable-handle, .yresizable-pinned .yresizable-handle{
filter:alpha(opacity=100);
opacity:1;
}
.yresizable-over .yresizable-handle-east, .yresizable-pinned .yresizable-handle-east{
background:url(../images/sizer/e-handle.gif);
background-position: left;
border-left:1px solid #98c0f4;
}
.yresizable-over .yresizable-handle-east, .yresizable-pinned .yresizable-handle-west{
background:url(../images/sizer/e-handle.gif);
background-position: left;
border-right:1px solid #98c0f4;
}
.yresizable-over .yresizable-handle-south, .yresizable-pinned .yresizable-handle-south{
background:url(../images/sizer/s-handle.gif);
background-position: top;
border-top:1px solid #98c0f4;
}
.yresizable-over .yresizable-handle-south, .yresizable-pinned .yresizable-handle-north{
background:url(../images/sizer/s-handle.gif);
background-position: top;
border-bottom:1px solid #98c0f4;
}
.yresizable-over .yresizable-handle-southeast, .yresizable-pinned .yresizable-handle-southeast{
background-position: top left;
background:url(../images/sizer/se-handle.gif);
}
.yresizable-proxy{
border: 1px dashed #6593cf;
position:absolute;
overflow:hidden;
visibility:hidden;
z-index:1001;
}

/** gray theme */
.ytheme-gray .yresizable-over .yresizable-handle-east, .ytheme-gray .yresizable-pinned .yresizable-handle-east{
background:url(../images/sizer/gray/e-handle.gif);
background-position: left;
border-left:1px solid #615e55;
}
.ytheme-gray .yresizable-over .yresizable-handle-east,.ytheme-gray .yresizable-pinned .yresizable-handle-west{
background:url(../images/sizer/gray/e-handle.gif);
background-position: left;
border-right:1px solid #615e55;
}
.ytheme-gray .yresizable-over .yresizable-handle-south,.ytheme-gray .yresizable-pinned .yresizable-handle-south{
background:url(../images/sizer/gray/s-handle.gif);
background-position: top;
border-top:1px solid #615e55;
}
.ytheme-gray .yresizable-over .yresizable-handle-south,.ytheme-gray .yresizable-pinned .yresizable-handle-north{
background:url(../images/sizer/gray/s-handle.gif);
background-position: top;
border-bottom:1px solid #615e55;
}
.ytheme-gray .yresizable-over .yresizable-handle-southeast, .ytheme-gray .yresizable-pinned .yresizable-handle-southeast{
background-position: top left;
background:url(../images/sizer/gray/se-handle.gif);
}
.ytheme-gray .yresizable-proxy{
border: 1px dashed #615e55;
}
.ytoolbar{
background-color: #ebeadb;
border: 1px solid #cbc7b8;
display: block;
padding:2px;
}
.mso .ytoolbar, .ygrid-mso .ytoolbar{
border: 0px none;
background: url(../images/grid/mso-hd.gif);
}
.ytoolbar td,.ytoolbar span,.ytoolbar input,.ytoolbar div{
font:normal 8pt arial,helvetica;
}
.ytoolbar .ytb-button-disabled .ytb-button-inner{
color:gray;
cursor:default;
}
.ytoolbar .ytb-button-inner{
background-position: center;
background-repeat: no-repeat;
display: block;
height: 16px;
width: 16px;
cursor:pointer;
white-space: nowrap;
}
.ytoolbar .ytb-text{
padding:2px;
}
.ytoolbar .ytb-button{
padding:2px;
display:block;
}
.ytoolbar .ytb-button-over{
background-color:#c3d3ed;
border:1px solid #316ac5;
padding:1px;
}
.ytoolbar .ytb-sep {
background-image: url(../images/grid/grid-split.gif);
background-position: center;
background-repeat: no-repeat;
display: block;
font-size: 1px;
height: 16px;
width:4px;
overflow: hidden;
cursor:default;
margin: 0px 2px 0px;
border:0px;
}
.mso .ytoolbar .ytb-sep, .ygrid-mso .ytoolbar .ytb-sep{
background-image: url(../images/grid/grid-blue-split.gif);
}
.ytab-wrap {
border-bottom:1px solid #6593cf;
padding-top:2px;
}
.ytab-wrap table{
position:relative;
top:0; left:0;
}
.ytab-strip td{
padding-left:2px;
}
.ytab-strip a, .ytab-strip span, .ytab-strip em {
display:block;
}
.ytab-strip a {
text-decoration:none !important;
-moz-outline: none;
outline: none;
cursor:pointer;
}
.ytab-strip .ytab-text {
font:bold 11px tahoma,arial,helvetica;
color:#666;
overflow:hidden;
white-space: nowrap;
cursor:pointer;
text-overflow: ellipsis;
}
.ytab-strip .on .ytab-text {
cursor:default;
color:#083772;
}
.ytab-strip .disabled .ytab-text {
cursor:default;
color:#aaaaaa;
}
.ytab-strip .ytab-inner {
padding:4px 10px;
}

.ytab-strip .on .ytab-right {
background: url(../images/tabs/tab-sprite.gif) no-repeat right 0px;
}
.ytab-strip .on .ytab-left {
background: url(../images/tabs/tab-sprite.gif) no-repeat 0px -100px;
}
.ytab-strip .ytab-right {
background: url(../images/tabs/tab-sprite.gif) no-repeat right -50px;
}
.ytab-strip .ytab-left {
background: url(../images/tabs/tab-sprite.gif) no-repeat 0px -150px;
}

.ytab-strip a {
position:relative;
top:1px; left:0;
}
.ytab-strip .on a {

}
.ytab-strip .on .ytab-inner {
padding-bottom:5px;
}
/** closable tabs */
.ytab-strip .ytab-closable .ytab-inner{
padding-right:22px;
position:relative;
}
.ytab-strip .ytab-closable .close-icon{
line-height: 1px;
font-size:1px;
background-image:url(../images/layout/tab-close.gif);
display:block;
position:absolute;
right:5px;top:4px;
width:11px;height:11px;
cursor:pointer;
}
.ytab-strip .on .close-icon{
background-image:url(../images/layout/tab-close-on.gif);
}
.ytab-strip .ytab-closable .close-over{
background-image:url(../images/layout/tab-close-on.gif);
}

.ytabs-bottom .ytab-wrap {
border-top:1px solid #6593cf;
border-bottom:0px none;
padding-top:0px;
padding-bottom:2px;
}
.ytabs-bottom .ytab-strip .ytab-right {
background: url(../images/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom left;
}
.ytabs-bottom .ytab-strip .ytab-left {
background: url(../images/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom right;
}
.ytabs-bottom .ytab-strip .on .ytab-right {
background: url(../images/tabs/tab-btm-right-bg.gif) no-repeat bottom left;
}
.ytabs-bottom .ytab-strip .on .ytab-left {
background: url(../images/tabs/tab-btm-left-bg.gif) no-repeat bottom right;
}
.ytabs-bottom .ytab-strip a {
position:relative;
top:0; left:0;
}
.ytabs-bottom .ytab-strip .on a {
margin-top:-1px;
}
.ytabs-bottom .ytab-strip .on .ytab-inner {
padding-top:5px;
}

/** gray theme */

.ytheme-gray .ytab-wrap {
border-bottom:1px solid #aca899;
}
.ytheme-gray .ytab-strip .on .ytab-text {
cursor:default;
color:#333333;
}
.ytheme-gray .ytabs-top .ytab-strip .on .ytab-right {
background: url(../images/tabs/gray/tab-sprite.gif) no-repeat right 0px;
}
.ytheme-gray .ytabs-top .ytab-strip .on .ytab-left {
background: url(../images/tabs/gray/tab-sprite.gif) no-repeat 0px -100px;
}
.ytheme-gray .ytabs-top .ytab-strip .ytab-right {
background: url(../images/tabs/gray/tab-sprite.gif) no-repeat right -50px;
}
.ytheme-gray .ytabs-top .ytab-strip .ytab-left {
background: url(../images/tabs/gray/tab-sprite.gif) no-repeat 0px -150px;
}
.ytheme-gray .ytab-strip .ytab-closable .close-icon{
background-image:url(../images/layout/gray/tab-close.gif);
}
.ytheme-gray .ytab-strip .on .close-icon{
background-image:url(../images/layout/gray/tab-close-on.gif);
}
.ytheme-gray .ytab-strip .ytab-closable .close-over{
background-image:url(../images/layout/gray/tab-close-on.gif);
}

.ytheme-gray .ytabs-bottom .ytab-wrap {
border-bottom:0px none;
padding-top:0px;
border-top:1px solid #aca899;
}
.ytheme-gray .ytabs-bottom .ytab-strip .ytab-right {
background: url(../images/tabs/gray/tab-btm-inactive-right-bg.gif) no-repeat bottom left;
}
.ytheme-gray .ytabs-bottom .ytab-strip .ytab-left {
background: url(../images/tabs/gray/tab-btm-inactive-left-bg.gif) no-repeat bottom right;
}
.ytheme-gray .ytabs-bottom .ytab-strip .on .ytab-right {
background: url(../images/tabs/gray/tab-btm-right-bg.gif) no-repeat bottom left;
}
.ytheme-gray .ytabs-bottom .ytab-strip .on .ytab-left {
background: url(../images/tabs/gray/tab-btm-left-bg.gif) no-repeat bottom right;
}
.ydlg-proxy {
background-image: url('../images/gradient-bg.gif');
background-color:#c3daf9;
border:1px solid #6593cf;
z-index:10001;
overflow:hidden;
position:absolute;
left:0;top:0;
}
.ydlg-shadow{
background:#aaaaaa;
position:absolute;
display:none;
}
.ydlg-mask{
z-index:10000;
display:none;
position:absolute;
top:0;
left:0;
-moz-opacity: 0.5;
opacity:.50;
filter: alpha(opacity=50);
background-color:#CCC;
}
body.masked{
overflow:hidden;
}
body.masked select {
visibility:hidden;
}
body.masked .ydlg select {
visibility:visible;
}
.ydlg{
z-index:10001;
overflow:hidden;
position:absolute;
left:300;top:0;
}
.yresizable-proxy{
z-index:10002;
}
.ydlg .ydlg-hd {
background: url(../images/basic-dialog/hd-sprite.gif) repeat-x 0px -82px;
background-color:navy;
color:#FFF;
font:bold 12px "sans serif", tahoma, verdana, helvetica;
overflow:hidden;
padding:5px;
}
.ydlg .ydlg-hd-left {
background: url(../images/basic-dialog/hd-sprite.gif) no-repeat 0px -41px;
padding-left:3px;
margin:0px;
}
.ydlg .ydlg-hd-right {
background: url(../images/basic-dialog/hd-sprite.gif) no-repeat right 0px;
padding-right:3px;
}
.ydlg .ydlg-dlg-body{
background:url(../images/layout/gradient-bg.gif);
border:1px solid #6593cf;
border-top:0px none;
padding:10px;
}
.ydlg .ydlg-bd{
overflow:hidden;
}
.ydlg .ydlg-ft{
overflow:hidden;
padding:5px;
padding-bottom:0px;
}
.ydlg .yui-ext-tabbody{
background:white;
overflow:auto;
}
.ydlg .ytabs-top .yui-ext-tabbody{
border:1px solid #6593cf;
border-top:0px none;
}
.ydlg .ytabs-bottom .yui-ext-tabbody{
border:1px solid #6593cf;
border-bottom:0px none;
}
.ydlg .ylayout-container .yui-ext-tabbody{
border:0px none;
}
.ydlg .inner-tab{
margin:5px;
}
.ydlg .ydlg-button{
font:normal 11px arial, tahoma, verdana, helvetica;
margin-right:5px;
float:right;
cursor:pointer;
clear:none;
}
.ydlg-button-left, .ydlg-button-right{
font-size:1px;
line-height:1px;
}

.ydlg-button-left{
width:3px;
height:21px;
background:url(../images/basic-dialog/btn-sprite.gif) no-repeat 0px 0px;
}
.ydlg-button-right{
width:3px;
height:21px;
background:url(../images/basic-dialog/btn-sprite.gif) no-repeat 0px -21px;
}
.ydlg-button-focus{
text-decoration:none !important;
}
.ydlg-button-center{
background:url(../images/basic-dialog/btn-sprite.gif) repeat-x 0px -42px;
font:normal 11px "san serif",tahoma,verdana,helvetica;
vertical-align: middle;
text-align:center;
padding:0px 5px;
cursor:pointer;
white-space:nowrap;
-moz-user-select: none;
-khtml-user-select: none;
}
.ydlg-button-over .ydlg-button-left{
background-position:0px -63px;
}
.ydlg-button-over .ydlg-button-right{
background-position:0px -84px;
}
.ydlg-button-over .ydlg-button-center{
background-position:0px -105px;
}
.ydlg-button-click .ydlg-button-center{
background-position:0px -126px;
}

.ydlg-button-disabled{
cursor:default;
}
.ydlg-button-disabled .ydlg-button-center{
color:gray;
cursor:default;
}
.ydlg-draggable .ydlg-hd{
cursor:move;
}
.ydlg-closable .ydlg-hd{
padding-right:22px;
}
.ydlg .ydlg-close {
position:absolute;
top:4px;
right:4px;
z-index:6;
height:15px;
width:15px;
margin:0px;
padding:0px;
line-height:1px;
font-size:1px;
background-repeat:no-repeat;
cursor:pointer;
visibility:inherit;
background-image:url(../images/basic-dialog/close.gif);
}
.ydlg div.yresizable-handle-east{
background-image:url(../images/basic-dialog/e-handle.gif);
border:0px;
background-position:right;
}
.ydlg div.yresizable-handle-south{
background-image:url(../images/sizer/s-handle-dark.gif);
border:0px;
height:6px;
}
.ydlg div.yresizable-handle-west{
background-image:url(../images/basic-dialog/e-handle.gif);
border:0px;
background-position:1px;
}
.ydlg div.yresizable-handle-north{
background-image:url(../images/s.gif);
border:0px;
}
.ydlg div.yresizable-handle-southeast{
background-image:url(../images/basic-dialog/se-handle.gif);
background-position: bottom right;
width:8px;
height:8px;
border:0px;
}

/** gray theme */

.ytheme-gray .ydlg-proxy {
background-image: url('../images/layout/gray/gradient-bg.gif');
background-color:#EAE8D5;
border:1px solid #b3b6b0;
}
.ytheme-gray .ydlg-shadow{
background:#aaaaaa;
}
.ytheme-gray .ydlg-proxy .tabset{
background:url(../images/layout/gray/gradient-bg.gif);
}
.ytheme-gray .ydlg .ydlg-hd {
background: url(../images/basic-dialog/gray/hd-sprite.gif) repeat-x 0px -82px;
background-color:#333333;
}
.ytheme-gray .ydlg .ydlg-hd-left {
background: url(../images/basic-dialog/gray/hd-sprite.gif) no-repeat 0px -41px;
}
.ytheme-gray .ydlg .ydlg-hd-right {
background: url(../images/basic-dialog/gray/hd-sprite.gif) no-repeat right 0px;
}
.ytheme-gray .ydlg .ydlg-dlg-body{
background:#efefec;
border:1px solid #b3b6b0;
border-top:0px none;
}
.ytheme-gray .ydlg .ytabs-top .yui-ext-tabbody{
border:1px solid #b3b6b0;
border-top:0px none;
}
.ytheme-gray .ydlg .ytabs-bottom .yui-ext-tabbody{
border:1px solid #b3b6b0;
border-bottom:0px none;
}
.ytheme-gray .ydlg .ylayout-container .yui-ext-tabbody{
border:0px none;
}
.ytheme-gray .ydlg .ydlg-close {
background-image:url(../images/basic-dialog/gray/close.gif);
}
.ytheme-gray .ydlg div.yresizable-handle-east{
background-image:url(../images/basic-dialog/gray/e-handle.gif);
border:0px none;
}
.ytheme-gray .ydlg div.yresizable-handle-south{
background-image:url(../images/basic-dialog/gray/s-handle.gif);
border:0px none;
}
.ytheme-gray .ydlg div.yresizable-handle-west{
background-image:url(../images/basic-dialog/gray/e-handle.gif);
border:0px none;
}
.ytheme-gray .ydlg div.yresizable-handle-southeast{
background-image:url(../images/basic-dialog/gray/se-handle.gif);
background-position: bottom right;
width:8px;
height:8px;
border:0px;
}
.ytheme-gray .ydlg div.yresizable-handle-north{
background-image:url(../images/s.gif);
border:0px none;
}
.ylayout-container{
width:100%;
height:100%;
overflow:hidden;
background-color:#c3daf9;
}
.ylayout-collapsed{
position:absolute;
left:-10000px;
top:-10000px;
visibility:hidden;
background-color:#c3daf9;
width:20px;
height:20px;
overflow:hidden;
border:1px solid #98c0f4;
z-index:20;
}
.ylayout-collapsed-over{
cursor:pointer;
background-color:#d9e8fb;
}
.ylayout-collapsed-west .ylayout-tools-button{
float:right;
}
.ylayout-collapsed-east .ylayout-tools-button{
float:left;
}
.ylayout-collapsed-north, .ylayout-collapsed-south{
text-align:right;
}
.ylayout-collapsed .ylayout-tools-button{
margin:2px;
width:12px;
text-align:center;
}
.ylayout-inactive-content{
position:absolute;
left:-10000px;
top:-10000px;
visibility:hidden;
}
.ylayout-active-content{
visibility:visible;
}
.ylayout-panel{
position:absolute;border:1px solid #98c0f4;overflow:hidden;background-color:white;
}
.ylayout-panel-east, .ylayout-panel-west {
z-index:10;
}
.ylayout-panel-north, .ylayout-panel-south {
z-index:11;
}
.ylayout-collapsed-north, .ylayout-collapsed-south, .ylayout-collapsed-east, .ylayout-collapsed-west {
z-index:12;
}
.ylayout-panel{
position:absolute;border:1px solid #98c0f4;overflow:hidden;background-color:white;
}
.ylayout-panel-body{
overflow:hidden;
}
.ylayout-grid-wrapper{

}
.ylayout-split{
position:absolute;
height:5px;
width:5px;
line-height:1px;
font-size:1px;
z-index:3;
background-color:#c3daf9;
}
.ylayout-panel-hd{
background-image: url(../images/layout/panel-title-light-bg.gif);
color: black;
border-bottom:1px solid #98c0f4;
position:relative;
}
.ylayout-panel-hd-text{
font:normal 11px tahoma, verdana, helvetica;
padding: 4px;
padding-left: 4px;
display:block;
}
.ylayout-panel-hd-tools{
position:absolute;
right:0px;
top:0px;
text-align:right;
padding-top:2px;
padding-right:2px;width:40px;
}
.ylayout-tools-button{
z-index:6;
padding:2px;
cursor:pointer;
float:right;
}
.ylayout-tools-button-over{
padding:1px;
border:1px solid #98c0f4;
background-color:white;
}
.ylayout-tools-button-inner{
height:12px;
width:12px;
line-height:1px;
font-size:1px;
background-repeat:no-repeat;
background-position:center;
}
.ylayout-close{
background-image:url(../images/layout/panel-close.gif);
}
.ylayout-collapse-west,.ylayout-expand-east{
background-image:url(../images/layout/collapse.gif);
}
.ylayout-expand-west,.ylayout-collapse-east{
background-image:url(../images/layout/expand.gif);
}
.ylayout-collapse-north,.ylayout-expand-south{
background-image:url(../images/layout/ns-collapse.gif);
}
.ylayout-expand-north,.ylayout-collapse-south{
background-image:url(../images/layout/ns-expand.gif);
}
.ylayout-split-h{
background-image:url(../images/sizer/e-handle.gif);
background-position: left;
}
.ylayout-split-v{
background-image:url(../images/sizer/s-handle.gif);
background-position: top;
}
.ylayout-panel .ytab-wrap{
background:url(../images/layout/gradient-bg.gif);
}
.ylayout-panel .yui-ext-tabbody {
background-color:white;
overflow:auto;height:100%;
}
.ylayout-component-panel, .ylayout-nested-layout {
position:relative;
padding:0px;
overflow:hidden;
width:200px;
height:200px;
}
.ylayout-nested-layout .ylayout-panel {
border:0px none;
}
.ylayout-nested-layout .ylayout-panel-north {
border-bottom:1px solid #98c0f4;
}
.ylayout-nested-layout .ylayout-panel-south {
border-top:1px solid #98c0f4;
}
.ylayout-nested-layout .ylayout-panel-east {
border-left:1px solid #98c0f4;
}
.ylayout-nested-layout .ylayout-panel-west {
border-right:1px solid #98c0f4;
}
.yui-ext-repaint{
zoom:1;
background-color: transparent;
}
.ylayout-panel-dragover {
border: 2px solid #6593cf;
}
.ylayout-panel-proxy {
background-image: url('../images/layout/gradient-bg.gif');
background-color:#c3daf9;
border:1px dashed #6593cf;
z-index:10001;
overflow:hidden;
position:absolute;
left:0;top:0;
}
.ylayout-slider {
z-index:15;
overflow:hidden;
position:absolute;
}

/** gray theme */

.ytheme-gray,div.ytheme-gray,.ytheme-gray .ylayout-container{
background-color:#f3f2e7;
}
.ytheme-gray{
background-color:#f3f2e7;
}
.ytheme-gray .ylayout-collapsed{
background-color:#f3f2e7;
border:1px solid #aca899;
}
.ytheme-gray .ylayout-collapsed-over{
background-color:#fbfbef;
}
.ytheme-gray .ylayout-panel{
border:1px solid #aca899;
}
.ytheme-gray .ylayout-nested-layout .ylayout-panel {
border:0px none;
}
.ytheme-gray .ylayout-split{
background-color:#f3f2e7;
}
.ytheme-gray .ylayout-panel-hd{
background-image: url(../images/layout/gray/panel-title-light-bg.gif);
border-bottom:1px solid #aca899;
}
.ytheme-gray .ylayout-tools-button-over{
border:1px solid #aca899;
}
.ytheme-gray .ylayout-close{
background-image:url(../images/layout/gray/panel-close.gif);
}
.ytheme-gray .ylayout-collapse-west,.ytheme-gray .ylayout-expand-east{
background-image:url(../images/layout/gray/collapse.gif);
}
.ytheme-gray .ylayout-expand-west,.ytheme-gray .ylayout-collapse-east{
background-image:url(../images/layout/gray/expand.gif);
}
.ytheme-gray .ylayout-collapse-north,.ytheme-gray .ylayout-expand-south{
background-image:url(../images/layout/gray/ns-collapse.gif);
}
.ytheme-gray .ylayout-expand-north,.ytheme-gray .ylayout-collapse-south{
background-image:url(../images/layout/gray/ns-expand.gif);
}
.ytheme-gray .ylayout-split-h{
background-image:url(../images/sizer/gray/e-handle-dark.gif);
}
.ytheme-gray .ylayout-split-v{
background-image:url(../images/sizer/gray/s-handle-dark.gif);
}
.ytheme-gray .ylayout-panel .ytab-wrap{
background:url(../images/layout/gray/gradient-bg.gif);
}
.ytheme-gray .ylayout-nested-layout .ylayout-panel-north {
border-bottom:1px solid #aca899;
}
.ytheme-gray .ylayout-nested-layout .ylayout-panel-south {
border-top:1px solid #aca899;
}
.ytheme-gray .ylayout-nested-layout .ylayout-panel-east {
border-left:1px solid #aca899;
}
.ytheme-gray .ylayout-nested-layout .ylayout-panel-west {
border-right:1px solid #aca899;
}
.ytheme-gray .ylayout-panel-dragover {
border: 2px solid #aca899;
}
.ytheme-gray .ylayout-panel-proxy {
background-image: url('../images/layout/gray/gradient-bg.gif');
background-color:#f3f2e7;
border:1px dashed #aca899;
}
</style>
<script type="text/javascript" src="yui/yahoo.js"></script>
<script type="text/javascript" src="yui/dom.js"></script>
<script type="text/javascript" src="yui/event.js"></script>
<script type="text/javascript" src="yui/connection.js"></script>
<script type="text/javascript" src="yui/animation.js"></script>
<script type="text/javascript" src="yui/dragdrop.js"></script>
<script type="text/javascript" src="yui/yui-ext.js"></script>
<script type="text/javascript">
EditorExample = function(){
var dataModel;
var grid;
var colModel;

var formatMoney = function(value){
value -= 0;
value = (Math.round(value*100))/100;
value = (value == Math.floor(value)) ? value + '.00' : ( (value*10 == Math.floor(value*10)) ? value + '0' : value);
return "$" + value;
};

var formatBoolean = function(value){
return value ? 'Yes' : 'No';
};

var formatDate = function(value){
return value.dateFormat('M d, Y');
};

var parseDate = function(value){
return new Date(Date.parse(value));
};

return {
init : function(){
var yg = YAHOO.ext.grid;
var cols = [{
header: "Common Name",
width: 160,
editor: new yg.TextEditor({allowBlank: false})
},{
header: "Light",
width: 130,
editor: new yg.SelectEditor('light')
},{
header: "Price",
width: 70,
renderer: formatMoney,
editor: new yg.NumberEditor({allowBlank: false, allowNegative: false, maxValue: 10})
},{
header: "Available",
width: 95,
renderer: formatDate,
editor: new yg.DateEditor({format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends',
disabledDates : ['^07', '04/15', '12/02/06'],
disabledDatesText : 'The plants are pollinating on %0, choose a different date.'})
},{
header: "Indoor?",
width: 55,
renderer: formatBoolean,
editor: new yg.CheckboxEditor()
}];
colModel = new YAHOO.ext.grid.DefaultColumnModel(cols);
colModel.defaultSortable = true;

var schema = {
tagName: 'plant',
id: 'use-index',
fields: ['common', 'light', 'price', 'availability', 'indoor']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
dataModel.addPreprocessor(2, parseFloat);
dataModel.addPreprocessor(3, parseDate);
dataModel.addPreprocessor(4, Boolean);
dataModel.setDefaultSort(colModel, 0, "DESC");

grid = new YAHOO.ext.grid.EditorGrid('editor-grid', dataModel, colModel);
// to use double click to edit:
//grid.getSelectionModel().clicksToActivateCell = 2;
grid.render();

dataModel.load('plants.xml');
},

// filtering support, regex, function or text match
filter : function(e){
var mfilter = function(value){
return (value == 'Shade');
}
dataModel.filter({0: /^B.*/i, 1: mfilter});
},

// hide columns
hide : function(e){
colModel.setHidden(1, true);
}
};
}();

YAHOO.util.Event.on(window, 'load', EditorExample.init, EditorExample, true);
//YAHOO.util.Event.on(document, 'keypress', EditorExample.hide, EditorExample, true);
</script>
</head>

<body>

<select name="light" id="light" class="ygrid-editor" style="visibility: hidden;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>

<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>

<div id="editor-grid" style="border: 1px solid rgb(203, 199, 184); overflow: hidden; width: 535px; height: 225px;"></div>

</body>
</html>

jack.slocum
15 Nov 2006, 8:21 AM
Does your container element have a css width and height set?

allaboutyui
15 Nov 2006, 9:13 AM
Yes,
<div id="editor-grid" style="border: 1px solid rgb(203, 199, 184); overflow: hidden; width: 535px; height: 225px;"></div>

jack.slocum
15 Nov 2006, 9:27 PM
Your code looks ok, there's nothing obvious. Can you put up a page for me somewhere?

allaboutyui
16 Nov 2006, 8:50 AM
Aha ! I was running it locally - it works fine on the webserver. I'll wrap it up a little neater in a minute and make a post in the examples section.

The example can be found at http://fxmy.co.uk/grid.html

jack.slocum
16 Nov 2006, 9:39 AM
It looks great. In fact I will be stealing your (my?) source and putting it the the Documentation Center! :D

allaboutyui
16 Nov 2006, 9:42 AM
I was hoping you'd say that !

When I have made my grid save/load data (MySQL) I will send add another example to show my implementation.

jack.slocum
16 Nov 2006, 9:44 AM
Sounds great. Thanks for sharing.