Please find below some of the most popular articles I've written on Guide To Ext JS.

“Learning ExtJS 4” is a good, practical introduction to ExtJS for beginner ExtJS developers who haven’t used the library, or who have used prior Ext versions. In a couple spots I found myself wishing for deep technical details, e.g. explanations the rationale behind architectural decisions the Ext team made, but that is consistent with the [...] Read More...

Problem You want to display a scatter chart in ExtJS 3.4. Solution Use the Ext.chart.Chart class, and make the lines invisible. Discussion This example works by rendering an Ext line chart and setting the “alpha” (visibility) property of the lines to 0 (transparent). If you wanted to add trend lines, you’d need to add visible [...] Read More...

Problem You want to display a trend line on a scatter chart in ExtJS 3.4. Solution Use the Ext.chart.Chart class, but add an extra series for the trend-line, and make the colors match the corresponding series related to the trend. Discussion ExtJS is able to make nice-looking charts, using YUI charts, but seems to be [...] Read More...

Problem You want to display a stacked bar chart. Solution Use the Ext.chart.Chart, and set the “series” property, including type: ‘area’. Ext.onReady(function() { Ext.define('ParolePoint', { extend: 'Ext.data.Model', fields: ['state', 'entry', 'exit'] });   var store = Ext.create('Ext.data.Store', { model: 'ParolePoint', data : [ {state: 'Connecticut', entry:31000, exit:28211}, {state: 'Maine', entry:3627, exit:3692}, {state: 'Massachusetts', entry:98952, exit:96142}, [...] Read More...

Problem You want to display a control that allows editing HTML. Solution Use the HtmlEditor xtype. <script> Ext.onReady(function() { Ext.tip.QuickTipManager.init(); // enable tooltips var panel = new Ext.panel.Panel({ title: 'HTML Editor', renderTo: "html", width: 473, height: 220, default: '', frame: true, layout: 'fit', items: { xtype: 'htmleditor', enableColors: true, enableAlignments: true, enableLists: true, enableSourceEdit: true [...] Read More...

I received the following email from a reader: Thank you very much for finding time to read my mail. I came across your blog http://garysieling.com/blog/extjs-pie-chart-example It would be greatly helpful, if you could provide me with the code of binding the data dynamically to the DS. I have already generated the data in JSON format via [...] Read More...

Problem You want to display a line chart. Solution Use the Ext.chart.Chart.   Ext.onReady(function() { Ext.define('PopulationPoint', { extend: 'Ext.data.Model', fields: ['state', 'population'] });   var store = Ext.create('Ext.data.Store', { model: 'PopulationPoint', data: [{ state:"Alabama", population: 4802740}, { state:"Alaska", population: 722718}, { state:"Arizona", population: 6482505}, { state:"Arkansas", population: 2937979}, { state:"California", population: 37691912}, { state:"Colorado", population: [...] Read More...

Problem You want to display a grid with a tooltip. Tested in ExtJS Version 4.1.1 Screenshot Solution Set the “tip” property on the GridPanel’s view (panel.getView().tip). view = this.getView(); view.tip = Ext.create('Ext.tip.ToolTip', { target: view.el, delegate: view.itemSelector, trackMouse: true, renderTo: Ext.getBody(), listeners: { beforeshow: function updateTipBody(tip) { tip.update("Tooltip!"); } } Discussion The example ExtJS provides [...] Read More...

I went to the first Philadelphia Node.JS meetup last night hosted by Zivtech. It was a mix of local developers at various stages in their careers. There were several informative impromptu presentations, including a demonstration of file transfer using web sockets and Node.JS and sending Apple IOS push notifications from Node.JS. Useful libraries: Socket.io – [...] Read More...

I’ve encountered several instances where ExtJS charts fail to render in non-obvious ways in IE- these are all with the 3.x branch, but may apply elsewhere. The charts are rendered using a Flash SWF file repurposed from YUI libraries. By default, ExtJS pulls the SWF from a Yahoo! CDN, unless configured otherwise. Recently YUI upgraded [...] Read More...