Click here to Skip to main content
15,886,530 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-tree .x-panel-body{
    background-color:#fff;
}
.ext-strict .ext-ie .x-tree .x-panel-bwrap{
    position:relative;
    overflow:hidden;
}
.x-tree-icon, .x-tree-ec-icon, .x-tree-elbow-line, .x-tree-elbow, .x-tree-elbow-end, .x-tree-elbow-plus, .x-tree-elbow-minus, .x-tree-elbow-end-plus, .x-tree-elbow-end-minus{
	border: 0 none;
	height: 18px;
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 16px;
    background-repeat: no-repeat;
}
.x-tree-node-collapsed .x-tree-node-icon, .x-tree-node-expanded .x-tree-node-icon, .x-tree-node-leaf .x-tree-node-icon{
	border: 0 none;
	height: 18px;
	margin: 0;
	padding: 0;
	vertical-align: top;
	width: 16px;
	background-position:center;
    background-repeat: no-repeat;
}
.ext-ie .x-tree-node-indent img, .ext-ie .x-tree-node-icon, .ext-ie .x-tree-ec-icon {
    vertical-align:middle !important;
}
/* some default icons for leaf/folder */
.x-tree-node-expanded .x-tree-node-icon{
	background-image:url(../images/default/tree/folder-open.gif);
}
.x-tree-node-leaf .x-tree-node-icon{
	background-image:url(../images/default/tree/leaf.gif);
}
.x-tree-node-collapsed .x-tree-node-icon{
	background-image:url(../images/default/tree/folder.gif);
}
/* checkboxes */
.ext-ie input.x-tree-node-cb {
    width:15px;
    height:15px;
}
input.x-tree-node-cb {
    margin-left:1px;
}
.ext-ie input.x-tree-node-cb {
    margin-left:0;
}

.x-tree-noicon .x-tree-node-icon{
	width:0; height:0;
}
/* loading icon */
.x-tree-node-loading .x-tree-node-icon{
	background-image:url(../images/default/tree/loading.gif) !important;
}
.x-tree-node-loading a span{
	 font-style: italic;
	 color:#444444;
}
.ext-ie .x-tree-node-el input {
    width:15px;
    height:15px;
}
/* Line styles */
.x-tree-lines .x-tree-elbow{
	background-image:url(../images/default/tree/elbow.gif);
}
.x-tree-lines .x-tree-elbow-plus{
	background-image:url(../images/default/tree/elbow-plus.gif);
}
.x-tree-lines .x-tree-elbow-minus{
	background-image:url(../images/default/tree/elbow-minus.gif);
}
.x-tree-lines .x-tree-elbow-end{
	background-image:url(../images/default/tree/elbow-end.gif);
}
.x-tree-lines .x-tree-elbow-end-plus{
	background-image:url(../images/default/tree/elbow-end-plus.gif);
}
.x-tree-lines .x-tree-elbow-end-minus{
	background-image:url(../images/default/tree/elbow-end-minus.gif);
}
.x-tree-lines .x-tree-elbow-line{
	background-image:url(../images/default/tree/elbow-line.gif);
}

/* No line styles */
.x-tree-no-lines .x-tree-elbow{
	background:transparent;
}
.x-tree-no-lines .x-tree-elbow-plus{
	background-image:url(../images/default/tree/elbow-plus-nl.gif);
}
.x-tree-no-lines .x-tree-elbow-minus{
	background-image:url(../images/default/tree/elbow-minus-nl.gif);
}
.x-tree-no-lines .x-tree-elbow-end{
	background:transparent;
}
.x-tree-no-lines .x-tree-elbow-end-plus{
	background-image:url(../images/default/tree/elbow-end-plus-nl.gif);
}
.x-tree-no-lines .x-tree-elbow-end-minus{
	background-image:url(../images/default/tree/elbow-end-minus-nl.gif);
}
.x-tree-no-lines .x-tree-elbow-line{
	background:transparent;
}


