Click here to Skip to main content
15,886,362 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
 */

.x-border-layout-ct {
    background:#dfe8f6;
}
.x-border-panel {
    position:absolute;
    left:0;
    top:0;
}

.x-tool-collapse-south {
    background-position:0 -195px;
}
.x-tool-collapse-south-over {
    background-position:-15px -195px;
}

.x-tool-collapse-north {
    background-position:0 -210px;
}
.x-tool-collapse-north-over {
    background-position:-15px -210px;
}

.x-tool-collapse-west {
    background-position:0 -180px;
}
.x-tool-collapse-west-over {
    background-position:-15px -180px;
}

.x-tool-collapse-east {
    background-position:0 -165px;
}
.x-tool-collapse-east-over {
    background-position:-15px -165px;
}


.x-tool-expand-south {
    background-position:0 -210px;
}
.x-tool-expand-south-over {
    background-position:-15px -210px;
}

.x-tool-expand-north {
    background-position:0 -195px;
}
.x-tool-expand-north-over {
    background-position:-15px -195px;
}

.x-tool-expand-west {
    background-position:0 -165px;
}
.x-tool-expand-west-over {
    background-position:-15px -165px;
}

.x-tool-expand-east {
    background-position:0 -180px;
}
.x-tool-expand-east-over {
    background-position:-15px -180px;
}

.x-tool-expand-north, .x-tool-expand-south {
    float:right;
    margin:3px;
}
.x-tool-expand-east, .x-tool-expand-west {
    float:none;
    margin:3px auto;
}



.x-accordion-hd .x-tool-toggle {
    background-position:0 -255px;
}
.x-accordion-hd .x-tool-toggle-over {
    background-position:-15px -255px;
}
.x-panel-collapsed .x-accordion-hd .x-tool-toggle {
    background-position:0 -240px;
}
.x-panel-collapsed .x-accordion-hd .x-tool-toggle-over {
    background-position:-15px -240px;
}

.x-accordion-hd {
	color:#222;
	padding-top:4px;
	padding-bottom:3px;
	border-top:0 none;
    font-weight:normal;
    background: transparent url(../images/default/panel/light-hd.gif) repeat-x 0 -9px;
}

.x-layout-collapsed{
    position:absolute;
    left:-10000px;
    top:-10000px;
    visibility:hidden;
    background-color:#d2e0f2;
    width:20px;
    height:20px;
    overflow:hidden;
	border:1px solid #98c0f4;
	z-index:20;
}
.ext-border-box .x-layout-collapsed{
    width:22px;
    height:22px;
}
.x-layout-collapsed-over{
    cursor:pointer;
	 background-color:#d9e8fb;
}
.x-layout-collapsed-west .x-layout-collapsed-tools, .x-layout-collapsed-east .x-layout-collapsed-tools{
	position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
}


.x-layout-split{
    position:absolute;
    height:5px;
    width:5px;
    line-height:1px;
    font-size:1px;
    z-index:3;
    background-color:transparent;
}

/* IE6 strict won't drag w/out a color */
.ext-strict .ext-ie6 .x-layout-split{
    background-color: #fff !important;
    filter: alpha(opacity=1);
}
        
.x-layout-split-h{
    background-image:url(../images/default/s.gif);
    background-position: left;
}
.x-layout-split-v{
    background-image:url(../images/default/s.gif);
    background-position: top;
}

.x-column-layout-ct {
    overflow:hidden;
    /*padding:3px 3px 3px 3px;*/
    zoom:1;
}

.x-column {
    float:left;
    padding:0;
    margin:0;
    overflow:hidden;
    zoom:1;
    /*margin:3px;*/
}

/* mini mode */

.x-layout-mini {
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:5px;
    height:35px;
    cursor:pointer;
    opacity:.5;
    -moz-opacity:.5;
    filter:alpha(opacity=50);
}
.x-layout-mini-over, .x-layout-collapsed-over .x-layout-mini{
    opacity:1;
    -moz-opacity:1;
    filter:none;
}

.x-layout-split-west .x-layout-mini {
    top:48%;
    background-image:url(../images/default/layout/mini-left.gif);
}
.x-layout-split-east .x-layout-mini {
    top:48%;
    background-image:url(../images/default/layout/mini-right.gif);
}
.x-layout-split-north .x-layout-mini {
    left:48%;
    height:5px;
    width:35px;
    background-image:url(../images/default/layout/mini-top.gif);
}
.x-layout-split-south .x-layout-mini {
    left:48%;
    height:5px;
    width:35px;
    background-image:url(../images/default/layout/mini-bottom.gif);
}


.x-layout-cmini-west .x-layout-mini {
    top:48%;
    background-image:url(../images/default/layout/mini-right.gif);
}

.x-layout-cmini-east .x-layout-mini {
    top:48%;
    background-image:url(../images/default/layout/mini-left.gif);
}

.x-layout-cmini-north .x-layout-mini {
    left:48%;
    height:5px;
    width:35px;
    background-image:url(../images/default/layout/mini-bottom.gif);
}

.x-layout-cmini-south .x-layout-mini {
    left:48%;
    height:5px;
    width:35px;
    background-image:url(../images/default/layout/mini-top.gif);
}

.x-layout-cmini-west, .x-layout-cmini-east {
    border:0 none;
    width:5px !important;
    padding:0;
    background:transparent;
}

.x-layout-cmini-north, .x-layout-cmini-south {
    border:0 none;
    height:5px !important;
    padding:0;
    background:transparent;
}

.x-viewport, .x-viewport body {
    margin: 0;
    padding: 0;
    border: 0 none;
    overflow: hidden;
    height: 100%;
}

.x-abs-layout-item {
    position:absolute;
    left:0;
    top:0;
}

.ext-ie input.x-abs-layout-item, .ext-ie textarea.x-abs-layout-item {
    margin:0;
}

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