Click here to Skip to main content
15,892,674 members
Search within:


Articles / Web Development / CSS
 

15 Steps to Develop a Product Management System in Only a Day

Rate me:
Please Sign up or sign in to vote.
4.83/5 (51 votes)
23 Mar 2010GPL34 min read 248.2K   4.8K   163  
The article introduces how to easily develop business solutions in RapidWebDev through developing a product management system with the special requirement step by step.
 
/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
.ux-layout-center-item {
    margin:0 auto;
    text-align:left;
}
.ux-layout-center .x-panel-body,   
body.ux-layout-center {            
    text-align:center;
}
td.ux-grid-hd-group-cell {
    background: url(../../../resources/images/default/grid/grid3-hrow.gif) repeat-x bottom;
}.x-column-tree .x-panel-header {
	padding: 3px 0px 0px 0px;
	border-bottom-width: 0px;
}

.x-column-tree .x-panel-header .x-panel-header-text {
	margin-left: 3px
}

.x-column-tree .x-tree-node {
    zoom:1;
}
.x-column-tree .x-tree-node-el {
    /*border-bottom:1px solid #eee; borders? */
    zoom:1;
}
.x-column-tree .x-tree-selected {
    background: #d9e8fb;
}
.x-column-tree  .x-tree-node a {
    line-height:18px;
    vertical-align:middle;
}
.x-column-tree  .x-tree-node a span{
	
}
.x-column-tree  .x-tree-node .x-tree-selected a span{
	background:transparent;
	color:#000;
}
.x-tree-col {
    float:left;
    overflow:hidden;
    padding:0 1px;
    zoom:1;
}

.x-tree-col-text, .x-tree-hd-text {
    color:#000;
    overflow:hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding:3px 3px 3px 5px;
    white-space: nowrap;
    font:normal 11px arial, tahoma, helvetica, sans-serif;
}

.x-tree-headers {
	margin-top: 3px;
	background: #f9f9f9 url(../../../resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
	cursor:default;
    zoom:1;
}

.x-tree-hd {
    float:left;
    overflow:hidden;
    border-left:1px solid #eee;
    border-right:1px solid #d0d0d0;
}
/*
 * FileUploadField component styles
 */
.x-form-file-wrap {
    position: relative;
    height: 22px;
}
.x-form-file-wrap .x-form-file {
	position: absolute;
	right: 0;
	-moz-opacity: 0;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
    height: 22px;
}
.x-form-file-wrap .x-form-file-btn {
	position: absolute;
	right: 0;
	z-index: 1;
}
.x-form-file-wrap .x-form-file-text {
    position: absolute;
    left: 0;
    z-index: 3;
    color: #777;
}/**
 * GridFilters Styles
 **/
/*
.x-grid3-hd-row .ux-filtered-column {
	border-left:  1px solid #C7E3B4;
	border-right: 1px solid #C7E3B4;
}

.x-grid3-hd-row .ux-filtered-column .x-grid3-hd-inner {
	background-image: url(../images/header_bg.gif);
}

.ux-filtered-column .x-grid3-hd-btn {
	background-image: url(../images/hd-btn.gif);
}
*/
.x-grid3-hd-row td.ux-filtered-column {   
    font-style: italic;  
    font-weight: bold;
}		

.ux-filtered-column.sort-asc .x-grid3-sort-icon {
	background-image: url(../images/sort_filtered_asc.gif) !important;
}

.ux-filtered-column.sort-desc .x-grid3-sort-icon {
	background-image: url(../images/sort_filtered_desc.gif) !important;
}

.ux-gridfilter-text-icon {
	background-image: url(../images/find.png) !important;
}

/* Temporary Patch for Bug ??? */
.x-menu-list-item-indent .x-menu-item-icon {
	position: relative;
    top: 3px;
    left: 3px;
	margin-right: 10px;
}
li.x-menu-list-item-indent {
	padding-left:0px;
}
li.x-menu-list-item div {
	display: inline;
}

/**
 * RangeMenu Styles
 **/
.ux-rangemenu-gt {
	background-image: url(../images/greater_than.png) !important;
}