/* Arrows */
.x-tree-arrows .x-tree-elbow{
	background:transparent;
}
.x-tree-arrows .x-tree-elbow-plus{
    background:transparent url(../images/default/tree/arrows.gif) no-repeat 0 0;
}
.x-tree-arrows .x-tree-elbow-minus{
    background:transparent url(../images/default/tree/arrows.gif) no-repeat -16px 0;
}
.x-tree-arrows .x-tree-elbow-end{
	background:transparent;
}
.x-tree-arrows .x-tree-elbow-end-plus{
    background:transparent url(../images/default/tree/arrows.gif) no-repeat 0 0;
}
.x-tree-arrows .x-tree-elbow-end-minus{
    background:transparent url(../images/default/tree/arrows.gif) no-repeat -16px 0;
}
.x-tree-arrows .x-tree-elbow-line{
	background:transparent;
}

.x-tree-arrows .x-tree-ec-over .x-tree-elbow-plus{
    background-position:-32px 0;
}
.x-tree-arrows .x-tree-ec-over .x-tree-elbow-minus{
    background-position:-48px 0;
}
.x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-plus{
    background-position:-32px 0;
}
.x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-minus{
    background-position:-48px 0;
}



.x-tree-elbow-plus, .x-tree-elbow-minus, .x-tree-elbow-end-plus, .x-tree-elbow-end-minus{
	cursor:pointer;
}
.ext-ie ul.x-tree-node-ct{
    font-size:0;
    line-height:0;
    zoom:1;
}
.x-tree-node{
	color: black;
	font: normal 11px arial, tahoma, helvetica, sans-serif;
	white-space: nowrap;
}

.x-tree-node-el {
    line-height:18px;
    cursor:pointer;
}

.x-tree-node a, .x-dd-drag-ghost a{
	text-decoration:none;
	color:black;
	-khtml-user-select:none;
	-moz-user-select:none;
    -kthml-user-focus:normal;
    -moz-user-focus:normal;
    -moz-outline: 0 none;
    outline:0 none;
}
.x-tree-node a span, .x-dd-drag-ghost a span{
	text-decoration:none;
	color:black;
	padding:1px 3px 1px 2px;
}
.x-tree-node .x-tree-node-disabled a span{
	color:gray !important;
}
.x-tree-node .x-tree-node-disabled .x-tree-node-icon{
	-moz-opacity: 0.5;
   opacity:.5;
   filter: alpha(opacity=50);
}
.x-tree-node .x-tree-node-inline-icon{
	background:transparent;
}
.x-tree-node a:hover, .x-dd-drag-ghost a:hover{
	text-decoration:none;
}
.x-tree-node div.x-tree-drag-insert-below{
 	 border-bottom:1px dotted #3366cc;
}
.x-tree-node div.x-tree-drag-insert-above{
	 border-top:1px dotted #3366cc;
}
.x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below{
 	 border-bottom:0 none;
}
.x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above{
	 border-top:0 none;
}
.x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a{
 	 border-bottom:2px solid #3366cc;
}
.x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a{
	 border-top:2px solid #3366cc;
}
.x-tree-node .x-tree-drag-append a span{
	 background:#dddddd;
	 border:1px dotted gray;
}
.x-tree-node .x-tree-node-over {
	background-color: #eee;
}
.x-tree-node .x-tree-selected {
	background-color: #d9e8fb;
}
.x-dd-drag-ghost .x-tree-node-indent, .x-dd-drag-ghost .x-tree-ec-icon{
	display:none !important;
}
.x-tree-drop-ok-append .x-dd-drop-icon{
  background-image: url(../images/default/tree/drop-add.gif);
}
.x-tree-drop-ok-above .x-dd-drop-icon{
  background-image: url(../images/default/tree/drop-over.gif);
}
.x-tree-drop-ok-below .x-dd-drop-icon{
  background-image: url(../images/default/tree/drop-under.gif);
}
.x-tree-drop-ok-between .x-dd-drop-icon{
  background-image: url(../images/default/tree/drop-between.gif);
}
/* Fix for ie rootVisible:false issue */
.x-tree-root-ct {
    zoom:1;
}

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