Click here to Skip to main content
15,885,048 members
Articles / Web Development / ASP.NET

ExtJS and .NET Web Services

Rate me:
Please Sign up or sign in to vote.
4.83/5 (17 votes)
19 Jun 2009CPOL2 min read 129.9K   3.4K   40  
How to use .NET Web Services in ExtJS
  • webservice4extjs_local.zip
    • WebService4ExtJS_local
      • App_Data
      • bin
        • WebService4ExtJS.dll
        • WebService4ExtJS.pdb
      • Controllers
      • indomain.html
      • js
        • ext
          • adapter
          • CHANGES.html
          • ext-all.js
          • ext-all-debug.js
          • ext-core.js
          • ext-core-debug.js
          • INCLUDE_ORDER.txt
          • LICENSE.txt
          • resources
            • css
            • images
              • default
                • box
                  • corners.gif
                  • corners-blue.gif
                  • l.gif
                  • l-blue.gif
                  • r.gif
                  • r-blue.gif
                  • tb.gif
                  • tb-blue.gif
                • button
                  • btn-arrow.gif
                  • btn-sprite.gif
                • dd
                  • drop-add.gif
                  • drop-no.gif
                  • drop-yes.gif
                • editor
                  • tb-sprite.gif
                • form
                  • checkbox.gif
                  • clear-trigger.gif
                  • clear-trigger.psd
                  • date-trigger.gif
                  • date-trigger.psd
                  • error-tip-corners.gif
                  • exclamation.gif
                  • radio.gif
                  • search-trigger.gif
                  • search-trigger.psd
                  • text-bg.gif
                  • trigger.gif
                  • trigger.psd
                  • trigger-tpl.gif
                • gradient-bg.gif
                • grid
                  • arrow-left-white.gif
                  • arrow-right-white.gif
                  • col-move-bottom.gif
                  • col-move-top.gif
                  • columns.gif
                  • dirty.gif
                  • done.gif
                  • drop-no.gif
                  • drop-yes.gif
                  • footer-bg.gif
                  • grid3-hd-btn.gif
                  • grid3-hrow.gif
                  • grid3-hrow-over.gif
                  • grid3-special-col-bg.gif
                  • grid3-special-col-sel-bg.gif
                  • grid-blue-hd.gif
                  • grid-blue-split.gif
                  • grid-hrow.gif
                  • grid-loading.gif
                  • grid-split.gif
                  • grid-vista-hd.gif
                  • group-by.gif
                  • group-expand-sprite.gif
                  • hd-pop.gif
                  • hmenu-asc.gif
                  • hmenu-desc.gif
                  • hmenu-lock.gif
                  • hmenu-lock.png
                  • hmenu-unlock.gif
                  • hmenu-unlock.png
                  • invalid_line.gif
                  • loading.gif
                  • mso-hd.gif
                  • nowait.gif
                  • page-first.gif
                  • page-first-disabled.gif
                  • page-last.gif
                  • page-last-disabled.gif
                  • page-next.gif
                  • page-next-disabled.gif
                  • page-prev.gif
                  • page-prev-disabled.gif
                  • pick-button.gif
                  • refresh.gif
                  • row-check-sprite.gif
                  • row-expand-sprite.gif
                  • row-over.gif
                  • row-sel.gif
                  • sort_asc.gif
                  • sort_desc.gif
                  • wait.gif
                • layout
                  • collapse.gif
                  • expand.gif
                  • gradient-bg.gif
                  • mini-bottom.gif
                  • mini-left.gif
                  • mini-right.gif
                  • mini-top.gif
                  • ns-collapse.gif
                  • ns-expand.gif
                  • panel-close.gif
                  • panel-title-bg.gif
                  • panel-title-light-bg.gif
                  • stick.gif
                  • stuck.gif
                  • tab-close.gif
                  • tab-close-on.gif
                • menu
                  • checked.gif
                  • group-checked.gif
                  • item-over.gif
                  • menu.gif
                  • menu-parent.gif
                  • unchecked.gif
                • panel
                  • corners-sprite.gif
                  • left-right.gif
                  • light-hd.gif
                  • tool-sprites.gif
                  • tool-sprite-tpl.gif
                  • tools-sprites-trans.gif
                  • top-bottom.gif
                  • top-bottom.png
                  • white-corners-sprite.gif
                  • white-left-right.gif
                  • white-top-bottom.gif
                • progress
                  • progress-bg.gif
                • qtip
                  • bg.gif
                  • close.gif
                  • tip-sprite.gif
                • s.gif
                • shadow.png
                • shadow-c.png
                • shadow-c.psd
                • shadow-lr.png
                • shared
                  • blue-loading.gif
                  • calendar.gif
                  • glass-bg.gif
                  • hd-sprite.gif
                  • large-loading.gif
                  • left-btn.gif
                  • loading-balls.gif
                  • right-btn.gif
                  • warning.gif
                • sizer
                  • e-handle.gif
                  • e-handle-dark.gif
                  • ne-handle.gif
                  • ne-handle-dark.gif
                  • nw-handle.gif
                  • nw-handle-dark.gif
                  • se-handle.gif
                  • se-handle-dark.gif
                  • s-handle.gif
                  • s-handle-dark.gif
                  • square.gif
                  • sw-handle.gif
                  • sw-handle-dark.gif
                • slider
                  • slider-bg.png
                  • slider-thumb.png
                  • slider-v-bg.png
                  • slider-v-thumb.png
                • tabs
                  • scroller-bg.gif
                  • scroll-left.gif
                  • scroll-right.gif
                  • tab-btm-inactive-left-bg.gif
                  • tab-btm-inactive-right-bg.gif
                  • tab-btm-left-bg.gif
                  • tab-btm-right-bg.gif
                  • tab-close.gif
                  • tabs-sprite.gif
                  • tab-strip-bg.gif
                  • tab-strip-bg.png
                  • tab-strip-btm-bg.gif
                • toolbar
                  • bg.gif
                  • btn-arrow.gif
                  • btn-arrow-light.gif
                  • btn-over-bg.gif
                  • gray-bg.gif
                  • tb-bg.gif
                  • tb-btn-sprite.gif
                • tree
                  • arrows.gif
                  • drop-add.gif
                  • drop-between.gif
                  • drop-no.gif
                  • drop-over.gif
                  • drop-under.gif
                  • drop-yes.gif
                  • elbow.gif
                  • elbow-end.gif
                  • elbow-end-minus.gif
                  • elbow-end-minus-nl.gif
                  • elbow-end-plus.gif
                  • elbow-end-plus-nl.gif
                  • elbow-line.gif
                  • elbow-minus.gif
                  • elbow-minus-nl.gif
                  • elbow-plus.gif
                  • elbow-plus-nl.gif
                  • folder.gif
                  • folder-open.gif
                  • leaf.gif
                  • loading.gif
                  • s.gif
                • window
                  • icon-error.gif
                  • icon-info.gif
                  • icon-question.gif
                  • icon-warning.gif
                  • left-corners.png
                  • left-corners.psd
                  • left-right.png
                  • left-right.psd
                  • right-corners.png
                  • right-corners.psd
                  • top-bottom.png
                  • top-bottom.psd
            • license.txt
            • raw-images
              • shadow.psd
            • resources.jsb
      • Model
      • Properties
      • Service.asmx
      • Service.asmx.cs
      • Web.config
      • WebService4ExtJS.suo
      • WebService4ExtJS_local.csproj
      • WebService4ExtJS_local.csproj.user
      • WebService4ExtJS_local.sln
      • WebService4ExtJS_local.suo