.ux-rangemenu-lt {
	background-image: url(../images/less_than.png) !important;
}

.ux-rangemenu-eq {
	background-image: url(../images/equals.png) !important;
}
.x-grid3-summary-row {
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    color:#333;
    background: #f1f2f4;
}
.x-grid3-summary-row .x-grid3-cell-inner {
    font-weight:bold;
    padding-bottom:4px;
}
.x-grid3-cell-first .x-grid3-cell-inner {
    padding-left:16px;
}
.x-grid-hide-summary .x-grid3-summary-row {
    display:none;
}
.x-grid3-summary-msg {
    padding:4px 16px;
    font-weight:bold;
}.x-grouptabs-panel {
    background-color: #4E78B1;
    border: solid 15px #4E78B1;
}
.x-tab-panel-left .x-grouptabs-panel-header,
.x-tab-panel-right .x-grouptabs-panel-header {
    float: left;
    border: 0;
    background: transparent;
}
.x-tab-panel-right .x-grouptabs-panel-header {
    float:right;
}
.x-tab-panel-left .x-grouptabs-bwrap {
    float: right;
    position: relative;
}
.x-tab-panel-right .x-grouptabs-bwrap {
    float: left;
    position: relative;
}
.x-tab-panel-left ul.x-grouptabs-strip,
.x-tab-panel-right ul.x-grouptabs-strip {
    width: auto;
	display: block;
}
.x-tab-panel-left ul.x-grouptabs-strip li,
.x-tab-panel-right ul.x-grouptabs-strip li {
    padding: 6px 0 2px 6px;
    float: none;
    margin: 0;
    position: relative;
    clear: both;
}
.x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text,
.x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{
	font-size: 13px;
	line-height: 18px;
	cursor: pointer;
}

.x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{
    padding-left: 18px;
}
.x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{
    padding-right: 18px;
}

.x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text,
.x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{
	font-size: 12px;
    padding: 0;  
}

.x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{
	margin-left: 4px;
}
.x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{
	margin-right: 4px;
}

.x-grouptabs-panel .x-grouptabs-strip a.x-grouptabs-text{
    overflow: hidden;
    white-space: nowrap;
	display: block;
    color: #DFE8F6;
    font-family: tahoma, arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
}
.x-tab-panel-right .x-grouptabs-strip a.x-grouptabs-text {
    text-align: right;
}

.x-grouptabs-panel .x-grouptabs-strip-active a.x-grouptabs-text {
    color: #395B8E;
}

.x-grouptabs-panel ul.x-grouptabs-sub a.x-grouptabs-text {
	font-weight: normal;
}
.x-tab-joint {
    position: absolute;
    width: 3px;
    top: 1px;
    background: #fff;
    z-index: 9999;
}

.x-grouptabs-panel .x-grouptabs-panel-body {
    border: 1px solid #999;
}

.x-grouptabs-panel ul.x-grouptabs-strip li {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
	border-left: 1px solid transparent;
}

