[ext-basex/$JIT 4.0 adapter extensions] Ajax enhancements and more.

**hendricd** · 19 Mar 2008, 10:01 AM

Thanks (in part) to @MindPatterns and this thread (and a personal need to have named queues

), I've introduced named-queuing (with priorities) to ext-basex.

To use, simply add a 'queue' config or name to any Ext Ajax request and the new QueueManager will manage the request chains (based on priorities defined on each queue) for you.

Request Queues are automatically created when specified in a request as necessary.

Notes:

Requests without queue specifications are not managed by the Ext.lib.Ajax.QueueManager, and are executed normally.
Queued Requests are supported for both synchonous and asynchronous requests.

-
QueueManager properties (via Ext.lib.Ajax.queueManager):
quantas : adjustable at runtime, the deferred poll interval used to ensure the maximum allowed sessions are active any time there are pending queued requests. (default:10ms)

New lib.Ajax supporting properties :
.activeRequests : the Current number of lib.Ajax requests in progress. (read-only)
.pendingRequests : the Current number of pending Queued requests. (read-only)
.maxConcurrentRequests : adjustable at runtime to suit your needs (or browser), specifies the maximum concurrent Queued browser (XHR) requests.
(defaults:10 )

Example:

Code:

store.load({
      params: {start:0, limit : 50},
      callback: update_user_fields,
      queue : {name:'userlists', priority : 9 } //create (and use) the named queue 'userlist' and assign  lowest (0-9) priority
     //or just specify a previously created queue by name
      queue : 'userlists'
    });

Priority Queues.
The queueManager processes queued requests in order of their priority. There are 10 priorities (0 thru 9, 5 is the default), 0 being the highest priority. As soon as a queued request is added (as outlined above), the queueManager evaluates priorities in sequential order, firing AJAX queued requests until the maxConcurrentRequests value has been reached. Then, after quantas (milliseconds), the queues are again re-evaluated in priority order until all queues are exhausted.

Multiple queues may have the same priority.
Each queue has FIFO(default)/LIFO option as well, eg: queue : {name:'userlists', FIFO :false }

All-in-all, quite flexible and tunable.

Let me know how things go (especially for those chat clients

)

**violinista** · 27 Mar 2008, 2:41 AM

Henri, many thanks to you for this usable extension!

regards

**NotChris** · 1 Apr 2008, 2:26 PM

I would like to be able to use what you have provided to read an xml file from my local client. I have been struggling with this as you can see from the following forum reply but I have made progress:
http://extjs.com/forum/showthread.php?t=31054

I am using the ext-basex.js you have supplied based on a suggestion in that thread and was able to overcome communication errors. But I was wondering if you could provide a simple example of what would be needed to read a local xml file and display the data within a control (in my case, this is a GridPanel). I have not been able to see the data displayed in my actual grid but I do see the file displayed in the Console Response tab. I am unclear on your comment "Ajax Requests can also be made without a web-server (ie local file systems) via HTTP-Status-200 emulation." How would this be accomplished?

Thanks.

**hendricd** · 1 Apr 2008, 3:29 PM

Just include ext-basex.js anywhere after the ext-base adapter in your <head> section, and add this somewhere early in your script:

Code:

Ext.lib.Ajax.forceActiveX = true; //for IE

That's it.

Then, use relevant local URLs (relative URLs are fine too) globally (for your store proxy definitions etc) and you can build a complete App without the need for a web-server.

But your main page must also be loaded from a local drive.

And, yes, you will use the same 'data.Readers' as if you were talking to a web-server.

**NotChris** · 1 Apr 2008, 4:03 PM

I added the line of code you suggested at the beginning of my OnReady function. I am using IE6 and Firefox. I am still having the problem. Does this also work in Firefox? Can you explain in more detail what you mean by "use relevant local URLs (relative URLs are fine too) globally (for your store proxy definitions etc)"? I am using the following (and thanks so much for your help):

