ext js 4 plugin and extension development mohammad 2013 09 20 Lập trình Java

CuuDuongThanCong.com https://fb.com/tailieudientucntt Ext JS Plugin and Extension Development A hands-on development of several Ext JS plugins and extensions Abdullah Al Mohammad BIRMINGHAM - MUMBAI CuuDuongThanCong.com https://fb.com/tailieudientucntt Ext JS Plugin and Extension Development Copyright © 2013 Packt Publishing All rights reserved No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews Every effort has been made in the preparation of this book to ensure the accuracy of the information presented However, the information contained in this book is sold without warranty, either express or implied Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals However, Packt Publishing cannot guarantee the accuracy of this information First published: September 2013 Production Reference: 1130913 Published by Packt Publishing Ltd Livery Place 35 Livery Street Birmingham B3 2PB, UK ISBN 978-1-78216-372-5 www.packtpub.com Cover Image by Suresh Mogre (suresh.mogre.99@gmail.com) CuuDuongThanCong.com https://fb.com/tailieudientucntt Credits Author Abdullah Al Mohammad Reviewers Adrian Teodorescu Project Coordinator Joel Goveya Proofreader Lucy Rowland Li Xudong Indexer Acquisition Editor Mariammal Chettiyar Usha Iyer Production Coordinator Commissioning Editor Nilesh R Mohite Neha Nagwekar Cover Work Technical Editors Nilesh R Mohite Sampreshita Maheshwari Menza Mathew Copy Editor Sayanee Mukherjee Alfida Paiva Adithi Shetty Laxmi Subraniam CuuDuongThanCong.com https://fb.com/tailieudientucntt About the Author Abdullah Al Mohammad lives in Rajshahi, Bangladesh He is a senior freelance software developer having over six years experience He graduated from Rajshahi University of Engineering and Technology with a B.Sc in Computer Science and Engineering and began working at HawarIT as a software engineer He worked there for four years and gained solid experience and then started his career as a freelance developer I would like to thank my family, especially my mom and my elder brother, who always provided me with proper guidelines, and my wife for her constant support I would also like to thank my excolleagues from whom I've learned a lot and with whom I've enjoyed working I would also like to thank Sencha team members as it is because of their hard work I got this loving framework CuuDuongThanCong.com https://fb.com/tailieudientucntt About the Reviewers Adrian Teodorescu is a professional software developer with more than 15 years' experience Since 2009, Adrian has been devoting most of his time to Sencha libraries, and he is currently focused on building custom components for Ext JS and Sencha Touch He developed a pivot table for Ext JS, which you can test on his website: www.mzsolutions.eu To all the people who believed in me Li Xudong is a front-end developer in Beijing, China, and is skilled in JavaScript, CSS, HTML, NodeJS, and Python, and wants to make things better CuuDuongThanCong.com https://fb.com/tailieudientucntt www.PacktPub.com Support files, eBooks, discount offers and more You might want to visit www.PacktPub.com for support files and downloads related to your book Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy Get in touch with us at service@packtpub.com for more details At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks TM http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library Here, you can access, read and search across Packt's entire library of books Why Subscribe? • Fully searchable across every book published by Packt • Copy and paste, print and bookmark content • On demand and accessible via web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books Simply use your login credentials for immediate access CuuDuongThanCong.com https://fb.com/tailieudientucntt Table of Contents Preface 1 Chapter 1: Plugins and Extensions What is a plugin? What is an extension? Differences between an extension and a plugin Choosing the best option By configuring an existing class By creating a subclass or an extension By creating a plugin Building an Ext JS plugin Building an Ext JS extension 11 Summary 14 Chapter 2: Ext JS-provided Plugins and Extensions 15 Chapter 3: Ext JS Community Extensions and Plugins 31 The MultiSelect extension 15 The ItemSelector extension 17 The TreeViewDragDrop plugin 19 The CheckColumn extension 21 The CellEditing plugin 23 The RowEditing plugin 26 The LiveSearchGridPanel extension 28 Summary 30 The Callout extension The SmartLegend extension The TitleChart extension The BoxSelect extension The MultiDate extension The MultiMonth extension CuuDuongThanCong.com https://fb.com/tailieudientucntt 31 33 34 35 37 38 Table of Contents The MultiSelect extension 39 The TinyMCETextArea extension 40 The FilterBar plugin 41 The DragSelector plugin 42 Summary 43 Chapter 4: Labeled Spinner 45 Chapter 5: Chart Downloader 51 Chapter 6: Grid Search 59 Chapter 7: Input Field with Clear Button 69 Chapter 8: Message Bar 81 Chapter 9: Intuitive Multiselect Combobox 89 Functional requirements 45 Planning and coding the labeled spinner 46 Summary 50 Functional requirements 51 Planning and coding the chart downloader 51 Summary 57 Functional requirements Planning and coding the grid search Summary 59 60 68 Functional requirements 69 Planning and coding of the clear button 70 Summary 79 Functional requirements Planning and coding the message bar Summary 81 82 88 Features of BoxSelect 90 Using BoxSelect 90 Basic configuration 90 Templates 91 Single value selection 93 Remote query with unknown values 94 Adding new records with autosuggestion 95 BoxSelect specific configurations 97 Value handling and events 99 Summary 99 Index 101 [ ii ] CuuDuongThanCong.com https://fb.com/tailieudientucntt Preface In this modern world of JavaScript, Ext JS offers a vast collection of cross-browser utilities, a great collection of UI widgets, charts, data object stores, and much more When developing an application, we mostly look for the best support for the functionality and components that offer the framework But we almost always face the situation when the framework does not have the specific functionality or component that we need Fortunately, Ext JS has a powerful class system that makes it easy to extend an existing functionality or component, or to build new functionalities or components In this book, we start by providing a very clear concept of Ext JS plugins and extensions with examples, going through several Ext JS libraries and community-provided plugins and extensions and several hands-on developments of real-life, useful Ext JS plugins and extensions What this book covers Chapter 1, Plugins and Extensions, introduces and defines the Ext JS plugins and extensions, the differences between them, and shows how to develop a plugin and an extension with examples Chapter 2, Ext JS-provided Plugins and Extensions, introduces some of the very useful and popular plugins and extensions available within the Ext JS library Chapter 3, Ext JS Community Extensions and Plugins, introduces some of the popular Ext JS community extensions and plugins Chapter 4, Labeled Spinner, goes through hands-on development of an Ext JS extension called Labeled spinner field This chapter shows how we can extend the Ext.form.field Spinner class, and add functionality so that this extension can show a configurable label beside the value within the spinner field and some more advanced features CuuDuongThanCong.com https://fb.com/tailieudientucntt Chapter In the preceding screenshot, we can see that the BoxSelect extension is working fine and is showing the selected items with the configured labelTpl and listConfig comboboxes Single value selection The BoxSelect extension is targeted for multiple selections, but it also supports single selection by setting the multiSelect option to false If we need the single selection option by default, we can add the following line of code before the BoxSelect extension is created: Ext.ux.form.field.BoxSelect.prototype.multiSelect = false; Now, let us configure the BoxSelect extension for a single selection: { "fieldLabel": "Select a state", "multiSelect": false, "filterPickList": true, "displayField": "name", "valueField": "abbr", "width": 500, "labelWidth": 130, "emptyText": "Pick a state, any state", "store": "States", "queryMode": "local" } And the output should be as follows: In the preceding screenshot, we can now select only a single value within the combobox when the multiSelect option is set to false [ 93 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt Intuitive Multiselect Combobox Remote query with unknown values When we set the queryMode option to remote and the forceSelection option to true, and we pass a value to the BoxSelect extension that is not in the store, a query will be sent to the store's configured proxy "x" with the name of the valueField option and a set of unknown values separated by the configured delimiter as the parameters For example, if the valueField option is abbr, the delimiter value is |, and unknown values 'NC', 'VA', and, 'ZZ' are set, the following parameters will be passed to the store's configured proxy: { abbr: 'NC|VA|ZZ' } This attempt to load the unknown values will be performed only once per initValue/setValue call The records which are still unknown after this request will be removed from the field's value, but all known values will be retained In the preceding example, the 'ZZ' entry was discarded Now, let us configure the BoxSelect extension for remote stores: { "fieldLabel": "With Remote Store", "store": "RemoteStates", "pageSize": 25, "queryMode": "remote", "delimiter": "|", "value": "NC|VA|ZZ", "triggerOnClick": false, "labelTpl": "{name} ({abbr})", "listConfig": { "tpl": [ "