.x-grouptabs-panel ul.x-grouptabs-strip li.x-grouptabs-strip-active {
    border: 0;
    background: #fff;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

.x-tab-panel-left ul.x-grouptabs-strip li.x-grouptabs-strip-active {
    border-left: 1px solid #999;
}
.x-tab-panel-right ul.x-grouptabs-strip li.x-grouptabs-strip-active {
    border-right: 1px solid #999;
}

.x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub li.x-grouptabs-strip-active{
    background-color: #EDEEF0;
}

.x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub {
    background-color: transparent;
}

.x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub li {
    border-color: transparent;
}

/* Tab corners */
.x-grouptabs-panel .x-grouptabs-corner {
    background-image: url('../images/x-grouptabs-corners.gif');
    display: none;
    width: 11px;
    height: 11px;
    position: absolute;
    font-size: 1px;
    line-height: 6px;
    overflow: hidden;
    zoom:1;
}
.x-grouptabs-panel .x-grouptabs-strip-active .x-grouptabs-corner {
    display: block;
}
.x-grouptabs-panel .x-grouptabs-main.x-grouptabs-strip-active ul.x-grouptabs-sub .x-grouptabs-corner {
	display: none;
}

.x-grouptabs-panel .x-grouptabs-corner-top-left {
    background-position: top left;
    left: 0; top: 0;
}
.x-grouptabs-panel .x-grouptabs-corner-bottom-left {
    background-position: bottom left;
    left: 0; bottom: 0;
}
.x-grouptabs-panel .x-grouptabs-corner-top-right {
    background-position: top right;
    right: 0; top: 0;
}
.x-grouptabs-panel .x-grouptabs-corner-bottom-right {
    background-position: bottom right;
    right: 0; bottom: 0;
}
.x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-bottom-left{
    bottom: -4px; left: -4px;
}
.x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-bottom-right{
    bottom: -4px; right: -4px;
}
.x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-top-left{
    top: -4px; left: -4px;
}
.x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-top-right{
    top: -4px; right: -4px;
}

.x-grouptabs-panel ul.x-grouptabs-sub li.x-tab-with-icon a.x-grouptabs-text {
    background-repeat: no-repeat;
    padding-left: 20px;
}

/* General tab styling */
.x-grouptabs-panel .x-grouptabs-expand {
	background: transparent url('../images/elbow-plus-nl.gif') no-repeat;
	width: 16px;
	height: 16px;
	position: absolute;
	left: 7px;
	top: 6px;
}

.ext-ie6 .x-grouptabs-panel .x-grouptabs-expand,
.ext-border-box .x-grouptabs-panel .x-grouptabs-expand {
	left: 0;
}

.x-grouptabs-expanded .x-grouptabs-expand {
	background-image: url('../images/elbow-minus-nl.gif');
}

/* GroupTabs sub group styling */
.x-grouptabs-sub {
	display: none;
	margin-top: 4px;
}

.x-grouptabs-expanded .x-grouptabs-sub {
	display: block;
}

.x-grouptabs-panel ul.x-grouptabs-sub li {
	height: 18px;
	margin: 0 0 2px;
    padding: 0;
}

.x-grouptabs-panel ul.x-grouptabs-sub .x-grouptabs-main-item {
	display: none;
}

.x-tab-with-icon{
   border-style:none !important;
}
.x-grid3-locked, .x-grid3-unlocked {
	overflow: hidden;
	position: absolute;
}

.x-grid3-locked {
	border-right: 1px solid #99BBE8;
}

.x-grid3-locked .x-grid3-scroller {
	overflow: hidden;
}

.x-grid3-locked .x-grid3-row {
	border-right: 0;
}

.x-grid3-scroll-spacer {
	height: 19px;
}

.x-grid3-unlocked .x-grid3-header-offset {
	padding-left: 0;
}

.x-grid3-unlocked .x-grid3-row {
	border-left: 0;
}
.ux-mselect{
    overflow:auto;
    background:white;
    position:relative; /* for calculating scroll offsets */
    zoom:1;
    overflow:auto;	
}
.ux-mselect-item{
    font:normal 12px tahoma, arial, helvetica, sans-serif;
    padding:2px;
    border:1px solid #fff;
    white-space: nowrap;
    cursor:pointer;
}
.ux-mselect-selected{
	border:1px dotted #a3bae9 !important;
    background:#DFE8F6;
    cursor:pointer;
}

.x-view-drag-insert-above { 
    border-top:1px dotted #3366cc; 
} 
.x-view-drag-insert-below { 
    border-bottom:1px dotted #3366cc; 
} 
.x-panel-resize {
        height:5px;
        background:transparent url(../images/panel-handle.gif) no-repeat center bottom;
        position:relative;
        left:0;
        top:2px;
        cursor:n-resize;
        cursor:row-resize;
        /* for IE */
        font-size:1px;
        line-height:1px;
        overflow:hidden;
}.x-portal .x-panel-dd-spacer {
    margin-bottom:10px;
}

.x-portlet {
    margin-bottom:10px;
}

/* Clean up the look of the portlets */
.x-portlet .x-panel-ml {
    padding-left:2px;
}
.x-portlet .x-panel-mr {
    padding-right:2px;
}
.x-portlet .x-panel-bl {
    padding-left:2px;
}

.x-portlet .x-panel-br {
    padding-right:2px;
}
.x-portlet .x-panel-body {
    background:white;
}
.x-portlet .x-panel-mc {
    padding-top:2px;
}
.x-portlet .x-panel-bc .x-panel-footer {
    padding-bottom:2px;
}
.x-portlet .x-panel-nofooter .x-panel-bc {
    height:2px;
}.ext-ie .x-row-editor .x-form-text {
    margin:0 !important; 
}
.x-row-editor-header {
    height:2px;
    overflow:hidden;
    background: transparent url(../images/row-editor-bg.gif) repeat-x 0 0;
}
.x-row-editor-footer {
    height:2px;
    overflow:hidden;
    background: transparent url(../images/row-editor-bg.gif) repeat-x 0 -2px;
}
.ext-ie .x-row-editor-footer {
    margin-top:-1px;
}

.x-row-editor-body {
    overflow:hidden;
    zoom:1;
    background: #ebf2fb;
    padding-top:2px;
}
.x-row-editor .x-btns {
    position:absolute;
    top:28px;
    left:20px;
    padding-left:5px;
    background: transparent url(../images/row-editor-btns.gif) no-repeat 0 0;
}
.x-row-editor .x-btns .x-plain-bwrap {
    padding-right:5px;
    background: transparent url(../images/row-editor-btns.gif) no-repeat right -31px;
}
.x-row-editor .x-btns .x-plain-body {
    background: transparent url(../images/row-editor-btns.gif) repeat-x 0 -62px;
    height:31px;
}
.x-row-editor .x-btns .x-table-layout-cell {
    padding:3px;
}

/* Fixes for IE6/7 trigger fields */
.ext-ie6 .x-row-editor .x-form-field-wrap .x-form-trigger, .ext-ie7 .x-row-editor .x-form-field-wrap .x-form-trigger {
  top: 1px;
}

.ext-ie6 .x-row-editor .x-form-field-trigger-wrap, .ext-ie7 .x-row-editor .x-form-field-trigger-wrap {
  margin-top: -1px;
}

.errorTip .x-tip-body ul{
    list-style-type:disc;
    margin-left:15px;
}
.x-form-spinner-proxy{
	/*background-color:#ff00cc;*/
}
.x-form-field-wrap .x-form-spinner-trigger {
    background:transparent url('../images/spinner.gif') no-repeat 0 0;
}

.x-form-field-wrap .x-form-spinner-overup{
    background-position:-17px 0;
}
.x-form-field-wrap .x-form-spinner-clickup{
    background-position:-34px 0;
}
.x-form-field-wrap .x-form-spinner-overdown{
    background-position:-51px 0;
}
.x-form-field-wrap .x-form-spinner-clickdown{
    background-position:-68px 0;
}


.x-trigger-wrap-focus .x-form-spinner-trigger{
    background-position:-85px 0;
}
.x-trigger-wrap-focus .x-form-spinner-overup{
    background-position:-102px 0;
}
.x-trigger-wrap-focus .x-form-spinner-clickup{
    background-position:-119px 0;
}
.x-trigger-wrap-focus .x-form-spinner-overdown{
    background-position:-136px 0;
}
.x-trigger-wrap-focus .x-form-spinner-clickdown{
    background-position:-153px 0;
}
.x-trigger-wrap-focus .x-form-trigger{
    border-bottom: 1px solid #7eadd9;
}

.x-form-field-wrap .x-form-spinner-splitter {
	line-height:1px;
	font-size:1px;
    background:transparent url('../images/spinner-split.gif') no-repeat 0 0;
	position:absolute;
	cursor: n-resize;
}
.x-trigger-wrap-focus .x-form-spinner-splitter{
    background-position:-14px 0;
}
/* StatusBar - structure */
.x-statusbar .x-status-text {
    cursor: default;
/*
    height: 21px;
    line-height: 21px;
    padding: 0 4px;
*/
}
.x-statusbar .x-status-busy {
    padding-left: 25px !important;
    background: transparent no-repeat 3px 2px;
}

.x-toolbar div.xtb-text

.x-statusbar .x-status-text-panel {
    border-top: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    padding: 2px 8px 2px 5px;
}

/* StatusBar word processor example styles */

#word-status .x-status-text-panel .spacer {
    width: 60px;
    font-size:0;
    line-height:0;
}
#word-status .x-status-busy {
    padding-left: 25px !important;
    background: transparent no-repeat 3px 2px;
}
#word-status .x-status-saved {
    padding-left: 25px !important;
    background: transparent no-repeat 3px 2px;
}