Code:

var sm3 = new Ext.grid.CheckboxSelectionModel();
var InboxGrid = new Ext.data.Record.create( [
                 {name: 'company'},
                 {name: 'price'},
                 {name: 'pctChange',type: 'date', dateFormat: 'n/j h:ia'},
                 {name: 'industry'},
                 {name: 'change'}
               
              ]);


var readerInbox = new Ext.data.XmlReader( {
                 totalRecords: 'recCount',
                 record: 'Inbox',
                 id:'ID'
                 }, InboxGrid );

var grid3store = new Ext.data.Store({
           // Both of these lines cause the same results in firefox
           //url: 'Grids.xml',
           proxy: new Ext.data.HttpProxy({url: 'Grids.xml'}),

           reader: readerInbox,
        
          listeners: {
		'loadexception': {
				fn: function(httpProxy, dataObject, arguments, exception) { 
							console.log('** - Data Store listener fired (loadexception), arguments:', arguments);
							console.log('** - Data Store listener fired (loadexception), httpProxy:', httpProxy);
				},
				scope: this
			},
	               'load':{
		                fn: function(store, records, options){
			            console.log('01 - Data Store listener fired (load), arguments:',arguments);
			            console.log('         this:',this);
		                },
		                scope: this
			}
                        //add remaining events for education:	         
	                ,'add':{
		                fn: function(store, records, index){
			            console.log('Data Store listener fired (add), arguments:',arguments);
		                }
		                ,scope:this
	                }
	                ,'beforeload':{
		                fn: function(store, options){
			            console.log('Data Store listener fired fired (beforeload), arguments:',arguments);
		                }
		                ,scope:this
	                }
	                ,'clear':{
		                fn: function(store){
			            console.log('Data Store listener fired fired (clear), arguments:',arguments);
		                }
		                ,scope:this
	                }
	                ,'datachanged':{
		                fn: function(store){
			            console.log('11 - Data Store listener fired fired (datachanged), arguments:',arguments);
			            console.log('       If you set a breakpoint here the entire grid will be rendered without data');
			            console.log('       ...about to "refresh" grid body');
		                }
		                ,scope:this
	                }
	                ,'remove':{
		                fn: function(store, record, index){
			            console.log('Data Store listener fired fired (remove), arguments:',arguments);
		                }
		                ,scope:this
	                }
	                ,'update':{
		                fn: function(store, record, operation){
			            console.log('Data Store listener fired fired (update), arguments:',arguments);
		        }
		        ,scope:this
	             }


		  }
        });

grid3store.load();

SampleGrid3 = function(limitColumns){
  
    var columns3 = [
            sm3,
            {header: "Title", width: 210, sortable: true, dataIndex: 'company'},
            {header: "From", width: 120, sortable: true, dataIndex: 'price'},
            {header: "Date", width: 105, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'pctChange'},
            {header: "Status", width: 100, sortable: true, dataIndex: 'industry'},
  	{header: "Type", width: 180, sortable: true,  dataIndex: 'change'}
    ];

      

    SampleGrid3.superclass.constructor.call(this, {
        store: grid3store,
        sm: sm3,       
        columns: columns3,
        frame:true, 
        height:60,
        width:500,
        id:'grid3',
       
 		      
        buttonAlign:'left',
        buttons: [{text:'New'}, {
           text:'Remove',
           handler: function() {
               
                var selectedRows = sm3.getSelections();
              
                for (i = 0; i < selectedRows.length; i++) {
                    grid3store.remove(sm3.selections.items[i]);
                    i--;
                   selectedRows.length--;
              
              }
           }
         }
       ]
    });


}


Ext.extend(SampleGrid3, Ext.grid.GridPanel);

// html file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/xml; charset=iso-8859-1">

