Random Recipes

Ext JS 4 First Look Loiane Groner Chapter No. 4 " Upgraded Charts " In this package, you will find: A Biography of the author of the book A preview chapter from the book, Chapter 4 "Upgraded Charts" Asynopsisofthebook’scontent Information on where to buy this book About the Author Loiane Groner , Brazilian-born (and raised), lives in São Paulo and began her IT career developing Java web applications. While at university, she demonstrated great interest in IT. She worked as an assistant teacher for two and a half years, teaching algorithms, data structures, and computing theory. She represented her university at the ACM International Collegiate Programming Contest Brazilian Finals (South America Regionals) and also worked as a Student Delegate of SBC (Brazilian Computing Society) for two years. She won a merit award in her senior year for being one of the top three students with better GPAs in the Computer Science department and also graduated with honors. After three years of Java development, she got a job opportunity at IBM Brazil, where she developed Java and Ext JS applications for an American company, for two years. At IBM, she became the Team Leader and was responsible for training new hires in Java, XML, and Ext JS technologies. Nowadays, she works as a Senior Software Engineer at Citibank Brazilian Technology Solutions Center, where she develops overseas solutions. She also works as an independent Ext JS consultant and coach. &#x/MCI; 0 ;&#x/MCI; 0 ;Loiane is passionate about Ext JS and Java, and she is the CampinasJUG (Campinas Java Users Group) Leader and ESJUG (Espirito Santo Java Users Group) coordinator; both are Brazilian JUGs. Loiane also contributes to the software development community through her blogs, (English) and (PortugueseBR), where she writes about careers in IT, Ext JS, Spring Framework, and general development notes. I would like to thank my parents for giving me education, guidance, and Ext JS 4 First Look Ext JS 4 introduces major changes compared to Ext JS 3. There is a new data package, &#x/MCI; 0 ;&#x/MCI; 0 ;Chapter 6, Ext JS 4 Themes, presents a step- -step approach on how to customize and create new themes using the new CSS architecture, which uses Sass and Compass. Chapter 7, MVC Application Architecture, provides an overview about the new MVC architecture applied to Ext JS 4 applications. This chapter covers how to structure an application using the MVC pattern and how to create and organize the components and les in an Ext project structure. This chapter demonstrates a step-by-step approach on how to create an MVC Ext JS 4 application. Appendix A, Ext JS 4 Versus Ext JS 3 Class Names, presents a comparison list between Ext JS 3 classes and Ext JS 4 class names. In this new version of Ext JS, the names of some classes have changed, and this list can help you find the new Ext JS 4 class names Ext JS 4 has vastly improved on charts and drawing packages. Ext JS 3 introduced 144 ]Ext JS 4 chart upgrades Ext JS 3 introduced chart components. Although it was a great improvement for component was not entirely implemented with JavaScript; it le to run. This Flash le is supported by the YUI Chart Flash le The use of a Flash le to render charts was an issue, because the client had to le. All charts are implemented with JavaScript, and now you can run them on any The draw package contains 7 classes to help you create graphics in Ext JS 4, which For further reading about SVG, please go to 145 ] The Component class is the superclass for the class . Besides the fact that the items Ext.draw.Component We can draw some types of object . Some of them are listed as follows: 148 ] When we execute the preceding code (also add it to a window 400x230 pixels), the The next Sprite we are going to work on is 149 ]The next Sprite we are going to draw is a spiral, but we do not have any Sprite type that draws a spiral for us. So, to draw it, we are going to use a Sprite of type path. We are going to use an SVG path:var drawComponent = Ext.create('Ext.draw.Component', { viewBox: true, items: [{ type: 'path', path: ['M153 334', 'C153 334 151 334 151 334', 'C151 339 153 344 156 344', 'C164 344 171 339 171 334', 'C171 322 164 314 156 314', 'C142 314 131 322 131 334', 'C131 350 142 364 156 364', 'C175 364 191 350 191 334', 'C191 311 175 294 156 294', 'C131 294 111 311 111 334', 'C111 361 131 384 156 384', 'C186 384 211 361 211 334', 'C211 300 186 274 156 274'], fill: 'white', stroke: 'red', "stroke-width": "2" }]}); When we use a Sprite of type to You can also apply transformations to a draw. For example, we will use the text rst transformation is the 151 ]Another transformation we can perform is the scale transformation : 152 ]We will draw an MVC diagram using the Sprites mentioned previously, as displayed draw.Component type: 'text', text: 'Model', 154 ] rotate: { degrees: 135 // line in diagonal / } }]});Ext.create('Ext.Window', { title: 'MVC Diagram', width: 260, height: 250, layout: 'fit', items: [drawComponent]}).show(); We also used two First, we will see an example of how to implement an Ext JS 3 chart: items: { xtype: 'columnchart', saying that the preceding chart is a Column Chart. We also declared a 156 ]The Ext JS 4 chart package is independent of the draw package, except for the fact Chart Store Legend Axis Series Callout nes the axes for a property , which is the legend box and its property . A series can be a Pie, renderer: function(storeItem, item) { If you compare the Ext JS 3 and Ext JS 4 screenshots, you will note that even the style class is used to con gure a gure and customize a legend for a chart: 159 ]Some conÞ guration options are listed as follows: package contains seven classes: The The coordinates. The The Column, Area, Scatter, and Line charts. Gauge Axis Radial Category Numeric Time Category, Numeric, and Time axes class . This means guration options in common: : The position of the axis—it can use the following values: (Ticks) divide an axis into equal sections by a step whose 161 ]The following is an example of how to conÞ gure the chart property : The 162 ]If you have to work with time values, you can use the Time axis . But, use it only Some options you can use to con gure a elds to group. axis is used with the gure a Pie Gauge Cartesian Radar Area Bar Line Scatter Column 164 ]The Series class is the super class (abstract class), which contains some basic Operating systemVisits width: 140, height: 28, YearWindowsLinuxMac OS 215481986418459 324582847515874 178562541820673 26352918323584 168 ] ['2008','21548','19864','18459'], ['2009', '32458','28475','15874'], ['2010', '17856','25418','20673'], ['2011','2635','29183','23584'] ]}); Now, we will declare the Grouped Bar Chart: A stacked bar chart is a grouped bar chart, but with one difference: a property. The title: 'Year' }, { series: [{ type: 'bar', 171 ] If we execute the preceding code, we will have the following output: has vertical, rectangular bars proportional to the value they fields: ['os'], title: 'Operational System' series: [{ type: 'column', 173 ]You can also have a grouped or stacked Column chart. The principle is the same that is applied to the grouped and stacked Bar chart.Line Chart A Visits January 4875 February 3854 March 2358 April 5693 May 6751 June 5231 July 8721 August 8642 September 7231 October 5642 November 8642 December 6154 fields: [ ['July', '8721'], ['August', '8642'], 175 ] In the preceding code, we have a chart. 176 ] } }, axis: 'left', xField: 'month', yField: 'visits', smooth: true, markerConfig: { type: 'cross', radius: 5, 'fill': '#f00' }, showMarkers: true, fill: true}] If we execute the preceding code, we will have the following output: Visits in 2009Visits in 2010 data: [ ['January','4875','3587'], 179 ] axis: 'left', smooth: true, xField: 'month', yField: 'visits2009', markerConfig: { type: 'cross', size: 5, radius: 4, 'stroke-width': 0 } }, { type: 'line', highlight: { size: 7, radius: 7 }, axis: 'left', smooth: true, xField: 'month', yField: 'visits2010', markerConfig: { type: 'circle', size: 5, radius: 4, 'stroke-width': 0 } }]}); To display a 180 ] The preceding code will output the following chart: fields: ['month'], title: 'Month of the Year' 182 ]Grouped Area Chart 183 ] In the preceding code, to implement a elds. Unlike with the 184 ] minimum: 0, position: 'left', fields: ['visits'], title: 'Number of Visits', minorTickSteps: 1 }, { type: 'Category', position: 'bottom', fields: ['month'], title: 'Month of the Year' }], series: [{ type: 'scatter', highlight: { size: 7, radius: 7 }, axis: 'left', xField: 'month', yField: 'visits' }]}); The preceding code is a sample of how to con gure a scatter chart. We have to gure the other series options. gure a 185 ]Grouped Scatter Chart Now we will see how to add a second variable to a into sectors, with each one representing a proportion. The subclass of For the animate: true, series: [{ type: 'pie', 187 ] label: { field: 'os', display: 'rotate', contrast: true, font: '18px Arial' }, highlight: { segment: { margin: 20 } } }]}); To implement a guration is applied automatically, Þ gure: A 190 ] yField: 'visits', showInLegend: true, showMarkers: true, highlight: true, markerConfig: { radius: 4 }, style: { 'stroke-width': 2, fill: 'none' } }]}); The Radar chart uses the Radial axis. To declare a radar series, Þ rst we need 191 ]Grouped Radar Chart To implement a 192 ] The Store we used for the previous example is the same as Grouped Line Chart. All the conÞ guration options are very similar to the class and uses a guration. reading. But, if you want to display a needle to point is the exact location of the package contains a package called nd there are two classes: class is a base class for creating a custom theme in Ext JS 4. the spacing: 2, padding: 5, }, seriesLabel: { "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"], seriesThemes: [{ 199 ] The preceding code represents the base theme used in every Ext JS 4 chart. The guration properties are self-explanatory. The following chart maps some theme con g options: gure each part of Where to buy this book You can buy Ext JS 4 First Look from the Packt Publishing website: http://www.packtpub.com/ext- -4-first-look/book Free shipping to the US, UK, Europe and selected Asian countries. For more information, please read our shipping policy . Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet book retailers. www.PacktPub.com