/* StatusBar form validation example styles */

.x-statusbar .x-status-error {
    cursor: pointer;
    padding-left: 25px !important;
    background: transparent no-repeat 3px 2px;
}
.x-statusbar .x-status-valid {
    padding-left: 25px !important;
    background: transparent no-repeat 3px 2px;
}
.x-status-error-list {
    font: 11px tahoma,arial,verdana,sans-serif;
    position: absolute;
    z-index: 9999;
    border-top: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-left: 1px solid;
    padding: 5px 10px;
}
.x-status-error-list li {
    cursor: pointer;
    list-style: disc;
    margin-left: 10px;
}
.x-status-error-list li a {
    text-decoration: none;
}
.x-status-error-list li a:hover {
    text-decoration: underline;
}


/* *********************************************************** */
/* *********************************************************** */
/* *********************************************************** */


/* StatusBar - visual */

.x-statusbar .x-status-busy {
    background-image: url(../images/loading.gif);
}
.x-statusbar .x-status-text-panel {
    border-color: #99bbe8 #fff #fff #99bbe8;
}

/* StatusBar word processor example styles */

#word-status .x-status-text {
    color: #777;
}
#word-status .x-status-busy {
    background-image: url(../images/saving.gif);
}
#word-status .x-status-saved {
    background-image: url(../images/saved.png);
}