/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

/* all fields */
.x-form-field{
    margin: 0 0 0 0;
    font:normal 12px tahoma, arial, helvetica, sans-serif;
}

/* ---- text fields ---- */
.x-form-text, textarea.x-form-field{
    padding:1px 3px;
    background:#fff url(../images/default/form/text-bg.gif) repeat-x 0 0;
    border:1px solid #B5B8C8;
}
textarea.x-form-field {
    padding:2px 3px;
}
.x-form-text {
    height:22px;
    line-height:18px;
    vertical-align:middle;
}
.ext-ie .x-form-text {
    margin:-1px 0; /* ie bogus margin bug */
    height:22px; /* ie quirks */
    line-height:18px;
}
.ext-ie textarea.x-form-field {
    margin:-1px 0; /* ie bogus margin bug */
}
.ext-strict .x-form-text {
    height:18px;
}
.ext-safari .x-form-text {
    height:20px; /* safari always same size */
    padding:0 3px; /* remove extra top/bottom padding */
}
.ext-safari.ext-mac textarea.x-form-field {
    margin-bottom:-2px; /* another bogus margin bug, safari/mac only */
}
.ext-gecko .x-form-text {
    padding-top:2px; /* FF won't center the text vertically */
    padding-bottom:0;
}
textarea {
    resize: none;  /* Disable browser resizable textarea */
}

