ajaxBlender.com— ExtJS Scripts. Custom ExtJS Programming. ExtJS Scripts Integration. http://www.ajaxblender.com A Whole Lot of AJAX! Mon, 02 May 2011 07:38:01 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Advanced Plugins Development with ExtJS http://www.ajaxblender.com/advanced-plugins-development-with-extjs.html http://www.ajaxblender.com/advanced-plugins-development-with-extjs.html#comments Wed, 02 Dec 2009 18:04:59 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1109 In this ExtJS tutorial, the author provides helpful tips for successful Ext JS plug-in development. Basic questions are answered such as: “What is an Ext JS plug-in?” and more. Also discussed are advanced methods of adding your own custom functionality to the Ext JS framework. We highly recommend this article to those creating UI’s with ExtJS.

]]> http://www.ajaxblender.com/advanced-plugins-development-with-extjs.html/feed 0 Preloader Like at ExtJS.com http://www.ajaxblender.com/howto-create-preloader-like-at-extjs-com.html http://www.ajaxblender.com/howto-create-preloader-like-at-extjs-com.html#comments Mon, 02 Nov 2009 20:06:46 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=944 The ExtJS 3.0 library is a little large and can require a few seconds to load all the scripts for the page. Therefore the most convenient way address this is to create a preload message which will let your users know that the loading is in process.

Preface

Steps to create the ExtJS preloader:

  • Create a loading layer, which will contain the progress indicator and display messages while external files (i.e. JavaScript, CSS code, etc.) are loading.
  • Add a few lines of CSS code to stylize the loading layer.
  • Add JavaScript code to hide the layer when all external files are loaded.
Important! You should place any CSS code indented for stylizing the loading layer inside of <head>…</head> tag. Place any links to JS, CSS and other files just after your <body>…</body> tag.

Implementation

Let’s start from the loading layer. You should create the following HTML code for it:

<body>
     <div id="loading-mask"></div>
     <div id="loading">
          <span id="loading-message">Loading. Please wait...</span>
     </div>
</body>

<div id=”loading-mask”> will be our overlay layer which will be placed at the top of the page’s content. We will hide it once the data is fully loaded by the preloader. <div id=”loading”> is the layer which will be placed at top of “loading-mask” and it will be used to display a progress indicator and loading messages.

Use the following CSS code to stylize the content loader. Remember to insert this CSS inside of your <head>…</head> tag:

<style type="text/css">
HTML, BODY { height: 100%; }
#loading-mask {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000000;
     z-index: 1;
}
#loading {
     position: absolute;
     top: 40%;
     left: 45%;
     z-index: 2;
}
#loading SPAN {
     background: url('/article-sources/images/loader.gif') no-repeat left center;
     padding: 5px 30px;
     display: block;
}
</style>

Now, when you have the loading layer, let’s load two JS files. We will be using a common JavaScript to update the progress messages (preload message) while the data loads.  Remember to insert this code inside of the <body>…</body> tag, just after the code for loading layer:

<script type="text/javascript">
     document.getElementById('loading-message').innerHTML = 'Loading Core API...';
</script>
<script type="text/javascript" src="/article-sources/extjs/lib/ext-base.js"></script>
<script>
     document.getElementById('loading-message').innerHTML = 'Loading ExtJS 3.0 ...';
</script>
<script type="text/javascript" src="/article-sources/extjs/lib/ext-all.js"></script>

After this, you use use ExtJS code to fade out the loading message and remove the loading overlay layer from the page:

<script type="text/javascript">
Ext.onReady(function(){
     var loadingMask = Ext.get('loading-mask');
     var loading = Ext.get('loading');
     //  Hide loading message
     loading.fadeOut({ duration: 0.2, remove: true });
     //  Hide loading mask
     loadingMask.setOpacity(0.9);
     loadingMask.shift({
          xy: loading.getXY(),
          width: loading.getWidth(),
          height: loading.getHeight(),
          remove: true,
          duration: 1,
          opacity: 0.1,
          easing: 'bounceOut'
     });
});
</script>

That’s it for the ExtJS preloader ;) Click the View Demo button to view the code in action.

]]> http://www.ajaxblender.com/howto-create-preloader-like-at-extjs-com.html/feed 8 Show or Hide of Ext.Window Panel, With Close Button Inside http://www.ajaxblender.com/show-or-hide-of-ext-window-panel-with-close-button-inside.html http://www.ajaxblender.com/show-or-hide-of-ext-window-panel-with-close-button-inside.html#comments Wed, 30 Sep 2009 12:04:12 +0000 ajaxBlender.com http://www.ajaxblender.com/show-or-hide-of-ext-window-panel-with-close-button-inside.html From this short tutorial you will learn how to control the Ext.Window panel. Author explains how to hide or show it on button or link click.

]]> http://www.ajaxblender.com/show-or-hide-of-ext-window-panel-with-close-button-inside.html/feed 0 How to Make Tabs Reload and Evaluate Scripts using Ext.JS http://www.ajaxblender.com/how-to-make-tabs-reload-and-evaluate-scripts-using-ext-js.html http://www.ajaxblender.com/how-to-make-tabs-reload-and-evaluate-scripts-using-ext-js.html#comments Tue, 29 Sep 2009 17:44:46 +0000 ajaxBlender.com http://www.ajaxblender.com/how-to-make-tabs-reload-and-evaluate-scripts-using-ext-js.html You can execute JavaScript code loaded via AJAX into a tab panel using Ext.JS, but it will evaluate only once (after content is loaded). Many times you need it to reload if the user re-selects the tab. The author of this Ext.JS tutorial explains how to make it execute each time the Ext.JS tab is activated.

]]> http://www.ajaxblender.com/how-to-make-tabs-reload-and-evaluate-scripts-using-ext-js.html/feed 0 How to Open Ext.Panel onClick of a Link http://www.ajaxblender.com/how-to-open-ext-panel-onclick-of-a-link.html http://www.ajaxblender.com/how-to-open-ext-panel-onclick-of-a-link.html#comments Tue, 29 Sep 2009 17:22:16 +0000 ajaxBlender.com http://www.ajaxblender.com/how-to-open-ext-panel-onclick-of-a-link.html This simple tutorial explains how to open Ext.Panel onClick of an anchor link.

]]> http://www.ajaxblender.com/how-to-open-ext-panel-onclick-of-a-link.html/feed 0