/* StatusBar form validation example styles */

.x-statusbar .x-status-error {
    color: #C33;
    background-image: url(../images/exclamation.gif);
}
.x-statusbar .x-status-valid {
    background-image: url(../images/accept.png);
}
.x-status-error-list {
    border-color: #C33;
}
.x-status-error-list li a {
    color: #15428B;
}/*!
 * Ext JS Library 3.1+
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
.x-treegrid-root-table {
    border-right: 1px solid;
}

.x-treegrid-root-node {
    overflow: auto;
}

.x-treegrid-hd-hidden {
    visibility: hidden;
    border: 0;
    width: 0;
}

.x-treegrid-col {
    border-bottom: 1px solid;
    height: 20px;
    overflow: hidden;
    vertical-align: top;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
    white-space: nowrap;
}

.x-treegrid-text {
    padding-left: 4px;
    -moz-user-select: none;
    -khtml-user-select: none;
}

.x-treegrid-resizer {
    border-left:1px solid;
    border-right:1px solid;
    position:absolute;
    left:0;
    top:0;
}

.x-treegrid-header-inner {
    overflow: hidden;
}

.x-treegrid-root-table,
.x-treegrid-col {
    border-color: #ededed;
}

.x-treegrid-resizer {
    border-left-color:#555;
    border-right-color:#555;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)


Written By
Eunge
President TCWH
China China
I've worked as a software architect and developer based on Microsoft .NET framework and web technology since 2002, having rich experience on SaaS, multiple-tier web system and website development. I've devoted into open source project development since 2003, and have created 3 main projects including DataQuicker (ORM), ExcelQuicker (Excel Report Generator), and RapidWebDev (Enterprise-level CMS)

I worked in BenQ (8 mo), Bleum (4 mo), Newegg (1 mo), Microsoft (3 yr) and Autodesk (5 yr) before 2012. Now I own a startup company in Shanghai China to deliver the exceptional results to global internet users by leveraging the power of Internet and the local excellence.

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 28 Feb 2010

Article Copyright 2010 by Eunge
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1