", "
• {name}: {slogan}
", "

" ] }, "displayField": "name", "valueField": "abbr", "width": 500, "labelWidth": 130 } [ 94 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt Chapter Following is the screenshot where we have used this configuration for the BoxSelect extension: In the preceding screenshot we can see that our configured BoxSelect is working fine for the remote store, and the value for 'NC' and 'VA' is retrieved where the value for 'ZZ' is discarded Adding new records with autosuggestion In this example we will show the use of forceSelection, when set to false, to enable the entry of new values with autosuggestion provided from the attached store The new records will be created using the user input for both the configured displayField and valueField These new records are not added to the ComboBox store automatically New entries can be created by any of the following four ways: • When we type the configured delimiter which is default to ',', the value that we entered before the delimiter will be used to create a new record • When we paste texts in to the field, the value will be split according to the configured delimiter, which is default to ',' and any values entered will be parsed in to new/existing records • The createNewOnEnter option is set to false by default If set to true, a new entry will be created when we press the Enter key This configuration option only applies if the forceSelection option is set to false • The createNewOnBlur option is set to false by default If set to true, a new entry will be created when the focus leaves the input field This configuration option only applies if forceSelection is set to false, and is superseded by autoSelect and selectOnTab [ 95 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt Intuitive Multiselect Combobox Now, let us configure the BoxSelect extension for autosuggestion: { "fieldLabel": "Enter multiple email addresses", "width": 500, "growMin": 75, "growMax": 120, "labelWidth": 130, "store": [ "test@example.com", "somebody@somewhere.net", "johnjacob@jingleheimerschmidts.org", "rumpelstiltskin@guessmyname.com", "fakeaddresses@arefake.com", "bob@thejoneses.com" ], "queryMode": "local", "forceSelection": false, "createNewOnEnter": true, "createNewOnBlur": true, "filterPickList": true, "displayField": "name", "valueField": "abbr" } Using this configuration we will get the BoxSelect component as follows: In the preceding screenshot, we can see how the BoxSelect component is offering an autosuggestion list where we can select those list items or create new records [ 96 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt Chapter BoxSelect specific configurations The following configuration options are specific to the BoxSelect extension: • The createNewOnEnter option is set to false by default If this option is set to true and the forceSelection option is set to false, a new entry will be created as soon as the user presses the Enter key • The createNewOnBlur option is set to false by default If this option is set to true and the forceSelection option is set to false, a new entry will be created when the focus leaves the input field This configuration option is superseded by autoSelect and selectOnTab • The stacked option is set to false by default If this option is set to true, the labeled items will fill the available width of the list instead of being only as wide as the displayed value • The pinList option is set to true by default If this option is set to false, the pick list will automatically collapse after a selection is made, when multiSelect is true This mimics the default behavior when multiSelect is false • The triggerOnClick option is set to true by default When the option is set to true, the pick list will emulate a trigger when clicking in the field just like when a ComboBox component is set with the editable option to false • The grow option is set to true by default If this option is set to false, the list of selections will scroll when necessary, and the height of the field will not change This setting has no effect if a fixed height is set for the field, either directly (for example, through a height configuration), or by the containing layout • The growMin option is set to false by default If this option is set to true, any numeric value will be used for the field's minimum height • The growMax option is set to false by default If this option is set to true, any numeric value will be used for the field's maximum height and the list of selections will scroll when necessary • The filterPickList option is set to false by default If this option is set to true, the currently selected values will be hidden from the expanded pick list [ 97 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt Intuitive Multiselect Combobox Now, let us configure the BoxSelect component by changing some of the default values to see the effect: { "fieldLabel": "Select multiple states", "displayField": "name", "width": 500, "labelWidth": 130, "store": "States", "queryMode": "local", "valueField": "abbr", "value": "WA, TX", "stacked": true, "pinList": false, "filterPickList": true } Following is the screenshot of the BoxSelect component where we've used this configuration: In the preceding screenshot, we can see that the labeled items are filling the full width available as we set the stacked option to true The pick list is automatically collapsing as soon as a selection is made as we set the pinList option to false, and the current selected values are hidden from the expanded pick list as we set the filterPickList option to true [ 98 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt Chapter Value handling and events The following methods are available within BoxSelect, which helps to work with the value of the combobox: • addValue(mixedValue): Adds a value or values to the current value of the field • removeValue(mixedValue): Removes a value or values from the current value of the field • getValueRecords(): Returns the records for the field's current value • getSubmitData(): Allows submitting the field as a JSON encoded array Also the BoxSelect component provides the following two events for managing the selected items: • valueSelectionChange • valueFocusChange Summary In this chapter we've explored the features and also went through the usage of the BoxSelect combobox extension We've learned how to configure the BoxSelect extension and its proper usage We can see that by using Ext JS's extension feature we can easily use the full strength of the Ext JS library's ComboBox field and can add our own custom functionality to fulfill our needs Throughout this book we have learned the fundamentals of Ext JS plugins and extensions, we have introduced some of the popular Ext JS libraries and community provided plugins and extensions, and we have also provided several hands-on real world plugins and extensions development with proper explanations and code We now have clear knowledge about the proper usage and development of Ext JS plugins and extensions [ 99 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt CuuDuongThanCong.com https://fb.com/tailieudientucntt Index A addDownloadButton function 53 addEscListener function 78 addListeners function 72 addValue(mixedValue) method 99 afterRender event handler 12 afterRender handler 82, 83 autoSelect option 97 autosuggestion new records, adding with 95, 96 B BoxSelect extension about 35, 36, 90 configuration 90 configuration option 97, 98 event 99 features 36, 90 new records, adding with autosuggestion 95, 96 reference link 36 remote query, setting 94, 95 single value selection 93 template 91, 92 URL, for downloading 36 using 90 value handling 99 C calculateClearButtonPosition function 75 Callout extension about 32 reference link 32 URL, for downloading 32 CuuDuongThanCong.com CellEditingGrid class 25 CellEditing plugin about 23, 25 URL, for documentation 25 chart downloader coding 51-56 functional requirements 51 planning 51-56 CheckColumn extension about 21, 23 URL, for documentation 23 clear button coding 70-79 functional requirements 69 planning 70-79 clearMessage function 83, 86 ComboBox control 90 config property 47 configuration, existing class configuration option, BoxSelect extension 97, 98 createClearButtonEl function 71 createNewOnBlur option 97 createNewOnEnter option 97 D ddReorder property 15 destroy method DragSelector plugin about 42 grid rows, selecting 42 reference link 43 URL, for downloading 43 DragZone class copy property 19 https://fb.com/tailieudientucntt ddel property 19 item property 19 property 19 records property 19 view property 19 E event, BoxSelect extension valueFocusChange 99 valueSelectionChange 99 existing class configuring extend keyword 12 Ext.form.field.Spinner class 45 Ext JS class Ext JS Community about 31 BoxSelect extension 35, 36 Callout extension 31, 32 DragSelector plugin 42 extension 31 FilterBar plugin 41 MultiDate extension 37, 38 MultiMonth extension 38, 39 MultiSelect extension 39, 40 plugin 31 SmartLegend extension 33, 34 TinyMCETextArea extension 40, 41 TitleChart extension 34, 35 Ext JS component existing class, configuring Ext JS extension, creating Ext JS plugin, creating functionality, changing Ext JS extension about 5, BoxSelect 89-99 building 11-13 CheckColumn extension 21, 23 creating differentiating, with Ext JS plugin ItemSelector extension 17-19 labeled spinner 45-49 LiveSearchGridPanel extension 28, 29 message bar 81-87 MultiSelect extension 15, 17 Ext JS library Ext JS extension 15 Ext JS plugin 15 Ext JS plugin about 5, building 8, 10 CellEditing plugin 23, 25 chart downloader 51-56 clear button 69-79 creating differentiating, with Ext JS extension grid search 59-68 RowEditing plugin 26, 27 TreeViewDragDrop plugin 19-21 F fieldHasScrollBar function 76 FilterBar plugin about 41 features 41 URL, for downloading 42 filterPickList option 97 forceSelection option 97 G getDateFormat function 67 getLabeledValue function 48, 49 getMultiSelectValue function 17 getSubmitData() method 99 getToolbar function 53, 61 getValue function 19, 48, 49 getValueRecords() method 99 grid search coding 60-68 functional requirement 59 planning 60-68 growMax option 97 growMin option 97 H handleAfterRender function 10, 52, 71, 72, 75-78 handleChange function 10, 12 [ 102 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt I init function 5, 7, 10, 52, 61, 70 initMenu function 64 about 65 defining 64 isButtonCurrentlyVisible function 77 ItemSelector extension about 17-19 URL, for documentation 19 L reference link 40 URL, for documentation 17 URL, for downloading 40 MultiSelectFormPanel class 17 N new records adding, with autosuggestion 95, 96 O labeled spinner about 45 coding 46-49 functional requirements 45 planning 46-49 labelTpl template 91 listConfig template 91 LiveSearchGrid class 29 LiveSearchGridPanel extension about 28, 29 URL, for documentation 29 onBlur handler 48 onKeyUp handler defining 64 on method onRender function 61-64 onSpinDown function 46, 48 onSpinUp function 46, 48 onTriggerClear function 65 onTriggerClear handler 63 onTriggerClick event 63 onTriggerSearch function 66, 67 defining 66 M P Massachusetts Institute of Technology (MIT) 32 message bar coding 82-87 functional requirements 81 planning 82-87 mouseout event handler 73 mouseover event handler 73 MultiDate extension about 37, 38 features 37, 38 reference link 38 URL, for downloading 38 MultiMonth extension about 38, 39 features 38 reference link 39 URL, for downloading 39 MultiSelect extension about 15, 17, 39 features 39 pinList option 97 R remote query setting 94 setting, with unknown values 95 removeValue(mixedValue) method 99 repositionClearButton function 75 RowEditing plugin about 26, 27 URL, for documentation 27 S saveChart function 54 selectOnTab option 97 setIcon function 86 setMessageData function 85 setMessage function 84 setText function 86 setValue function 47, 48 [ 103 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt shouldButtonBeVisible function 77 showMessage function 84 single value selection 93 SmartLegend extension about 33, 34 features 33 reference link 34 URL, for downloading 34 stacked option 97 supportsCssTransition function 72 T template, BoxSelect extension 91, 92 textareafield component 8, 10 textfield component 79 TinyMCETextArea extension about 40, 41 reference link 41 TitleChart extension about 34, 35 configuration options 35 reference link 35 URL, for downloading 35 TreeView class 19 TreeViewDragDrop plugin about 19-21 URL, for documentation 21 triggerOnClick option 97 U updateMessageInfo function 10 V valueFocusChange event 99 value handling, BoxSelect extension 99 valueSelectionChange event 99 viewConfig method 20 [ 104 ] CuuDuongThanCong.com https://fb.com/tailieudientucntt Thank you for buying Ext JS Plugin and Extension Development About Packt Publishing Packt, pronounced 'packed', published its first book "Mastering phpMyAdmin for Effective MySQL Management" in April 2004 and subsequently continued to specialize in publishing highly focused books on specific technologies and solutions Our books and publications share the experiences of your fellow IT professionals in adapting and customizing today's systems, applications, and frameworks Our solution based books give you the knowledge and power to customize the software and technologies you're using to get the job done Packt books are more specific and less general than the IT books you have seen in the past Our unique business model allows us to bring you more focused information, giving you more of what you need to know, and less of what you don't Packt is a modern, yet unique publishing company, which focuses on producing quality, cutting-edge books for communities of developers, administrators, and newbies alike For more information, please visit our website: www.packtpub.com About Packt Open Source In 2010, Packt launched two new brands, Packt Open Source and Packt Enterprise, in order to continue its focus on specialization This book is part of the Packt Open Source brand, home to books published on software built around Open Source licences, and offering information to anybody from advanced developers to budding web designers The Open Source brand also runs Packt's Open Source Royalty Scheme, by which Packt gives a royalty to each Open Source project about whose software a book is sold Writing for Packt We welcome all inquiries from people who are interested in authoring Book proposals should be sent to author@packtpub.com If your book idea is still at an early stage and you would like to discuss it first before writing a formal book proposal, contact us; one of our commissioning editors will get in touch with you We're not just looking for published authors; if you have strong technical skills but no writing experience, our experienced editors can help you develop a writing career, or simply get some additional reward for your expertise CuuDuongThanCong.com https://fb.com/tailieudientucntt Learning Ext JS ISBN: 978-1-84951-684-6 Paperback: 434 pages Sencha Ext JS for a beginner Learn the basics and create your first classes Handle data and understand the way it works, create powerful widgets and new components Dig into the new architecture defined by Sencha and work on real world projects Instant Ext JS Starter [Instant] ISBN: 978-1-78216-610-8 Paperback: 56 pages Find out what Ext JS actually is, what you can with it, and why it's so great Learn something new in an Instant! A short, fast, focused guide delivering immediate results Install and set up the environment with this quick Starter guide Learn the basics of the framework and built-in utility functions Use MVC architecture, components, and containers Please check www.PacktPub.com for information on our titles CuuDuongThanCong.com https://fb.com/tailieudientucntt Mastering Ext JS ISBN: 978-1-78216-400-5 Paperback: 358 pages Learn how to build powerful and professional applications by mastering the Ext JS framework Build an application with Ext JS from scratch Learn expert tips and tricks to make your web applications look stunning Create professional screens such as login, menus, grids, tree, forms, and charts Sencha Architect App Development ISBN: 978-1-78216-981-9 Paperback: 120 pages Develop your own Ext JS and Sencha Touch application using Sencha Architect Use Sencha Architect's features to improve productivity Create your own application in Ext JS and Sencha Touch Simulate, build, package and deploy your application using Sencha Command and Sencha Architect Please check www.PacktPub.com for information on our titles CuuDuongThanCong.com https://fb.com/tailieudientucntt ... various locations, including top, bottom, left, right, top-left, top-right, bottom-left, bottom-right, left-top, left-bottom, right-top, right-bottom • Position itself relative to a target Ext.Element... Published by Packt Publishing Ltd Livery Place 35 Livery Street Birmingham B3 2PB, UK ISBN 97 8-1 -7 821 6-3 7 2-5 www.packtpub.com Cover Image by Suresh Mogre (suresh.mogre.99@gmail.com) CuuDuongThanCong.com... can be reordered via the drag-and-drop method, if the ddReorder property of this class is set to true CuuDuongThanCong.com https://fb.com/tailieudientucntt Ext JS-provided Plugins and Extensions