<html>
<head>
  <title>Custom Layouts and Containers - Portal Sample</title>
	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-slate.css" />

        <!-- GC -->
 	<!-- LIBS -->
       
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <!--  <script type="text/javascript" src="../../ext-all.js"></script> -->
         <script type="text/javascript" src="../../ext-all-debug.js"></script>
         <script type="text/javascript" src="../../ext-basex.js"></script>

       
 	<!-- ENDLIBS -->
       
        <script type="text/javascript" src="../form/states.js"></script>
        <script type="text/javascript" src="create-grid.js"></script>
   
        <script type="text/javascript" src="Toolbar.js"></script>

        <style type="text/css">
        .x-toolbar {
	  overflow: hidden;
	
          }
        .x-toolbar-left {
	  float: left;
        }

        .x-toolbar-right {
	  float: right;
        }

        .x-toolbar .ytb-text {
	  line-height: 1.5em;
        }
    </style>

    <script type="text/javascript" src="Portal.js"></script>
    <script type="text/javascript" src="RowExpander.js"></script>
   
    <script type="text/javascript" src="PortalColumn.js"></script>
    <script type="text/javascript" src="Portlet.js"></script>
    <link rel="stylesheet" type="text/css" href="portal.css" />

    <link rel="stylesheet" type="text/css" href="sample.css" />
    <script type="text/javascript" src="quickdetail.js"></script>
    <script type="text/javascript" src="searchbaraddin.js"></script>
    <link rel="stylesheet" type="text/css" href="columnLock.css">
    <script type="text/javascript" src="columnLock.js"></script>
    <script type="text/javascript" src="grid3.js"></script>
       
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
</body>
</html>

// Code line that you specified to include
Ext.onReady(function(){

    Ext.state.Manager.clear();
    Ext.lib.Ajax.forceActiveX = true; //for IE
    .....

**hendricd** · 1 Apr 2008, 4:18 PM

Sorry, I got in late on this game.

I am still having the problem.

the problem?

**hendricd** · 1 Apr 2008, 4:34 PM

@NotChris -- I just reviewed thread 31054.

If you add this to your Ext.onReady block:

Code:

Ext.Ajax.request({
  url:'grids.xml', //this assumes the file is located in the same path as your main page
  success: function(response){
     console.log(['Yippee', response.responseText]);
  },
  failure : function(){
     console.log(['failed ', arguments]);  //last argument is the exception (if JS error)
  }
});

If you see your xml file (with a resounding 'Yippee') in the console.log, ext-basex is doing its job.

The next questions: is the XML "well-formed"? If it is, response.responseXML should show a valid XMLDocument object suitable for use with the XMLReader (ie. will not contain any parseError nodes) .

If that is good, you likely don't have your reader defined properly to parse the xml document.

**NotChris** · 1 Apr 2008, 5:00 PM

OK - I am seeing the following for response.responseText:
"<?xml?>\r\n<list>\r\n<recCount>2</recCount>\r\n\r\n<Inbox>\r\n<ID>1</ID>\r\n<name>Find All requests..."
so it does appear that this is correct and ext-basex is doing its job.

So when you say, "you likely don't have your reader defined properly to parse the xml document", I assume you mean the actual field definitions for XmlReader - correct?

Thanks again. I'm a learnin from folks like you...

**hendricd** · 1 Apr 2008, 5:05 PM

So when you say, "you likely don't have your reader defined properly to parse the xml document", I assume you mean the actual field definitions for XmlReader - correct?

Yes, but make sure you've got a good xml doc. Drag that file into a browser and look for complaints.

Your processingInstruction should look like:

HTML Code:

<?xml version="1.0"?>

**NotChris** · 1 Apr 2008, 5:48 PM

Thanks so much. I was able to get it to work by dragging the file into the browser and determining the correct syntax which was off. The data in the grids is being displayed!!

Thread: [ext-basex/$JIT 4.0 adapter extensions] Ajax enhancements and more.

Thread Tools

Search Thread

Display

ext-basex 2.3 Released (with priority queuing)

Tags for this Thread

Posting Permissions