/* select boxes */

.x-form-select-one {
    height:20px;
    line-height:18px;
    vertical-align:middle;
    background-color:#fff; /* opera */
    border: 1px solid #B5B8C8;
}

/* multi select boxes */

/* --- TODO --- */

/* checkboxes / radios */
.x-form-check-group, .x-form-radio-group {
    margin-bottom: 0;
}
.x-form-check-group .x-form-invalid .x-panel-body,
.x-form-radio-group .x-form-invalid .x-panel-body {
    background-color: transparent;
}
.x-form-check-wrap, .x-form-radio-wrap {
    padding: 3px 0 0 0;
    line-height:18px;
}
.x-form-check-group .x-form-check-wrap, 
.x-form-radio-group .x-form-radio-wrap {
    height: 18px;
}
.ext-ie .x-form-check-group .x-form-check-wrap, 
.ext-ie .x-form-radio-group .x-form-radio-wrap {
    height: 21px;
}
.ext-ie .x-form-check-wrap input,
.ext-ie .x-form-radio-wrap input {
    width:15px;
    height:15px;
}
.x-form-check, .x-form-radio {
	height: 13px;
	width: 13px;
    vertical-align: bottom;
} 
.x-form-radio {
    margin-bottom: 3px;
}
.x-form-check, .ext-ie .x-form-radio {
    margin-bottom: 2px;
}
.x-form-check-wrap-inner, .x-form-radio-wrap-inner {
    display: inline;
    padding: 3px 0 0 0;
}
.x-form-check {
	background: url('../images/default/form/checkbox.gif') no-repeat 0 0;
}
.x-form-radio {
	background: url('../images/default/form/radio.gif') no-repeat 0 0;
}
.x-form-check-focus .x-form-check, .x-form-check-over .x-form-check,
.x-form-check-focus .x-form-radio, .x-form-check-over .x-form-radio {
	background-position: -13px 0;
}
.x-form-check-down .x-form-check, 
.x-form-check-down .x-form-radio {
	background-position:-26px 0;
}
.x-form-check-checked .x-form-check-focus .x-form-check, 
.x-form-check-checked .x-form-check-over .x-form-check {
	background-position:-13px -13px;
}
.x-form-check-checked .x-form-check-down .x-form-check {
	background-position:-26px -13px;
}
.x-form-check-checked .x-form-check, 
.x-form-check-checked .x-form-radio {
	background-position:0 -13px;
}
.x-form-check-group-label {
    border-bottom: 1px solid #99BBE8;
    color: #15428B;
    margin-bottom: 5px;
    padding-left: 3px !important;
    float: none !important;
}

/* wrapped fields and triggers */

.x-form-field-wrap {
    position:relative;
    zoom:1;
    white-space: nowrap;
}
.x-form-field-wrap .x-form-trigger{
    width:17px;
    height:21px;
    border:0;
    background:transparent url(../images/default/form/trigger.gif) no-repeat 0 0;
    cursor:pointer;
    border-bottom: 1px solid #B5B8C8;
    position:absolute;
    top:0;
}
.ext-safari .x-form-field-wrap .x-form-trigger{
    height:21px; /* safari doesn't allow height adjustments to the fields, so adjust trigger */
}

.x-form-field-wrap .x-form-date-trigger{
    background-image: url(../images/default/form/date-trigger.gif);
    cursor:pointer;
}
.x-form-field-wrap .x-form-clear-trigger{
    background-image: url(../images/default/form/clear-trigger.gif);
    cursor:pointer;
}
.x-form-field-wrap .x-form-search-trigger{
    background-image: url(../images/default/form/search-trigger.gif);
    cursor:pointer;
}
.ext-safari .x-form-field-wrap .x-form-trigger{
    right:0;
}
.x-form-field-wrap .x-form-twin-triggers{

}
.x-form-field-wrap .x-form-twin-triggers .x-form-trigger{
    position:static;
    top:auto;
    vertical-align:top;
}


.x-form-field-wrap .x-form-trigger-over{
    background-position:-17px 0;
}
.x-form-field-wrap .x-form-trigger-click{
    background-position:-34px 0;
}

.x-trigger-wrap-focus .x-form-trigger{
    background-position:-51px 0;
}
.x-trigger-wrap-focus .x-form-trigger-over{
    background-position:-68px 0;
}
.x-trigger-wrap-focus .x-form-trigger-click{
    background-position:-85px 0;
}
.x-trigger-wrap-focus .x-form-trigger{
    border-bottom: 1px solid #7eadd9;
}

