对YUI扩展的Gird组件 Part-2

Jade ·

更新时间:2024-11-13

· 789 次阅读

原文在这里文章日期：2006-9-2

代码在这里

Q:unknown { content: '' } Q:unknown { content: '' } .ygrid-cell-text { PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; PADDING-BOTTOM: 3px; FONT: 8pt arial; OVERFLOW: hidden; PADDING-TOP: 3px; WHITE-SPACE: nowrap } .ygrid-col { DISPLAY: block; OVERFLOW: hidden; BORDER-LEFT: #f1efe2 1px solid; CURSOR: default; POSITION: absolute; HEIGHT: 21px! important; box-sizing: border-box; moz-box-sizing: border-box; moz-outline: none; moz-user-focus: normal } .yeditgrid .ygrid-col { moz-outline: normal } .ygrid-col { FONT: 8pt arial; TEXT-OVERFLOW: ellipsis; o-text-overflow: ellipsis } .ygrid-hd { FONT: 8pt arial; TEXT-OVERFLOW: ellipsis; o-text-overflow: ellipsis } .ygrid-col-0 { BORDER-LEFT-WIDTH: 0px; LEFT: 0px; WIDTH: 120px } .ygrid-col-last { BORDER-RIGHT: #f1efe2 1px solid } .ygrid-editor { BORDER-RIGHT: #afbdc9 1px solid; BORDER-TOP: #afbdc9 1px solid; Z-INDEX: 10; VISIBILITY: hidden; FONT: 8pt arial; BORDER-LEFT: #afbdc9 1px solid; BORDER-BOTTOM: #afbdc9 1px solid; POSITION: absolute; box-sizing: border-box; moz-box-sizing: border-box } .ygrid-editor INPUT { BORDER-TOP-WIDTH: 0px; PADDING-LEFT: 3px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; FONT: 8pt arial; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px } .ygrid-editor-container { DISPLAY: block; OVERFLOW: hidden; BACKGROUND-COLOR: white } .ygrid-editor .pick-button { DISPLAY: block; Z-INDEX: 2; RIGHT: 0px; BACKGROUND-IMAGE: url(../images/grid/pick-button.gif); WIDTH: 15px; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 0px; HEIGHT: 20px } .ygrid-editor-invalid { BORDER-RIGHT: #afbdc9 1px solid; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #afbdc9 1px solid; BACKGROUND-IMAGE: url(../images/grid/invalid_line.gif); BORDER-LEFT: #afbdc9 1px solid; BORDER-BOTTOM: #afbdc9 1px solid; BACKGROUND-REPEAT: repeat-x } .ygrid-checkbox-editor { DISPLAY: block; OVERFLOW: hidden; BACKGROUND-COLOR: white; TEXT-ALIGN: center } .ygrid-checkbox-editor INPUT { MARGIN-TOP: 3px; WIDTH: 13px; HEIGHT: 13px } SELECT.ygrid-editor { BORDER-RIGHT: #afbdc9 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #afbdc9 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; BORDER-LEFT: #afbdc9 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #afbdc9 1px solid; moz-outline: none } .ygrid-num-editor { PADDING-LEFT: 3px; PADDING-TOP: 2px; TEXT-ALIGN: right } .ygrid-text-editor { PADDING-LEFT: 3px; PADDING-TOP: 2px } .ygrid-hd { DISPLAY: block; OVERFLOW: hidden; BORDER-BOTTOM: #cbc7b8 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ebeadb; box-sizing: border-box; moz-box-sizing: border-box } .ygrid-column-sizer { BORDER-RIGHT: #6593cf 1px dashed; BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 1px; CURSOR: col-resize } .ygrid-drag-proxy { BORDER-RIGHT: #002266 1px solid; BORDER-TOP: #002266 1px solid; Z-INDEX: 10000; VISIBILITY: hidden; BORDER-LEFT: #002266 1px solid; WIDTH: 150px; BORDER-BOTTOM: #002266 1px solid; POSITION: absolute; HEIGHT: 24px; BACKGROUND-COLOR: #3366cc } .ygrid-drag-text { PADDING-RIGHT: 3px; DISPLAY: block; PADDING-LEFT: 3px; LEFT: 26px; PADDING-BOTTOM: 3px; FONT: 8pt arial; COLOR: white; PADDING-TOP: 3px; POSITION: absolute; TOP: 0px } .ygrid-drop-icon { BACKGROUND-POSITION: center 50%; DISPLAY: block; LEFT: 0px; WIDTH: 24px; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 0px; HEIGHT: 100% } .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-POSITION: right 50%; DISPLAY: none; BACKGROUND-IMAGE: url(../images/grid/sort_asc.gif); WIDTH: 16px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 14px } .ygrid-hd .sort-desc { BACKGROUND-POSITION: right 50%; DISPLAY: none; BACKGROUND-IMAGE: url(../images/grid/sort_desc.gif); WIDTH: 16px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 14px } .ygrid-hd-body { PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 5px; LEFT: 0px; PADDING-BOTTOM: 3px; FONT: 8pt arial; OVERFLOW: hidden; CURSOR: default; PADDING-TOP: 3px; BORDER-BOTTOM: #d6d2c2 2px solid; WHITE-SPACE: nowrap; POSITION: relative; TOP: 0px } .ygrid-hd-body SPAN { FONT: 8pt arial; WHITE-SPACE: nowrap } .ygrid-hd-over { BORDER-BOTTOM: #fcc247 2px solid } .ygrid-hd-over .ygrid-hd-body { BORDER-BOTTOM: #f9a900 1px solid; BACKGROUND-COLOR: #faf9f4 } .ygrid-hd-split { BACKGROUND-POSITION: center 50%; DISPLAY: block; FONT-SIZE: 1px; Z-INDEX: 3; BACKGROUND-IMAGE: url(../images/grid/grid-split.gif); OVERFLOW: hidden; WIDTH: 6px; CURSOR: e-resize; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 2px; HEIGHT: 16px } .ygrid-hrow { DISPLAY: block; Z-INDEX: 2; LEFT: 0px; OVERFLOW: hidden; WIDTH: 10000px; POSITION: relative; TOP: 0px; HEIGHT: 22px; BACKGROUND-COLOR: #ebeadb } .ygrid-hrow-frame { DISPLAY: block; Z-INDEX: 1; LEFT: 0px; WIDTH: 10000px; POSITION: absolute; TOP: 0px; HEIGHT: 22px } .ygrid-footer .ytoolbar { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 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 transparent scroll repeat 0% 0%; BORDER-BOTTOM-WIDTH: 0px } .ygrid-mso .ygrid-footer { BORDER-TOP: #6593cf 1px solid } .ygrid-mso .ygrid-footer .ygrid-fbutton { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ygrid-mso .ygrid-hd-body { BORDER-BOTTOM-WIDTH: 0px } .ygrid-mso .ygrid-hd-over { BORDER-BOTTOM-WIDTH: 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: #6593cf 1px solid; HEIGHT: 21px } .ygrid-mso .ygrid-row { COLOR: black; BORDER-BOTTOM: #ddecfe 1px solid } .ygrid-mso .ygrid-row-alt { BACKGROUND-COLOR: #f5f5f5 } .ygrid-mso .ygrid-row-selected { COLOR: black; BACKGROUND-COLOR: #b3c8e8! important } .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 { MARGIN-LEFT: 10px; BACKGROUND-COLOR: white } .yprops-grid .ygrid-prop-edting .ygrid-col-0 .ygrid-cell-text { COLOR: white; BACKGROUND-COLOR: #316ac5 } .yprops-grid .ygrid-prop-edting .ygrid-col-0 { COLOR: white } .yprops-grid .ygrid-num-editor { TEXT-ALIGN: left } .ygrid-row { DISPLAY: block; OVERFLOW: visible; WIDTH: 10000px; BORDER-BOTTOM: #f1efe2 1px solid; WHITE-SPACE: nowrap; POSITION: absolute; HEIGHT: 21px; box-sizing: border-box; moz-box-sizing: border-box } .ygrid-row-alt { BACKGROUND-COLOR: #fcfaf6 } .ygrid-row-over { COLOR: black; BACKGROUND-COLOR: #f1f1f1 } .ygrid-row-selected { COLOR: white; BACKGROUND-COLOR: #316ac5! important } .ygrid-row-selected SPAN { COLOR: white! important } .ygrid-vista { BORDER-RIGHT: #535353 1px solid; BORDER-TOP: #535353 1px solid; BORDER-LEFT: #535353 1px solid; BORDER-BOTTOM: #535353 1px solid } .ygrid-vista .ygrid-hd { BORDER-BOTTOM-WIDTH: 0px } .ygrid-vista .ygrid-hd-body { BORDER-BOTTOM: #b3bcc0 1px solid } .ygrid-vista .ygrid-hd-over { BORDER-BOTTOM-WIDTH: 0px } .ygrid-vista .ygrid-hd-over .ygrid-hd-body { BORDER-BOTTOM-WIDTH: 0px; BACKGROUND-COLOR: transparent } .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 { COLOR: white; BACKGROUND-COLOR: #535353! important } .ygrid-vista .ygrid-row-selected SPAN { COLOR: white! important } .ygrid-vista .ygrid-wrap-body { } .ygrid-wrap { LEFT: 0px; OVERFLOW: auto; WIDTH: 100%; POSITION: relative; TOP: 22px; HEIGHT: 100% } .ygrid-footer { PADDING-RIGHT: 0px; BORDER-TOP: #cbc7b8 1px solid; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px } .ygrid-wrap-footer { DISPLAY: block; OVERFLOW: hidden; WIDTH: 100%; BOTTOM: 0px; POSITION: absolute; HEIGHT: 25px; BACKGROUND-COLOR: #ebeadb; box-sizing: border-box; moz-box-sizing: border-box } .ygrid-wrap-body { DISPLAY: block; LEFT: 0px; OVERFLOW: hidden; POSITION: absolute; TOP: 0px } .ygrid-wrap-headers { Z-INDEX: 12; LEFT: 0px; OVERFLOW: hidden; POSITION: absolute; TOP: 0px } .ygrid-col-0 { } .ygrid-col-1 { LEFT: 120px; WIDTH: 120px } .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 { LEFT: 240px; WIDTH: 105px } .ygrid-col-20 { } .ygrid-col-3 { LEFT: 345px; WIDTH: 100px } .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 { } #grid-example { BORDER-RIGHT: #cbc7b8 1px solid; BORDER-TOP: #cbc7b8 1px solid; LEFT: 0px; BORDER-LEFT: #cbc7b8 1px solid; BORDER-BOTTOM: #cbc7b8 1px solid; POSITION: relative; TOP: 0px } #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 } .ygrid-mso#grid-example { BORDER-RIGHT: #6593cf 1px solid; BORDER-TOP: #6593cf 1px solid; BORDER-LEFT: #6593cf 1px solid; BORDER-BOTTOM: #6593cf 1px solid } .ygrid-vista#grid-example { BORDER-RIGHT: #b3bcc0 1px solid; BORDER-TOP: #b3bcc0 1px solid; BORDER-LEFT: #b3bcc0 1px solid; BORDER-BOTTOM: #b3bcc0 1px solid } #xml-grid-example { BORDER-RIGHT: #cbc7b8 1px solid; BORDER-TOP: #cbc7b8 1px solid; LEFT: 0px; BORDER-LEFT: #cbc7b8 1px solid; BORDER-BOTTOM: #cbc7b8 1px solid; POSITION: relative; TOP: 0px } #xml-grid-example .ygrid-col-0 { } #xml-grid-example .ygrid-col-1 { } #xml-grid-example .ygrid-col-2 { } #xml-grid-example .ygrid-col-3 { } .ygrid-mso#xml-grid-example { BORDER-RIGHT: #6593cf 1px solid; BORDER-TOP: #6593cf 1px solid; BORDER-LEFT: #6593cf 1px solid; BORDER-BOTTOM: #6593cf 1px solid } .ygrid-vista#xml-grid-example { BORDER-RIGHT: #b3bcc0 1px solid; BORDER-TOP: #b3bcc0 1px solid; BORDER-LEFT: #b3bcc0 1px solid; BORDER-BOTTOM: #b3bcc0 1px solid } #editor-grid .ygrid-col-2 { TEXT-ALIGN: right } .ypopcal { BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 2px; BACKGROUND: white; PADDING-BOTTOM: 2px; BORDER-LEFT: gray 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: gray 1px solid } .ypopcal-shadow { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dddddd; FILTER: progid:DXImageTransform.Microsoft.Blur(MakeShadow=true,pixelradius=1) Alpha(opacity=35,style=1,startX=0,finishX=200,FinishOpacity=35); PADDING-BOTTOM: 0px; PADDING-TOP: 0px; POSITION: absolute } .ypopcal-head { BACKGROUND: #93b5e4; WIDTH: 150px } .ypopcal-head TD { PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px } .ypopcal-month { FONT: bold 7pt verdana; COLOR: white; TEXT-ALIGN: center; TEXT-DECORATION: none } .ypopcal-head .ypopcal-arrow { WIDTH: 16px; CURSOR: pointer; TEXT-ALIGN: center; moz-user-select: none } .ypopcal-head .next-month { BACKGROUND-POSITION: center 50%; BACKGROUND-IMAGE: url(../images/grid/arrow-right-white.gif); WIDTH: 16px; CURSOR: pointer; BACKGROUND-REPEAT: no-repeat } .ypopcal-head .prev-month { BACKGROUND-POSITION: center 50%; BACKGROUND-IMAGE: url(../images/grid/arrow-left-white.gif); WIDTH: 16px; CURSOR: pointer; BACKGROUND-REPEAT: no-repeat } .ypopcal-table { BACKGROUND: white; BORDER-BOTTOM: #cccccc 1px solid } .ypopcal-table TR { } .ypopcal-table TD { BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: white 1px solid; PADDING-LEFT: 2px; BACKGROUND: white; PADDING-BOTTOM: 1px; FONT: 8pt arial; BORDER-LEFT: white 1px solid; WIDTH: 12px; CURSOR: pointer; COLOR: #aaaaaa; PADDING-TOP: 1px; BORDER-BOTTOM: white 1px solid; HEIGHT: 12px; TEXT-ALIGN: right; box-sizing: border-box; moz-box-sizing: border-box } .ypopcal-table TD.today { BORDER-RIGHT: darkred 1px solid; BORDER-TOP: darkred 1px solid; BORDER-LEFT: darkred 1px solid; BORDER-BOTTOM: darkred 1px solid } .ypopcal-table .ypopcal-daynames TD { BORDER-TOP-WIDTH: 0px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 8pt; CURSOR: default; COLOR: black; BORDER-BOTTOM: #cccccc 1px solid; TEXT-ALIGN: right; BORDER-RIGHT-WIDTH: 0px } .ypopcal-table TD.active { CURSOR: pointer; COLOR: black } .ypopcal-table TD.ypopcal-disabled { BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #eeeeee 1px solid; BACKGROUND: #eeeeee; BORDER-LEFT: #eeeeee 1px solid; CURSOR: default; COLOR: #bbbbbb; BORDER-BOTTOM: #eeeeee 1px solid } .ypopcal-table TD.selected { BORDER-RIGHT: #c3daf9 1px solid; BORDER-TOP: #c3daf9 1px solid; BACKGROUND: #ddecfe; BORDER-LEFT: #c3daf9 1px solid; BORDER-BOTTOM: #c3daf9 1px solid } .ypopcal-today { MARGIN-TOP: 0px; DISPLAY: inline-block; FONT: 8pt arial; MARGIN-LEFT: 2px; CURSOR: hand; COLOR: black; TEXT-DECORATION: none } .ygrid-simple-view .ygrid-col { DISPLAY: inline-block; POSITION: static; HEIGHT: 100%! important } .ygrid-simple-view .ygrid-row { POSITION: static } .yresizable-handle { FONT-SIZE: 1px; Z-INDEX: 100; BACKGROUND: white; FILTER: alpha(opacity=0); OVERFLOW: hidden; LINE-HEIGHT: 1px; POSITION: absolute; opacity: 0 } .yresizable-handle-east { RIGHT: 0px; WIDTH: 5px; CURSOR: e-resize; TOP: 0px; HEIGHT: 100% } .yresizable-handle-south { LEFT: 0px; WIDTH: 100%; CURSOR: s-resize; BOTTOM: 0px; HEIGHT: 5px } .yresizable-handle-west { LEFT: 0px; WIDTH: 5px; CURSOR: w-resize; TOP: 0px; HEIGHT: 100% } .yresizable-handle-north { LEFT: 0px; WIDTH: 100%; CURSOR: n-resize; TOP: 0px; HEIGHT: 5px } .yresizable-handle-southeast { Z-INDEX: 101; RIGHT: 0px; WIDTH: 6px; CURSOR: se-resize; BOTTOM: 0px; HEIGHT: 6px } .yresizable-over .yresizable-handle { FILTER: alpha(opacity=100); opacity: 1 } .yresizable-pinned .yresizable-handle { FILTER: alpha(opacity=100); opacity: 1 } .yresizable-over .yresizable-handle-east { BACKGROUND: url(../images/sizer/e-handle.gif) left 50%; BORDER-LEFT: #98c0f4 1px solid } .yresizable-pinned .yresizable-handle-east { BACKGROUND: url(../images/sizer/e-handle.gif) left 50%; BORDER-LEFT: #98c0f4 1px solid } .yresizable-over .yresizable-handle-east { BORDER-RIGHT: #98c0f4 1px solid; BACKGROUND: url(../images/sizer/e-handle.gif) left 50% } .yresizable-pinned .yresizable-handle-west { BORDER-RIGHT: #98c0f4 1px solid; BACKGROUND: url(../images/sizer/e-handle.gif) left 50% } .yresizable-over .yresizable-handle-south { BORDER-TOP: #98c0f4 1px solid; BACKGROUND: url(../images/sizer/s-handle.gif) 50% top } .yresizable-pinned .yresizable-handle-south { BORDER-TOP: #98c0f4 1px solid; BACKGROUND: url(../images/sizer/s-handle.gif) 50% top } .yresizable-over .yresizable-handle-south { BACKGROUND: url(../images/sizer/s-handle.gif) 50% top; BORDER-BOTTOM: #98c0f4 1px solid } .yresizable-pinned .yresizable-handle-north { BACKGROUND: url(../images/sizer/s-handle.gif) 50% top; BORDER-BOTTOM: #98c0f4 1px solid } .yresizable-over .yresizable-handle-southeast { BACKGROUND: url(../images/sizer/se-handle.gif) } .yresizable-pinned .yresizable-handle-southeast { BACKGROUND: url(../images/sizer/se-handle.gif) } .yresizable-proxy { BORDER-RIGHT: #6593cf 1px dashed; BORDER-TOP: #6593cf 1px dashed; Z-INDEX: 1001; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-LEFT: #6593cf 1px dashed; BORDER-BOTTOM: #6593cf 1px dashed; POSITION: absolute } .ytheme-gray .yresizable-over .yresizable-handle-east { BACKGROUND: url(../images/sizer/gray/e-handle.gif) left 50%; BORDER-LEFT: #615e55 1px solid } .ytheme-gray .yresizable-pinned .yresizable-handle-east { BACKGROUND: url(../images/sizer/gray/e-handle.gif) left 50%; BORDER-LEFT: #615e55 1px solid } .ytheme-gray .yresizable-over .yresizable-handle-east { BORDER-RIGHT: #615e55 1px solid; BACKGROUND: url(../images/sizer/gray/e-handle.gif) left 50% } .ytheme-gray .yresizable-pinned .yresizable-handle-west { BORDER-RIGHT: #615e55 1px solid; BACKGROUND: url(../images/sizer/gray/e-handle.gif) left 50% } .ytheme-gray .yresizable-over .yresizable-handle-south { BORDER-TOP: #615e55 1px solid; BACKGROUND: url(../images/sizer/gray/s-handle.gif) 50% top } .ytheme-gray .yresizable-pinned .yresizable-handle-south { BORDER-TOP: #615e55 1px solid; BACKGROUND: url(../images/sizer/gray/s-handle.gif) 50% top } .ytheme-gray .yresizable-over .yresizable-handle-south { BACKGROUND: url(../images/sizer/gray/s-handle.gif) 50% top; BORDER-BOTTOM: #615e55 1px solid } .ytheme-gray .yresizable-pinned .yresizable-handle-north { BACKGROUND: url(../images/sizer/gray/s-handle.gif) 50% top; BORDER-BOTTOM: #615e55 1px solid } .ytheme-gray .yresizable-over .yresizable-handle-southeast { BACKGROUND: url(../images/sizer/gray/se-handle.gif) } .ytheme-gray .yresizable-pinned .yresizable-handle-southeast { BACKGROUND: url(../images/sizer/gray/se-handle.gif) } .ytheme-gray .yresizable-proxy { BORDER-RIGHT: #615e55 1px dashed; BORDER-TOP: #615e55 1px dashed; BORDER-LEFT: #615e55 1px dashed; BORDER-BOTTOM: #615e55 1px dashed } .ytoolbar { BORDER-RIGHT: #cbc7b8 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #cbc7b8 1px solid; DISPLAY: block; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cbc7b8 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #cbc7b8 1px solid; BACKGROUND-COLOR: #ebeadb } .mso .ytoolbar { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(../images/grid/mso-hd.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ygrid-mso .ytoolbar { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND: url(../images/grid/mso-hd.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ytoolbar TD { FONT: 8pt arial,helvetica } .ytoolbar SPAN { FONT: 8pt arial,helvetica } .ytoolbar INPUT { FONT: 8pt arial,helvetica } .ytoolbar DIV { FONT: 8pt arial,helvetica } .ytoolbar .ytb-button-disabled .ytb-button-inner { CURSOR: default; COLOR: gray } .ytoolbar .ytb-button-inner { BACKGROUND-POSITION: center 50%; DISPLAY: block; WIDTH: 16px; CURSOR: pointer; BACKGROUND-REPEAT: no-repeat; WHITE-SPACE: nowrap; HEIGHT: 16px } .ytoolbar .ytb-text { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px } .ytoolbar .ytb-button { PADDING-RIGHT: 2px; DISPLAY: block; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px } .ytoolbar .ytb-button-over { BORDER-RIGHT: #316ac5 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #316ac5 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #316ac5 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #316ac5 1px solid; BACKGROUND-COLOR: #c3d3ed } .ytoolbar .ytb-sep { BORDER-TOP-WIDTH: 0px; BACKGROUND-POSITION: center 50%; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 1px; BACKGROUND-IMAGE: url(../images/grid/grid-split.gif); BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px 2px; OVERFLOW: hidden; WIDTH: 4px; CURSOR: default; BACKGROUND-REPEAT: no-repeat; HEIGHT: 16px; BORDER-RIGHT-WIDTH: 0px } .mso .ytoolbar .ytb-sep { BACKGROUND-IMAGE: url(../images/grid/grid-blue-split.gif) } .ygrid-mso .ytoolbar .ytb-sep { BACKGROUND-IMAGE: url(../images/grid/grid-blue-split.gif) } .ytab-wrap { PADDING-TOP: 2px; BORDER-BOTTOM: #6593cf 1px solid } .ytab-wrap TABLE { LEFT: 0px; POSITION: relative; TOP: 0px } .ytab-strip TD { PADDING-LEFT: 2px } .ytab-strip A { DISPLAY: block } .ytab-strip SPAN { DISPLAY: block } .ytab-strip EM { DISPLAY: block } .ytab-strip A { CURSOR: pointer; TEXT-DECORATION: none! important; outline: none; moz-outline: none } .ytab-strip .ytab-text { FONT: bold 11px tahoma,arial,helvetica; OVERFLOW: hidden; CURSOR: pointer; COLOR: #666; WHITE-SPACE: nowrap; 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-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px } .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 { LEFT: 0px; POSITION: relative; TOP: 1px } .ytab-strip .on A { } .ytab-strip .on .ytab-inner { PADDING-BOTTOM: 5px } .ytab-strip .ytab-closable .ytab-inner { PADDING-RIGHT: 22px; POSITION: relative } .ytab-strip .ytab-closable .close-icon { DISPLAY: block; FONT-SIZE: 1px; RIGHT: 5px; BACKGROUND-IMAGE: url(../images/layout/tab-close.gif); WIDTH: 11px; CURSOR: pointer; LINE-HEIGHT: 1px; POSITION: absolute; TOP: 4px; HEIGHT: 11px } .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: #6593cf 1px solid; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; PADDING-TOP: 0px } .ytabs-bottom .ytab-strip .ytab-right { BACKGROUND: url(../images/tabs/tab-btm-inactive-right-bg.gif) no-repeat left bottom } .ytabs-bottom .ytab-strip .ytab-left { BACKGROUND: url(../images/tabs/tab-btm-inactive-left-bg.gif) no-repeat right bottom } .ytabs-bottom .ytab-strip .on .ytab-right { BACKGROUND: url(../images/tabs/tab-btm-right-bg.gif) no-repeat left bottom } .ytabs-bottom .ytab-strip .on .ytab-left { BACKGROUND: url(../images/tabs/tab-btm-left-bg.gif) no-repeat right bottom } .ytabs-bottom .ytab-strip A { LEFT: 0px; POSITION: relative; TOP: 0px } .ytabs-bottom .ytab-strip .on A { MARGIN-TOP: -1px } .ytabs-bottom .ytab-strip .on .ytab-inner { PADDING-TOP: 5px } .ytheme-gray .ytab-wrap { BORDER-BOTTOM: #aca899 1px solid } .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-TOP: #aca899 1px solid; BORDER-BOTTOM-WIDTH: 0px; PADDING-TOP: 0px } .ytheme-gray .ytabs-bottom .ytab-strip .ytab-right { BACKGROUND: url(../images/tabs/gray/tab-btm-inactive-right-bg.gif) no-repeat left bottom } .ytheme-gray .ytabs-bottom .ytab-strip .ytab-left { BACKGROUND: url(../images/tabs/gray/tab-btm-inactive-left-bg.gif) no-repeat right bottom } .ytheme-gray .ytabs-bottom .ytab-strip .on .ytab-right { BACKGROUND: url(../images/tabs/gray/tab-btm-right-bg.gif) no-repeat left bottom } .ytheme-gray .ytabs-bottom .ytab-strip .on .ytab-left { BACKGROUND: url(../images/tabs/gray/tab-btm-left-bg.gif) no-repeat right bottom } .ydlg-proxy { BORDER-RIGHT: #6593cf 1px solid; BORDER-TOP: #6593cf 1px solid; Z-INDEX: 10001; LEFT: 0px; BACKGROUND-IMAGE: url(../images/gradient-bg.gif); OVERFLOW: hidden; BORDER-LEFT: #6593cf 1px solid; BORDER-BOTTOM: #6593cf 1px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #c3daf9 } .ydlg-shadow { DISPLAY: none; BACKGROUND: #aaaaaa; POSITION: absolute } .ydlg-mask { DISPLAY: none; Z-INDEX: 10000; FILTER: alpha(opacity=50); LEFT: 0px; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ccc; opacity: .50; moz-opacity: 0.5 } BODY.masked { OVERFLOW: hidden } BODY.masked SELECT { VISIBILITY: hidden } BODY.masked .ydlg SELECT { VISIBILITY: visible } .ydlg { Z-INDEX: 10001; OVERFLOW: hidden; POSITION: absolute; TOP: 0px } .yresizable-proxy { Z-INDEX: 10002 } .ydlg .ydlg-hd { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: url(../images/basic-dialog/hd-sprite.gif) navy repeat-x 0px -82px; PADDING-BOTTOM: 5px; FONT: bold 12px "sans serif", tahoma, verdana, helvetica; OVERFLOW: hidden; COLOR: #fff; PADDING-TOP: 5px } .ydlg .ydlg-hd-left { PADDING-LEFT: 3px; BACKGROUND: url(../images/basic-dialog/hd-sprite.gif) no-repeat 0px -41px; MARGIN: 0px } .ydlg .ydlg-hd-right { PADDING-RIGHT: 3px; BACKGROUND: url(../images/basic-dialog/hd-sprite.gif) no-repeat right 0px } .ydlg .ydlg-dlg-body { BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #6593cf 1px solid; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(../images/layout/gradient-bg.gif); PADDING-BOTTOM: 10px; BORDER-LEFT: #6593cf 1px solid; BORDER-TOP-COLOR: #6593cf; PADDING-TOP: 10px; BORDER-BOTTOM: #6593cf 1px solid } .ydlg .ydlg-bd { OVERFLOW: hidden } .ydlg .ydlg-ft { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 5px } .ydlg .yui-ext-tabbody { BACKGROUND: white; OVERFLOW: auto } .ydlg .ytabs-top .yui-ext-tabbody { BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #6593cf 1px solid; BORDER-LEFT: #6593cf 1px solid; BORDER-TOP-COLOR: #6593cf; BORDER-BOTTOM: #6593cf 1px solid } .ydlg .ytabs-bottom .yui-ext-tabbody { BORDER-RIGHT: #6593cf 1px solid; BORDER-TOP: #6593cf 1px solid; BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: #6593cf; BORDER-LEFT: #6593cf 1px solid } .ydlg .ylayout-container .yui-ext-tabbody { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ydlg .inner-tab { MARGIN: 5px } .ydlg .ydlg-button { CLEAR: none; FLOAT: right; FONT: 11px arial, tahoma, verdana, helvetica; CURSOR: pointer; MARGIN-RIGHT: 5px } .ydlg-button-left { FONT-SIZE: 1px; LINE-HEIGHT: 1px } .ydlg-button-right { FONT-SIZE: 1px; LINE-HEIGHT: 1px } .ydlg-button-left { BACKGROUND: url(../images/basic-dialog/btn-sprite.gif) no-repeat 0px 0px; WIDTH: 3px; HEIGHT: 21px } .ydlg-button-right { BACKGROUND: url(../images/basic-dialog/btn-sprite.gif) no-repeat 0px -21px; WIDTH: 3px; HEIGHT: 21px } .ydlg-button-focus { TEXT-DECORATION: none! important } .ydlg-button-center { PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: url(../images/basic-dialog/btn-sprite.gif) repeat-x 0px -42px; PADDING-BOTTOM: 0px; FONT: 11px "san serif",tahoma,verdana,helvetica; VERTICAL-ALIGN: middle; CURSOR: pointer; PADDING-TOP: 0px; WHITE-SPACE: nowrap; TEXT-ALIGN: center; 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 { CURSOR: default; COLOR: gray } .ydlg-draggable .ydlg-hd { CURSOR: move } .ydlg-closable .ydlg-hd { PADDING-RIGHT: 22px } .ydlg .ydlg-close { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1px; Z-INDEX: 6; RIGHT: 4px; BACKGROUND-IMAGE: url(../images/basic-dialog/close.gif); VISIBILITY: inherit; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 15px; CURSOR: pointer; LINE-HEIGHT: 1px; PADDING-TOP: 0px; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 4px; HEIGHT: 15px } .ydlg DIV.yresizable-handle-east { BORDER-TOP-WIDTH: 0px; BACKGROUND-POSITION: right 50%; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/basic-dialog/e-handle.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ydlg DIV.yresizable-handle-south { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/sizer/s-handle-dark.gif); BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 6px; BORDER-RIGHT-WIDTH: 0px } .ydlg DIV.yresizable-handle-west { BORDER-TOP-WIDTH: 0px; BACKGROUND-POSITION: 1px 50%; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/basic-dialog/e-handle.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ydlg DIV.yresizable-handle-north { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/s.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ydlg DIV.yresizable-handle-southeast { BORDER-TOP-WIDTH: 0px; BACKGROUND-POSITION: right bottom; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/basic-dialog/se-handle.gif); BORDER-BOTTOM-WIDTH: 0px; WIDTH: 8px; HEIGHT: 8px; BORDER-RIGHT-WIDTH: 0px } .ytheme-gray .ydlg-proxy { BORDER-RIGHT: #b3b6b0 1px solid; BORDER-TOP: #b3b6b0 1px solid; BACKGROUND-IMAGE: url(../images/layout/gray/gradient-bg.gif); BORDER-LEFT: #b3b6b0 1px solid; BORDER-BOTTOM: #b3b6b0 1px solid; BACKGROUND-COLOR: #eae8d5 } .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) #333333 repeat-x 0px -82px } .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 { BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #b3b6b0 1px solid; BACKGROUND: #efefec; BORDER-LEFT: #b3b6b0 1px solid; BORDER-TOP-COLOR: #b3b6b0; BORDER-BOTTOM: #b3b6b0 1px solid } .ytheme-gray .ydlg .ytabs-top .yui-ext-tabbody { BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #b3b6b0 1px solid; BORDER-LEFT: #b3b6b0 1px solid; BORDER-TOP-COLOR: #b3b6b0; BORDER-BOTTOM: #b3b6b0 1px solid } .ytheme-gray .ydlg .ytabs-bottom .yui-ext-tabbody { BORDER-RIGHT: #b3b6b0 1px solid; BORDER-TOP: #b3b6b0 1px solid; BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: #b3b6b0; BORDER-LEFT: #b3b6b0 1px solid } .ytheme-gray .ydlg .ylayout-container .yui-ext-tabbody { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ytheme-gray .ydlg .ydlg-close { BACKGROUND-IMAGE: url(../images/basic-dialog/gray/close.gif) } .ytheme-gray .ydlg DIV.yresizable-handle-east { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/basic-dialog/gray/e-handle.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ytheme-gray .ydlg DIV.yresizable-handle-south { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/basic-dialog/gray/s-handle.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ytheme-gray .ydlg DIV.yresizable-handle-west { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/basic-dialog/gray/e-handle.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ytheme-gray .ydlg DIV.yresizable-handle-southeast { BORDER-TOP-WIDTH: 0px; BACKGROUND-POSITION: right bottom; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/basic-dialog/gray/se-handle.gif); BORDER-BOTTOM-WIDTH: 0px; WIDTH: 8px; HEIGHT: 8px; BORDER-RIGHT-WIDTH: 0px } .ytheme-gray .ydlg DIV.yresizable-handle-north { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BACKGROUND-IMAGE: url(../images/s.gif); BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ylayout-container { OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 100%; BACKGROUND-COLOR: #c3daf9 } .ylayout-collapsed { BORDER-RIGHT: #98c0f4 1px solid; BORDER-TOP: #98c0f4 1px solid; Z-INDEX: 20; LEFT: -10000px; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-LEFT: #98c0f4 1px solid; WIDTH: 20px; BORDER-BOTTOM: #98c0f4 1px solid; POSITION: absolute; TOP: -10000px; HEIGHT: 20px; BACKGROUND-COLOR: #c3daf9 } .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 { TEXT-ALIGN: right } .ylayout-collapsed-south { TEXT-ALIGN: right } .ylayout-collapsed .ylayout-tools-button { MARGIN: 2px; WIDTH: 12px; TEXT-ALIGN: center } .ylayout-inactive-content { LEFT: -10000px; VISIBILITY: hidden; POSITION: absolute; TOP: -10000px } .ylayout-active-content { VISIBILITY: visible } .ylayout-panel { BORDER-RIGHT: #98c0f4 1px solid; BORDER-TOP: #98c0f4 1px solid; OVERFLOW: hidden; BORDER-LEFT: #98c0f4 1px solid; BORDER-BOTTOM: #98c0f4 1px solid; POSITION: absolute; BACKGROUND-COLOR: white } .ylayout-panel-east { Z-INDEX: 10 } .ylayout-panel-west { Z-INDEX: 10 } .ylayout-panel-north { Z-INDEX: 11 } .ylayout-panel-south { Z-INDEX: 11 } .ylayout-collapsed-north { Z-INDEX: 12 } .ylayout-collapsed-south { Z-INDEX: 12 } .ylayout-collapsed-east { Z-INDEX: 12 } .ylayout-collapsed-west { Z-INDEX: 12 } .ylayout-panel { BORDER-RIGHT: #98c0f4 1px solid; BORDER-TOP: #98c0f4 1px solid; OVERFLOW: hidden; BORDER-LEFT: #98c0f4 1px solid; BORDER-BOTTOM: #98c0f4 1px solid; POSITION: absolute; BACKGROUND-COLOR: white } .ylayout-panel-body { OVERFLOW: hidden } .ylayout-grid-wrapper { } .ylayout-split { FONT-SIZE: 1px; Z-INDEX: 3; WIDTH: 5px; LINE-HEIGHT: 1px; POSITION: absolute; HEIGHT: 5px; BACKGROUND-COLOR: #c3daf9 } .ylayout-panel-hd { BACKGROUND-IMAGE: url(../images/layout/panel-title-light-bg.gif); COLOR: black; BORDER-BOTTOM: #98c0f4 1px solid; POSITION: relative } .ylayout-panel-hd-text { PADDING-RIGHT: 4px; DISPLAY: block; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; FONT: 11px tahoma, verdana, helvetica; PADDING-TOP: 4px } .ylayout-panel-hd-tools { PADDING-RIGHT: 2px; RIGHT: 0px; WIDTH: 40px; PADDING-TOP: 2px; POSITION: absolute; TOP: 0px; TEXT-ALIGN: right } .ylayout-tools-button { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; Z-INDEX: 6; FLOAT: right; PADDING-BOTTOM: 2px; CURSOR: pointer; PADDING-TOP: 2px } .ylayout-tools-button-over { BORDER-RIGHT: #98c0f4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #98c0f4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #98c0f4 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #98c0f4 1px solid; BACKGROUND-COLOR: white } .ylayout-tools-button-inner { BACKGROUND-POSITION: center 50%; FONT-SIZE: 1px; WIDTH: 12px; LINE-HEIGHT: 1px; BACKGROUND-REPEAT: no-repeat; HEIGHT: 12px } .ylayout-close { BACKGROUND-IMAGE: url(../images/layout/panel-close.gif) } .ylayout-collapse-west { BACKGROUND-IMAGE: url(../images/layout/collapse.gif) } .ylayout-expand-east { BACKGROUND-IMAGE: url(../images/layout/collapse.gif) } .ylayout-expand-west { BACKGROUND-IMAGE: url(../images/layout/expand.gif) } .ylayout-collapse-east { BACKGROUND-IMAGE: url(../images/layout/expand.gif) } .ylayout-collapse-north { BACKGROUND-IMAGE: url(../images/layout/ns-collapse.gif) } .ylayout-expand-south { BACKGROUND-IMAGE: url(../images/layout/ns-collapse.gif) } .ylayout-expand-north { BACKGROUND-IMAGE: url(../images/layout/ns-expand.gif) } .ylayout-collapse-south { BACKGROUND-IMAGE: url(../images/layout/ns-expand.gif) } .ylayout-split-h { BACKGROUND-POSITION: left 50%; BACKGROUND-IMAGE: url(../images/sizer/e-handle.gif) } .ylayout-split-v { BACKGROUND-POSITION: 50% top; BACKGROUND-IMAGE: url(../images/sizer/s-handle.gif) } .ylayout-panel .ytab-wrap { BACKGROUND: url(../images/layout/gradient-bg.gif) } .ylayout-panel .yui-ext-tabbody { OVERFLOW: auto; HEIGHT: 100%; BACKGROUND-COLOR: white } .ylayout-component-panel { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; WIDTH: 200px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 200px } .ylayout-nested-layout { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; WIDTH: 200px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 200px } .ylayout-nested-layout .ylayout-panel { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .ylayout-nested-layout .ylayout-panel-north { BORDER-BOTTOM: #98c0f4 1px solid } .ylayout-nested-layout .ylayout-panel-south { BORDER-TOP: #98c0f4 1px solid } .ylayout-nested-layout .ylayout-panel-east { BORDER-LEFT: #98c0f4 1px solid } .ylayout-nested-layout .ylayout-panel-west { BORDER-RIGHT: #98c0f4 1px solid } .yui-ext-repaint { ZOOM: 1; BACKGROUND-COLOR: transparent } .ylayout-panel-dragover { BORDER-RIGHT: #6593cf 2px solid; BORDER-TOP: #6593cf 2px solid; BORDER-LEFT: #6593cf 2px solid; BORDER-BOTTOM: #6593cf 2px solid } .ylayout-panel-proxy { BORDER-RIGHT: #6593cf 1px dashed; BORDER-TOP: #6593cf 1px dashed; Z-INDEX: 10001; LEFT: 0px; BACKGROUND-IMAGE: url(../images/layout/gradient-bg.gif); OVERFLOW: hidden; BORDER-LEFT: #6593cf 1px dashed; BORDER-BOTTOM: #6593cf 1px dashed; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #c3daf9 } .ylayout-slider { Z-INDEX: 15; OVERFLOW: hidden; POSITION: absolute } .ytheme-gray { BACKGROUND-COLOR: #f3f2e7 } DIV.ytheme-gray { BACKGROUND-COLOR: #f3f2e7 } .ytheme-gray .ylayout-container { BACKGROUND-COLOR: #f3f2e7 } .ytheme-gray { BACKGROUND-COLOR: #f3f2e7 } .ytheme-gray .ylayout-collapsed { BORDER-RIGHT: #aca899 1px solid; BORDER-TOP: #aca899 1px solid; BORDER-LEFT: #aca899 1px solid; BORDER-BOTTOM: #aca899 1px solid; BACKGROUND-COLOR: #f3f2e7 } .ytheme-gray .ylayout-collapsed-over { BACKGROUND-COLOR: #fbfbef } .ytheme-gray .ylayout-panel { BORDER-RIGHT: #aca899 1px solid; BORDER-TOP: #aca899 1px solid; BORDER-LEFT: #aca899 1px solid; BORDER-BOTTOM: #aca899 1px solid } .ytheme-gray .ylayout-nested-layout .ylayout-panel { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px } .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: #aca899 1px solid } .ytheme-gray .ylayout-tools-button-over { BORDER-RIGHT: #aca899 1px solid; BORDER-TOP: #aca899 1px solid; BORDER-LEFT: #aca899 1px solid; BORDER-BOTTOM: #aca899 1px solid } .ytheme-gray .ylayout-close { BACKGROUND-IMAGE: url(../images/layout/gray/panel-close.gif) } .ytheme-gray .ylayout-collapse-west { BACKGROUND-IMAGE: url(../images/layout/gray/collapse.gif) } .ytheme-gray .ylayout-expand-east { BACKGROUND-IMAGE: url(../images/layout/gray/collapse.gif) } .ytheme-gray .ylayout-expand-west { BACKGROUND-IMAGE: url(../images/layout/gray/expand.gif) } .ytheme-gray .ylayout-collapse-east { BACKGROUND-IMAGE: url(../images/layout/gray/expand.gif) } .ytheme-gray .ylayout-collapse-north { BACKGROUND-IMAGE: url(../images/layout/gray/ns-collapse.gif) } .ytheme-gray .ylayout-expand-south { BACKGROUND-IMAGE: url(../images/layout/gray/ns-collapse.gif) } .ytheme-gray .ylayout-expand-north { BACKGROUND-IMAGE: url(../images/layout/gray/ns-expand.gif) } .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: #aca899 1px solid } .ytheme-gray .ylayout-nested-layout .ylayout-panel-south { BORDER-TOP: #aca899 1px solid } .ytheme-gray .ylayout-nested-layout .ylayout-panel-east { BORDER-LEFT: #aca899 1px solid } .ytheme-gray .ylayout-nested-layout .ylayout-panel-west { BORDER-RIGHT: #aca899 1px solid } .ytheme-gray .ylayout-panel-dragover { BORDER-RIGHT: #aca899 2px solid; BORDER-TOP: #aca899 2px solid; BORDER-LEFT: #aca899 2px solid; BORDER-BOTTOM: #aca899 2px solid } .ytheme-gray .ylayout-panel-proxy { BORDER-RIGHT: #aca899 1px dashed; BORDER-TOP: #aca899 1px dashed; BACKGROUND-IMAGE: url(../images/layout/gray/gradient-bg.gif); BORDER-LEFT: #aca899 1px dashed; BORDER-BOTTOM: #aca899 1px dashed; BACKGROUND-COLOR: #f3f2e7 } Sidney SheldonMaster of the GameWarner BooksBookSidney SheldonAre You Afraid of the Dark?Warner BooksBookSidney SheldonIf Tomorrow ComesWarner BooksBookSidney SheldonTell Me Your DreamsWarner VisionBookSidney SheldonBloodlineWarner BooksBookSidney SheldonThe Other Side of MeWarner BooksBookSidney SheldonA Stranger in the MirrorWarner BooksBookSidney SheldonThe Sky Is FallingWilliam Morrow & CompanyBookSidney SheldonNothing Lasts ForeverWarner BooksBookSidney SheldonThe Naked FaceWarner BooksBook

Author

Title

Manufacturer

Product Group

DataModel包含的类如下：

AbstractDataModel 提供事件event infrastructure等义接口interface '-DefaultDataModel 定义了操控数据的API '-LoadableDataModel AJAX服务的基类 '-XMLDataModel 包含以上的功能和提供XML的数据调用

看上去，这分得很详细，详细到好像过于复杂。但是在我看来，对于提升代码的可再用和扩展性，建立一个结实的DataModel是尤其重要的部分。正是基于这种方法，DataModel便能为其它的组件可再用，而不需要太多的组件--尽管它是庞大的。

如果你打开Js文件观察的话，将会发现只需几行代码便可设置XMLDataModel:

var schema = {
  tagName: 'Item',
  id: 'ASIN',
  fields: ['Author', 'Title', 'Manufacturer', 'ProductGroup']
};
this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);

实际加载的数据：

// 参数可以是url encoed或对象类型
var params = {'author': author};
//回调函数清除loading
this.dataModel.load('/blog/examples/amazon.php', params, this.clearIndicator);

表头能够对gird排序。现在进行新一番的搜索，例如输入John,数据加载后仍然按照你指定的方式排序。这是新的功能。

在一个实际项目中，我们需要一个能提供回调参数的，方便的异常处理机制。LoadableDataModel就就包含这种事件（onLoadException）。

总的来说，一切进展顺利。有些Part1的反馈告诉，Gird在Safari和其它浏览器上能够工作^^。说真的,有些反馈真的不错！ thanks!

part yui

1024 个赞