.x-item-disabled .x-form-trigger-over{
    background-position:0 0 !important;
    border-bottom: 1px solid #B5B8C8;
}
.x-item-disabled .x-form-trigger-click{
    background-position:0 0 !important;
    border-bottom: 1px solid #B5B8C8;
}

/* field focus style */
.x-form-focus, textarea.x-form-focus{
	border: 1px solid #7eadd9;
}

/* invalid fields */
.x-form-invalid, textarea.x-form-invalid{
	background:#fff url(../images/default/grid/invalid_line.gif) repeat-x bottom;
	border: 1px solid #dd7870;
}
.ext-safari .x-form-invalid{
	background-color:#ffeeee;
	border: 1px solid #ff7870;
}

/* editors */
.x-editor {
    visibility:hidden;
    padding:0;
    margin:0;
}
.x-editor .x-form-check-wrap,
.x-editor .x-form-radio-wrap {
    background:#fff;
    padding:3px;
}
.x-editor .x-form-checkbox {
    height:13px;
}
/* If you override the default field font above, you would need to change this font as well */
.x-form-grow-sizer {
	font:normal 12px tahoma, arial, helvetica, sans-serif;
    left: -10000px;
	padding: 8px 3px;
    position: absolute;
    visibility:hidden;
    top: -10000px;
	white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    zoom:1;
}
.x-form-grow-sizer p {
    margin:0 !important;
    border:0 none !important;
    padding:0 !important;
}
/* Form Items CSS */

.x-form-item {
    font:normal 12px tahoma, arial, helvetica, sans-serif;
    display:block;
    margin-bottom:4px;
    zoom:1;
}

.x-form-item label {
    display:block;
    float:left;
    width:100px;
    padding:3px;
    padding-left:0;
    clear:left;
    z-index:2;
    position:relative;
}

.x-form-element {
    padding-left:105px;
    position:relative;
}

.x-form-invalid-msg {
    color:#ee0000;
    padding:2px;
    padding-left:18px;
    font:normal 11px tahoma, arial, helvetica, sans-serif;
    background: transparent url(../images/default/shared/warning.gif) no-repeat 0 2px;
    line-height:16px;
    width:200px;
}


.x-form-label-right label {
   text-align:right;
}
.x-form-label-left label {
   text-align:left;
}

.x-form-label-top .x-form-item label {
    width:auto;
    float:none;
    clear:none;
    display:inline;
    margin-bottom:4px;
    position:static;
}

.x-form-label-top .x-form-element {
    padding-left:0;
    padding-top:4px;
}

.x-form-label-top .x-form-item {
    padding-bottom:4px;
}

.x-form-empty-field {
    color:gray;
}
/* Editor small font for grid, toolbar and tree */
.x-small-editor .x-form-field {
    font:normal 11px arial, tahoma, helvetica, sans-serif;
}
.x-small-editor .x-form-text {
    height:20px;
    line-height:16px;
    vertical-align:middle;
}
.ext-ie .x-small-editor .x-form-text {
    margin-top:-1px !important; /* ie bogus margin bug */
    margin-bottom:-1px !important;
    height:20px !important; /* ie quirks */
    line-height:16px !important;
}
.ext-strict .x-small-editor .x-form-text {
    height:16px !important;
}

.ext-safari .x-small-editor .x-form-field {
    /* safari text field will not size so needs bigger font */
    font:normal 12px arial, tahoma, helvetica, sans-serif;
}
.ext-ie .x-small-editor .x-form-text {
    height:20px;
    line-height:16px;
}
.ext-border-box .x-small-editor .x-form-text {
    height:20px;
}

.x-small-editor .x-form-select-one {
    height:20px;
    line-height:16px;
    vertical-align:middle;
}
.x-small-editor .x-form-num-field {
    text-align:right;
}
.x-small-editor .x-form-field-wrap .x-form-trigger{
    height:19px;
}


.x-form-clear {
    clear:both;
    height:0;
    overflow:hidden;
    line-height:0;
    font-size:0;
}
.x-form-clear-left {
    clear:left;
    height:0;
    overflow:hidden;
    line-height:0;
    font-size:0;
}

.x-form-cb-label {
    width:'auto' !important;
    float:none !important;
    clear:none !important;
    display:inline !important;
    margin-left:4px;
}

.x-form-column {
    float:left;
    padding:0;
    margin:0;
    width:48%;
    overflow:hidden;
    zoom:1;
}

/* buttons */
.x-form .x-form-btns-ct .x-btn{
	float:right;
	clear:none;
}
.x-form .x-form-btns-ct .x-form-btns td {
	border:0;
	padding:0;
}
.x-form .x-form-btns-ct .x-form-btns-right table{
	float:right;
	clear:none;
}
.x-form .x-form-btns-ct .x-form-btns-left table{
	float:left;
	clear:none;
}
.x-form .x-form-btns-ct .x-form-btns-center{
	text-align:center; /*ie*/
}
.x-form .x-form-btns-ct .x-form-btns-center table{
	margin:0 auto; /*everyone else*/
}
.x-form .x-form-btns-ct table td.x-form-btn-td{
	padding:3px;
}

.x-form .x-form-btns-ct .x-btn-focus .x-btn-left{
	background-position:0 -147px;
}
.x-form .x-form-btns-ct .x-btn-focus .x-btn-right{
	background-position:0 -168px;
}
.x-form .x-form-btns-ct .x-btn-focus .x-btn-center{
	background-position:0 -189px;
}

.x-form .x-form-btns-ct .x-btn-click .x-btn-center{
	background-position:0 -126px;
}
.x-form .x-form-btns-ct .x-btn-click  .x-btn-right{
	background-position:0 -84px;
}
.x-form .x-form-btns-ct .x-btn-click .x-btn-left{
	background-position:0 -63px;
}
.x-form-invalid-icon {
    width:16px;
    height:18px;
    visibility:hidden;
    position:absolute;
    left:0;
    top:0;
    display:block;
    background:transparent url(../images/default/form/exclamation.gif) no-repeat 0 2px;
}

/* fieldsets */
.x-fieldset {
    border:1px solid #B5B8C8;
    padding:10px;
    margin-bottom:10px;
    display:block; /* preserve margins in IE */
}
.x-fieldset legend {
    font:bold 11px tahoma, arial, helvetica, sans-serif;
    color:#15428b;
}
.ext-ie .x-fieldset legend {
    margin-bottom:10px;
}
.ext-ie .x-fieldset {
    padding-top: 0;
    padding-bottom:10px;
}
.x-fieldset legend .x-tool-toggle {
    margin-right:3px;
    margin-left:0;
    float:left !important;
}
.x-fieldset legend input {
    margin-right:3px;
    float:left !important;
    height:13px;
    width:13px;
}
fieldset.x-panel-collapsed {
    padding-bottom:0 !important;
    border-width: 1px 0 0 0 !important;
}
fieldset.x-panel-collapsed .x-fieldset-bwrap {
    visibility:hidden;
    position:absolute;
    left:-1000px;
    top:-1000px;
}
.ext-ie .x-fieldset-bwrap {
    zoom:1;
}
.ext-ie td .x-form-text {
    position:relative;
    top:-1px;
}
.x-fieldset-noborder {
    border:0px none transparent;
}
.x-fieldset-noborder legend {
    margin-left:-3px;
}
/* IE legend positioing bug */
.ext-ie .x-fieldset-noborder legend {
    position: relative;
    margin-bottom:23px;
}
.ext-ie .x-fieldset-noborder legend span {
    position: absolute;
    left:-5px;
}
        
.ext-gecko .x-window-body .x-form-item {
    -moz-outline: none;
    overflow: auto;
}

.ext-gecko .x-form-item {
    -moz-outline: none;
}

.x-hide-label label.x-form-item-label {
     display:none;
}
.x-hide-label .x-form-element {
     padding-left: 0 !important;
}

.x-fieldset {
    overflow:hidden;
}

.x-fieldset-bwrap {
    overflow:hidden;
    zoom:1;
}

.x-fieldset-body {
    overflow:hidden;
}

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 Code Project Open License (CPOL)


Written By
Software Developer (Senior) Pareto PPN AS
Norway Norway
Application Developer and Solutions Architect with many skills in programming languages and technolgies. Specializes in Microsoft .NET platform for last 6 years. Additionally Database Developer with wide experience in MySql, Microsoft SqlServer. Specializes in in building Workflow Software using LogicBase Studio from Transparent Logic (Now Altiris Workflow Solution). Lastly improve his skills in software development in Lotus Domino and Sharepoint. His primary goal is to improve skills in building Enterprise Architectures and Project Management.

Comments and Discussions