[{"data":1,"prerenderedAt":1319},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002F2014-02-14-extjs-project-with-netbeans":406,"\u002Fblog\u002F2014-02-14-extjs-project-with-netbeans-surround":1308},[4,8,39,52,264,310,319,380,397],{"title":5,"path":6,"stem":7},"Notes","\u002Fnotes","1.notes\u002Findex",{"title":9,"path":10,"stem":11,"children":12,"page":30},"Architecture","\u002Fnotes\u002Farchitecture","1.notes\u002Farchitecture",[13,17,31,35],{"title":14,"path":15,"stem":16},"API Management","\u002Fnotes\u002Farchitecture\u002Fapi-management","1.notes\u002Farchitecture\u002Fapi-management",{"title":18,"path":19,"stem":20,"children":21,"page":30},"Data","\u002Fnotes\u002Farchitecture\u002Fdata","1.notes\u002Farchitecture\u002Fdata",[22,26],{"title":23,"path":24,"stem":25},"ERD","\u002Fnotes\u002Farchitecture\u002Fdata\u002Ferd","1.notes\u002Farchitecture\u002Fdata\u002Ferd",{"title":27,"path":28,"stem":29},"SCWD","\u002Fnotes\u002Farchitecture\u002Fdata\u002Fscwd","1.notes\u002Farchitecture\u002Fdata\u002Fscwd",false,{"title":32,"path":33,"stem":34},"Microservices","\u002Fnotes\u002Farchitecture\u002Fmicroservices","1.notes\u002Farchitecture\u002Fmicroservices",{"title":36,"path":37,"stem":38},"OAuth","\u002Fnotes\u002Farchitecture\u002Foauth","1.notes\u002Farchitecture\u002Foauth",{"title":40,"path":41,"stem":42,"children":43,"page":30},"Archive","\u002Fnotes\u002Farchive","1.notes\u002Farchive",[44,48],{"title":45,"path":46,"stem":47},"Google Web Toolkit","\u002Fnotes\u002Farchive\u002Fgwt","1.notes\u002Farchive\u002Fgwt",{"title":49,"path":50,"stem":51},"Jekyll","\u002Fnotes\u002Farchive\u002Fjekyll","1.notes\u002Farchive\u002Fjekyll",{"title":53,"path":54,"stem":55,"children":56,"page":30},"Development","\u002Fnotes\u002Fdevelopment","1.notes\u002Fdevelopment",[57,74,112,149,226,239,260],{"title":58,"icon":30,"path":59,"stem":60,"children":61,"page":30},"IDE","\u002Fnotes\u002Fdevelopment\u002Fide","1.notes\u002Fdevelopment\u002FIDE",[62,66,70],{"title":63,"path":64,"stem":65},"Jetbrains IDE","\u002Fnotes\u002Fdevelopment\u002Fide\u002Fjetbrains","1.notes\u002Fdevelopment\u002FIDE\u002Fjetbrains",{"title":67,"path":68,"stem":69},"NVIM","\u002Fnotes\u002Fdevelopment\u002Fide\u002Fnvim","1.notes\u002Fdevelopment\u002FIDE\u002Fnvim",{"title":71,"path":72,"stem":73},"tmux","\u002Fnotes\u002Fdevelopment\u002Fide\u002Ftmux","1.notes\u002Fdevelopment\u002FIDE\u002Ftmux",{"title":75,"path":76,"stem":77,"children":78,"page":30},"Algo","\u002Fnotes\u002Fdevelopment\u002Falgo","1.notes\u002Fdevelopment\u002Falgo",[79,83,87,91,95],{"title":80,"path":81,"stem":82},"Algorithms","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Falgorithms","1.notes\u002Fdevelopment\u002Falgo\u002Falgorithms",{"title":84,"path":85,"stem":86},"Data Structures","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fdata_structures","1.notes\u002Fdevelopment\u002Falgo\u002Fdata_structures",{"title":88,"path":89,"stem":90},"Kata","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fkata","1.notes\u002Fdevelopment\u002Falgo\u002Fkata",{"title":92,"path":93,"stem":94},"O-notation","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fo-notation","1.notes\u002Fdevelopment\u002Falgo\u002Fo-notation",{"title":96,"path":97,"stem":98,"children":99,"page":30},"Sorting","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting",[100,104,108],{"title":101,"path":102,"stem":103},"Buble Sort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fbublesort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fbublesort",{"title":105,"path":106,"stem":107},"Merge Sort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fmergesort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fmergesort",{"title":109,"path":110,"stem":111},"Quicksort","\u002Fnotes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fquicksort","1.notes\u002Fdevelopment\u002Falgo\u002Fsorting\u002Fquicksort",{"title":113,"path":114,"stem":115,"children":116,"page":30},"DataStructures","\u002Fnotes\u002Fdevelopment\u002Fdata_structures","1.notes\u002Fdevelopment\u002Fdata_structures",[117,121,125,129,133,137,141,145],{"title":118,"path":119,"stem":120},"ArrayList","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Farray_list","1.notes\u002Fdevelopment\u002Fdata_structures\u002Farray_list",{"title":122,"path":123,"stem":124},"Arrays","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Farrays","1.notes\u002Fdevelopment\u002Fdata_structures\u002Farrays",{"title":126,"path":127,"stem":128},"HashSet","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fhash_set","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fhash_set",{"title":130,"path":131,"stem":132},"LinkedList","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Flinked_list","1.notes\u002Fdevelopment\u002Fdata_structures\u002Flinked_list",{"title":134,"path":135,"stem":136},"PriorityQueue","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fpriority_queue","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fpriority_queue",{"title":138,"path":139,"stem":140},"Stack","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fstack","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fstack",{"title":142,"path":143,"stem":144},"TreeSet","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Ftree_set","1.notes\u002Fdevelopment\u002Fdata_structures\u002Ftree_set",{"title":146,"path":147,"stem":148},"Vector","\u002Fnotes\u002Fdevelopment\u002Fdata_structures\u002Fvector","1.notes\u002Fdevelopment\u002Fdata_structures\u002Fvector",{"title":150,"path":151,"stem":152,"children":153,"page":30},"Java","\u002Fnotes\u002Fdevelopment\u002Fjava","1.notes\u002Fdevelopment\u002Fjava",[154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222],{"title":155,"path":156,"stem":157},"Bit Operations","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fbit-operations","1.notes\u002Fdevelopment\u002Fjava\u002Fbit-operations",{"title":159,"path":160,"stem":161},"Cheatsheet","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fcheatsheet","1.notes\u002Fdevelopment\u002Fjava\u002Fcheatsheet",{"title":163,"path":164,"stem":165},"Clean Code","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fclean-code-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fclean-code-presentation",{"title":167,"path":168,"stem":169},"Java Datasource","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fdata-sources","1.notes\u002Fdevelopment\u002Fjava\u002Fdata-sources",{"title":171,"path":172,"stem":173},"Dependency Injection","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fdependency-injection-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fdependency-injection-presentation",{"title":175,"path":176,"stem":177},"Java SE","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjava-standard-edition","1.notes\u002Fdevelopment\u002Fjava\u002Fjava-standard-edition",{"title":179,"path":180,"stem":181},"Java Memory Model","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjmm","1.notes\u002Fdevelopment\u002Fjava\u002Fjmm",{"title":183,"path":184,"stem":185},"JPA","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fjpa","1.notes\u002Fdevelopment\u002Fjava\u002Fjpa",{"title":187,"path":188,"stem":189},"Keywords","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fkeywords","1.notes\u002Fdevelopment\u002Fjava\u002Fkeywords",{"title":191,"path":192,"stem":193},"Maven","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fmaven","1.notes\u002Fdevelopment\u002Fjava\u002Fmaven",{"title":195,"path":196,"stem":197},"Spring AOP","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-aop-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-aop-presentation",{"title":199,"path":200,"stem":201},"Spring Boot","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-boot","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-boot",{"title":203,"path":204,"stem":205},"Spring Core","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-core-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-core-presentation",{"title":207,"path":208,"stem":209},"Spring Data","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-data","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-data",{"title":211,"path":212,"stem":213},"Spring JDBC","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-jdbc","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-jdbc",{"title":215,"path":216,"stem":217},"Spring MVC","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-mvc-presentation","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-mvc-presentation",{"title":219,"path":220,"stem":221},"Spring Security","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Fspring-security","1.notes\u002Fdevelopment\u002Fjava\u002Fspring-security",{"title":223,"path":224,"stem":225},"Testing","\u002Fnotes\u002Fdevelopment\u002Fjava\u002Ftesting","1.notes\u002Fdevelopment\u002Fjava\u002Ftesting",{"title":227,"path":228,"stem":229,"children":230,"page":30},"Js","\u002Fnotes\u002Fdevelopment\u002Fjs","1.notes\u002Fdevelopment\u002Fjs",[231,235],{"title":232,"path":233,"stem":234},"JavaScript","\u002Fnotes\u002Fdevelopment\u002Fjs\u002Fjava-script","1.notes\u002Fdevelopment\u002Fjs\u002Fjava-script",{"title":236,"path":237,"stem":238},"NodeJS","\u002Fnotes\u002Fdevelopment\u002Fjs\u002Fnode-js","1.notes\u002Fdevelopment\u002Fjs\u002Fnode-js",{"title":240,"path":241,"stem":242,"children":243,"page":30},"PowerPlatform","\u002Fnotes\u002Fdevelopment\u002Fpower_platform","1.notes\u002Fdevelopment\u002Fpower_platform",[244,248,252,256],{"title":245,"path":246,"stem":247},"Power Apps","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-apps","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-apps",{"title":249,"path":250,"stem":251},"Power Automate","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-automate","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-automate",{"title":253,"path":254,"stem":255},"Power BI","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fpower-bi","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fpower-bi",{"title":257,"path":258,"stem":259},"Sharepoint","\u002Fnotes\u002Fdevelopment\u002Fpower_platform\u002Fsharepoint","1.notes\u002Fdevelopment\u002Fpower_platform\u002Fsharepoint",{"title":261,"path":262,"stem":263},"Python","\u002Fnotes\u002Fdevelopment\u002Fpython","1.notes\u002Fdevelopment\u002Fpython",{"title":265,"path":266,"stem":267,"children":268,"page":30},"Devops","\u002Fnotes\u002Fdevops","1.notes\u002Fdevops",[269,273,277,281,285,289,293,297,306],{"title":270,"path":271,"stem":272},"Containers","\u002Fnotes\u002Fdevops\u002Fcontainers","1.notes\u002Fdevops\u002Fcontainers",{"title":274,"path":275,"stem":276},"Curl","\u002Fnotes\u002Fdevops\u002Fcurl","1.notes\u002Fdevops\u002Fcurl",{"title":278,"path":279,"stem":280},"GCP","\u002Fnotes\u002Fdevops\u002Fgcp","1.notes\u002Fdevops\u002Fgcp",{"title":282,"path":283,"stem":284},"GIT","\u002Fnotes\u002Fdevops\u002Fgit","1.notes\u002Fdevops\u002Fgit",{"title":286,"path":287,"stem":288},"Jenkins","\u002Fnotes\u002Fdevops\u002Fjenkins","1.notes\u002Fdevops\u002Fjenkins",{"title":290,"path":291,"stem":292},"Kubernetes","\u002Fnotes\u002Fdevops\u002Fkubernetes","1.notes\u002Fdevops\u002Fkubernetes",{"title":294,"path":295,"stem":296},"Linux","\u002Fnotes\u002Fdevops\u002Flinux","1.notes\u002Fdevops\u002Flinux",{"title":298,"path":299,"stem":300,"children":301,"page":30},"Os","\u002Fnotes\u002Fdevops\u002Fos","1.notes\u002Fdevops\u002Fos",[302],{"title":303,"path":304,"stem":305},"MAC OS","\u002Fnotes\u002Fdevops\u002Fos\u002Fmacos","1.notes\u002Fdevops\u002Fos\u002Fmacos",{"title":307,"path":308,"stem":309},"WSL","\u002Fnotes\u002Fdevops\u002Fwsl","1.notes\u002Fdevops\u002Fwsl",{"title":311,"path":312,"stem":313,"children":314,"page":30},"Hardware","\u002Fnotes\u002Fhardware","1.notes\u002Fhardware",[315],{"title":316,"path":317,"stem":318},"Keyboard","\u002Fnotes\u002Fhardware\u002Fkeyboard","1.notes\u002Fhardware\u002Fkeyboard",{"title":320,"path":321,"stem":322,"children":323,"page":30},"Homelab","\u002Fnotes\u002Fhomelab","1.notes\u002Fhomelab",[324,328,337,350],{"title":325,"path":326,"stem":327},"Proxmox","\u002Fnotes\u002Fhomelab\u002F_-proxmox-1","1.notes\u002Fhomelab\u002F_ proxmox 1",{"title":329,"path":330,"stem":331,"children":332,"page":30},"Cloudflare","\u002Fnotes\u002Fhomelab\u002Fcloudflare","1.notes\u002Fhomelab\u002Fcloudflare",[333],{"title":334,"path":335,"stem":336},"Cloudflare Workers","\u002Fnotes\u002Fhomelab\u002Fcloudflare\u002Fworkers","1.notes\u002Fhomelab\u002Fcloudflare\u002Fworkers",{"title":338,"path":339,"stem":340,"children":341,"page":30},"HomeAssistant","\u002Fnotes\u002Fhomelab\u002Fhome_assistant","1.notes\u002Fhomelab\u002Fhome_assistant",[342,346],{"title":343,"path":344,"stem":345},"EspHome debugger","\u002Fnotes\u002Fhomelab\u002Fhome_assistant\u002Fesphome-debugger","1.notes\u002Fhomelab\u002Fhome_assistant\u002Fesphome-debugger",{"title":347,"path":348,"stem":349},"GIT integration","\u002Fnotes\u002Fhomelab\u002Fhome_assistant\u002Fgit-integration","1.notes\u002Fhomelab\u002Fhome_assistant\u002Fgit-integration",{"title":325,"path":351,"stem":352,"children":353},"\u002Fnotes\u002Fhomelab\u002Fproxmox","1.notes\u002Fhomelab\u002Fproxmox",[354,358,362,365,369,373,377],{"title":355,"path":356,"stem":357},"Issue: TASK ERROR: Device \u002Fdev\u002Fdri\u002Fcard1 does not exist","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fissue_task_error_device_dev_dri_card1_does-not-exist","1.notes\u002Fhomelab\u002Fproxmox\u002FIssue_TASK_ERROR_device_dev_dri_card1_does not exist",{"title":359,"path":360,"stem":361},"Mount USB Drive To LXC Container","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fmount-usb-drive-to-lxc-container","1.notes\u002Fhomelab\u002Fproxmox\u002FMount USB drive to LXC container",{"title":325,"path":363,"stem":364},"\u002Fnotes\u002Fhomelab\u002Fproxmox\u002F_-proxmox","1.notes\u002Fhomelab\u002Fproxmox\u002F_ proxmox",{"title":366,"path":367,"stem":368},"ARR","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Farr","1.notes\u002Fhomelab\u002Fproxmox\u002Farr",{"title":370,"path":371,"stem":372},"Auto login via SSH from Proxmox UI","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fauto_login_via_ssh_from_proxmox_ui","1.notes\u002Fhomelab\u002Fproxmox\u002Fauto_login_via_ssh_from_proxmox_ui",{"title":374,"path":375,"stem":376},"Installation","\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fdokploy","1.notes\u002Fhomelab\u002Fproxmox\u002Fdokploy",{"title":290,"path":378,"stem":379},"\u002Fnotes\u002Fhomelab\u002Fproxmox\u002Fkubernetes","1.notes\u002Fhomelab\u002Fproxmox\u002Fkubernetes",{"title":381,"path":382,"stem":383,"children":384,"page":30},"Leadership","\u002Fnotes\u002Fleadership","1.notes\u002Fleadership",[385,389,393],{"title":386,"path":387,"stem":388},"Leader Toolbox","\u002Fnotes\u002Fleadership\u002Fleader-toolbox","1.notes\u002Fleadership\u002Fleader-toolbox",{"title":390,"path":391,"stem":392},"Enterprise Project Structure","\u002Fnotes\u002Fleadership\u002Fproject-doc-structure","1.notes\u002Fleadership\u002Fproject-doc-structure",{"title":394,"path":395,"stem":396},"Scrum template","\u002Fnotes\u002Fleadership\u002Fscrum-template","1.notes\u002Fleadership\u002Fscrum-template",{"title":398,"path":399,"stem":400,"children":401,"page":30},"Products","\u002Fnotes\u002Fproducts","1.notes\u002Fproducts",[402],{"title":403,"path":404,"stem":405},"BigQuery","\u002Fnotes\u002Fproducts\u002Fgcp-big-query","1.notes\u002Fproducts\u002Fgcp-big-query",{"id":407,"title":408,"authors":409,"badge":409,"body":410,"date":1298,"description":1299,"extension":1300,"image":409,"meta":1301,"navigation":1303,"path":1304,"seo":1305,"stem":1306,"__hash__":1307},"posts\u002F2.blog\u002F2014-02-14-ExtJs-project-with-Netbeans.md","ExtJS project",null,{"type":411,"value":412,"toc":1296},"minimark",[413,417,420,423,426,429,436,439,444,447,452,455,460,468,473,476,481,484,498,501,520,525,528,535,563,566,581,587,895,901,1099,1102,1105,1108,1113,1116,1121,1124,1130,1133,1155,1158,1180,1183,1276,1283,1286,1292],[414,415,416],"p",{},"Usually when it comes to develop Single Page Application (SPA) we choose GWT.  For simple apps we use native components, GWT-Bootstrap or custom components created with DOM utils. For Enterprise applications we don’t risk and go with GXT.",[414,418,419],{},"GXT is well done components library by Sencha for GWT that looks and behaves like their flag product – ExtJS. In this article we will leave Java world and for a while we will check how to create SPA applications in JavaScript with ExtJS.",[414,421,422],{},"For our purpose I will show how to develop simple application for Bids using Netbeans that has amazing support for many JS libraries included ExtJS.",[414,424,425],{},"#Prepare Netbeans project",[414,427,428],{},"Create new project:",[414,430,431],{},[432,433],"img",{"alt":434,"src":435},"","\u002Fposts\u002Fassets\u002F2013-12-04-21_43_09-NetBeans-IDE-7.4.png",[414,437,438],{},"Create HTML5 project:",[414,440,441],{},[432,442],{"alt":434,"src":443},"\u002Fposts\u002Fassets\u002F2013-12-04-21_44_16-New-Project.png",[414,445,446],{},"And call it BidProject:",[414,448,449],{},[432,450],{"alt":434,"src":451},"\u002Fposts\u002Fassets\u002F2013-12-04-21_45_21-New-HTML5-Application.png",[414,453,454],{},"Next use empty template:",[414,456,457],{},[432,458],{"alt":434,"src":459},"\u002Fposts\u002Fassets\u002F2013-12-04-21_46_27-New-HTML5-Application.png",[414,461,462,463,467],{},"Don’t add existing ExtJS as you will find only version ",[464,465,466],"code",{},"3.4.1",". Netbeans uses external CdnJS service that allows to shuttle JS libraries to the project:",[414,469,470],{},[432,471],{"alt":434,"src":472},"\u002Fposts\u002Fassets\u002F2013-12-04-21_52_57-NetBeans-IDE-7.4.png",[414,474,475],{},"The project now is ready:",[414,477,478],{},[432,479],{"alt":434,"src":480},"\u002Fposts\u002Fassets\u002F2013-12-04-21_58_37-BidProject-NetBeans-IDE-7.4.png",[414,482,483],{},"#Add ExtJS library",[414,485,486,487,493,494,497],{},"Download the latst ExtJS library from here: ",[488,489,490],"a",{"href":490,"rel":491},"http:\u002F\u002Fwww.sencha.com\u002Fproducts\u002Fextjs\u002Fdownload\u002F",[492],"nofollow",". In our case it is ",[464,495,496],{},"ExtJS 4.2.1",". Remember that ExtJS has dual license and for commercial project you must buy license.",[414,499,500],{},"Lets prepare project structure:",[502,503,504,508,511,514,517],"ol",{},[505,506,507],"li",{},"Extract file and copy resources to public_html folder of the project",[505,509,510],{},"Put ext-all-debug.js to extjs folder inside public_html folder",[505,512,513],{},"Create app folder inside public_html folder",[505,515,516],{},"Create empty file app.js inside public_html folder",[505,518,519],{},"The structure should look like this:",[414,521,522],{},[432,523],{"alt":434,"src":524},"\u002Fposts\u002Fassets\u002F2013-12-04-22_27_46-BidProject-NetBeans-IDE-7.4.png",[414,526,527],{},"Now we need to add ExtJS and prepare an Entry point of our application:",[414,529,530,531,534],{},"Edit ",[464,532,533],{},"index.html"," and add ExtJs styles and library:",[536,537,541],"pre",{"className":538,"code":539,"language":540,"meta":434,"style":434},"language-xml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!--ExtJS-->\n\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"resources\u002Fcss\u002Fext-all.css\">\n\u003Cscript type=\"text\u002Fjavascript\" src=\"extjs\u002Fext-all-debug.js\">\u003C\u002Fscript>\n","xml",[464,542,543,551,557],{"__ignoreMap":434},[544,545,548],"span",{"class":546,"line":547},"line",1,[544,549,550],{},"\u003C!--ExtJS-->\n",[544,552,554],{"class":546,"line":553},2,[544,555,556],{},"\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"resources\u002Fcss\u002Fext-all.css\">\n",[544,558,560],{"class":546,"line":559},3,[544,561,562],{},"\u003Cscript type=\"text\u002Fjavascript\" src=\"extjs\u002Fext-all-debug.js\">\u003C\u002Fscript>\n",[414,564,565],{},"next add entry point to the page:",[536,567,569],{"className":538,"code":568,"language":540,"meta":434,"style":434},"    \u003C!--EntryPoint-->\n    \u003Cscript type=\"text\u002Fjavascript\" src=\"app.js\">\u003C\u002Fscript>\n",[464,570,571,576],{"__ignoreMap":434},[544,572,573],{"class":546,"line":547},[544,574,575],{},"    \u003C!--EntryPoint-->\n",[544,577,578],{"class":546,"line":553},[544,579,580],{},"    \u003Cscript type=\"text\u002Fjavascript\" src=\"app.js\">\u003C\u002Fscript>\n",[414,582,583,584,586],{},"Entire ",[464,585,533],{}," should look like this:",[536,588,592],{"className":589,"code":590,"language":591,"meta":434,"style":434},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!DOCTYPE html>\n\u003Chtml>\n  \u003Chead>\n    \u003Ctitle>BidProject\u003C\u002Ftitle>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width\">\n \n    \u003C!--ExtJS-->\n    \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"resources\u002Fcss\u002Fext-all.css\">\n    \u003Cscript type=\"text\u002Fjavascript\" src=\"extjs\u002Fext-all-debug.js\">\u003C\u002Fscript>\n \n    \u003C!--EntryPoint-->\n    \u003Cscript type=\"text\u002Fjavascript\" src=\"app.js\">\u003C\u002Fscript>\n \n  \u003C\u002Fhead>\n  \u003Cbody>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[464,593,594,611,620,630,653,678,711,717,724,770,808,813,818,852,857,867,877,886],{"__ignoreMap":434},[544,595,596,600,604,608],{"class":546,"line":547},[544,597,599],{"class":598},"sMK4o","\u003C!",[544,601,603],{"class":602},"swJcz","DOCTYPE",[544,605,607],{"class":606},"spNyl"," html",[544,609,610],{"class":598},">\n",[544,612,613,616,618],{"class":546,"line":553},[544,614,615],{"class":598},"\u003C",[544,617,591],{"class":602},[544,619,610],{"class":598},[544,621,622,625,628],{"class":546,"line":559},[544,623,624],{"class":598},"  \u003C",[544,626,627],{"class":602},"head",[544,629,610],{"class":598},[544,631,633,636,639,642,646,649,651],{"class":546,"line":632},4,[544,634,635],{"class":598},"    \u003C",[544,637,638],{"class":602},"title",[544,640,641],{"class":598},">",[544,643,645],{"class":644},"sTEyZ","BidProject",[544,647,648],{"class":598},"\u003C\u002F",[544,650,638],{"class":602},[544,652,610],{"class":598},[544,654,656,658,661,664,667,670,674,676],{"class":546,"line":655},5,[544,657,635],{"class":598},[544,659,660],{"class":602},"meta",[544,662,663],{"class":606}," charset",[544,665,666],{"class":598},"=",[544,668,669],{"class":598},"\"",[544,671,673],{"class":672},"sfazB","UTF-8",[544,675,669],{"class":598},[544,677,610],{"class":598},[544,679,681,683,685,688,690,692,695,697,700,702,704,707,709],{"class":546,"line":680},6,[544,682,635],{"class":598},[544,684,660],{"class":602},[544,686,687],{"class":606}," name",[544,689,666],{"class":598},[544,691,669],{"class":598},[544,693,694],{"class":672},"viewport",[544,696,669],{"class":598},[544,698,699],{"class":606}," content",[544,701,666],{"class":598},[544,703,669],{"class":598},[544,705,706],{"class":672},"width=device-width",[544,708,669],{"class":598},[544,710,610],{"class":598},[544,712,714],{"class":546,"line":713},7,[544,715,716],{"class":644}," \n",[544,718,720],{"class":546,"line":719},8,[544,721,723],{"class":722},"sHwdD","    \u003C!--ExtJS-->\n",[544,725,727,729,732,735,737,739,742,744,747,749,751,754,756,759,761,763,766,768],{"class":546,"line":726},9,[544,728,635],{"class":598},[544,730,731],{"class":602},"link",[544,733,734],{"class":606}," rel",[544,736,666],{"class":598},[544,738,669],{"class":598},[544,740,741],{"class":672},"stylesheet",[544,743,669],{"class":598},[544,745,746],{"class":606}," type",[544,748,666],{"class":598},[544,750,669],{"class":598},[544,752,753],{"class":672},"text\u002Fcss",[544,755,669],{"class":598},[544,757,758],{"class":606}," href",[544,760,666],{"class":598},[544,762,669],{"class":598},[544,764,765],{"class":672},"resources\u002Fcss\u002Fext-all.css",[544,767,669],{"class":598},[544,769,610],{"class":598},[544,771,773,775,778,780,782,784,787,789,792,794,796,799,801,804,806],{"class":546,"line":772},10,[544,774,635],{"class":598},[544,776,777],{"class":602},"script",[544,779,746],{"class":606},[544,781,666],{"class":598},[544,783,669],{"class":598},[544,785,786],{"class":672},"text\u002Fjavascript",[544,788,669],{"class":598},[544,790,791],{"class":606}," src",[544,793,666],{"class":598},[544,795,669],{"class":598},[544,797,798],{"class":672},"extjs\u002Fext-all-debug.js",[544,800,669],{"class":598},[544,802,803],{"class":598},">\u003C\u002F",[544,805,777],{"class":602},[544,807,610],{"class":598},[544,809,811],{"class":546,"line":810},11,[544,812,716],{"class":644},[544,814,816],{"class":546,"line":815},12,[544,817,575],{"class":722},[544,819,821,823,825,827,829,831,833,835,837,839,841,844,846,848,850],{"class":546,"line":820},13,[544,822,635],{"class":598},[544,824,777],{"class":602},[544,826,746],{"class":606},[544,828,666],{"class":598},[544,830,669],{"class":598},[544,832,786],{"class":672},[544,834,669],{"class":598},[544,836,791],{"class":606},[544,838,666],{"class":598},[544,840,669],{"class":598},[544,842,843],{"class":672},"app.js",[544,845,669],{"class":598},[544,847,803],{"class":598},[544,849,777],{"class":602},[544,851,610],{"class":598},[544,853,855],{"class":546,"line":854},14,[544,856,716],{"class":644},[544,858,860,863,865],{"class":546,"line":859},15,[544,861,862],{"class":598},"  \u003C\u002F",[544,864,627],{"class":602},[544,866,610],{"class":598},[544,868,870,872,875],{"class":546,"line":869},16,[544,871,624],{"class":598},[544,873,874],{"class":602},"body",[544,876,610],{"class":598},[544,878,880,882,884],{"class":546,"line":879},17,[544,881,862],{"class":598},[544,883,874],{"class":602},[544,885,610],{"class":598},[544,887,889,891,893],{"class":546,"line":888},18,[544,890,648],{"class":598},[544,892,591],{"class":602},[544,894,610],{"class":598},[414,896,897,898,900],{},"Now we add sample content to Entry Point that we could see first results. Edit file ",[464,899,843],{}," and add following content (don’t worry I will explain everything latter):",[536,902,906],{"className":903,"code":904,"language":905,"meta":434,"style":434},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","Ext.application({\n  name: 'Bidder',\n  appFolder: 'app',\n  launch: function() {\n    Ext.create('Ext.container.Viewport', {\n      layout: 'fit',\n      items: [\n        {\n          title: 'MainContainer',\n          html: 'Hello, world'\n        }\n      ]\n    });\n  }\n});\n","javascript",[464,907,908,926,946,962,978,1002,1018,1028,1033,1049,1064,1069,1074,1085,1090],{"__ignoreMap":434},[544,909,910,913,916,920,923],{"class":546,"line":547},[544,911,912],{"class":644},"Ext",[544,914,915],{"class":598},".",[544,917,919],{"class":918},"s2Zo4","application",[544,921,922],{"class":644},"(",[544,924,925],{"class":598},"{\n",[544,927,928,931,934,937,940,943],{"class":546,"line":553},[544,929,930],{"class":602},"  name",[544,932,933],{"class":598},":",[544,935,936],{"class":598}," '",[544,938,939],{"class":672},"Bidder",[544,941,942],{"class":598},"'",[544,944,945],{"class":598},",\n",[544,947,948,951,953,955,958,960],{"class":546,"line":559},[544,949,950],{"class":602},"  appFolder",[544,952,933],{"class":598},[544,954,936],{"class":598},[544,956,957],{"class":672},"app",[544,959,942],{"class":598},[544,961,945],{"class":598},[544,963,964,967,969,972,975],{"class":546,"line":632},[544,965,966],{"class":918},"  launch",[544,968,933],{"class":598},[544,970,971],{"class":606}," function",[544,973,974],{"class":598},"()",[544,976,977],{"class":598}," {\n",[544,979,980,983,985,988,990,992,995,997,1000],{"class":546,"line":655},[544,981,982],{"class":644},"    Ext",[544,984,915],{"class":598},[544,986,987],{"class":918},"create",[544,989,922],{"class":602},[544,991,942],{"class":598},[544,993,994],{"class":672},"Ext.container.Viewport",[544,996,942],{"class":598},[544,998,999],{"class":598},",",[544,1001,977],{"class":598},[544,1003,1004,1007,1009,1011,1014,1016],{"class":546,"line":680},[544,1005,1006],{"class":602},"      layout",[544,1008,933],{"class":598},[544,1010,936],{"class":598},[544,1012,1013],{"class":672},"fit",[544,1015,942],{"class":598},[544,1017,945],{"class":598},[544,1019,1020,1023,1025],{"class":546,"line":713},[544,1021,1022],{"class":602},"      items",[544,1024,933],{"class":598},[544,1026,1027],{"class":602}," [\n",[544,1029,1030],{"class":546,"line":719},[544,1031,1032],{"class":598},"        {\n",[544,1034,1035,1038,1040,1042,1045,1047],{"class":546,"line":726},[544,1036,1037],{"class":602},"          title",[544,1039,933],{"class":598},[544,1041,936],{"class":598},[544,1043,1044],{"class":672},"MainContainer",[544,1046,942],{"class":598},[544,1048,945],{"class":598},[544,1050,1051,1054,1056,1058,1061],{"class":546,"line":772},[544,1052,1053],{"class":602},"          html",[544,1055,933],{"class":598},[544,1057,936],{"class":598},[544,1059,1060],{"class":672},"Hello, world",[544,1062,1063],{"class":598},"'\n",[544,1065,1066],{"class":546,"line":810},[544,1067,1068],{"class":598},"        }\n",[544,1070,1071],{"class":546,"line":815},[544,1072,1073],{"class":602},"      ]\n",[544,1075,1076,1079,1082],{"class":546,"line":820},[544,1077,1078],{"class":598},"    }",[544,1080,1081],{"class":602},")",[544,1083,1084],{"class":598},";\n",[544,1086,1087],{"class":546,"line":854},[544,1088,1089],{"class":598},"  }\n",[544,1091,1092,1095,1097],{"class":546,"line":859},[544,1093,1094],{"class":598},"}",[544,1096,1081],{"class":644},[544,1098,1084],{"class":598},[414,1100,1101],{},"We are done now with configuring ExtJS",[414,1103,1104],{},"#Deploy and run application",[414,1106,1107],{},"From the toolbar menu choose destination, where you would like to preview application (in my case embedded browser that is the best for fast prototyping):",[414,1109,1110],{},[432,1111],{"alt":434,"src":1112},"\u002Fposts\u002Fassets\u002F2013-12-04-23_05_49-BidProject-NetBeans-IDE-7.4.png",[414,1114,1115],{},"Then on toolbar press play button ![](\u002Fposts\u002Fassets\u002F2013-12-04-23_07_28-BidProject-NetBeans-IDE-7.4.png\" alt=\"Start Button) to run server. Results will be displayed below the code:",[414,1117,1118],{},[432,1119],{"alt":434,"src":1120},"\u002Fposts\u002Fassets\u002F2013-12-04-23_11_24-.png",[414,1122,1123],{},"#Entry point",[414,1125,1126,1127,1129],{},"Now let’s explain some parts of Application Entry Point (",[464,1128,843],{},"):",[414,1131,1132],{},"To configure application you need to pass configuration object to Ext.define function:",[536,1134,1136],{"className":903,"code":1135,"language":905,"meta":434,"style":434},"Ext.application({});\n",[464,1137,1138],{"__ignoreMap":434},[544,1139,1140,1142,1144,1146,1148,1151,1153],{"class":546,"line":547},[544,1141,912],{"class":644},[544,1143,915],{"class":598},[544,1145,919],{"class":918},[544,1147,922],{"class":644},[544,1149,1150],{"class":598},"{}",[544,1152,1081],{"class":644},[544,1154,1084],{"class":598},[414,1156,1157],{},"Basic configuration contains:",[1159,1160,1161,1168,1174],"ul",{},[505,1162,1163,1167],{},[1164,1165,1166],"strong",{},"name",": ‘Bidder’ – application name, it will be used latter as a prefix for namespace",[505,1169,1170,1173],{},[1164,1171,1172],{},"appFolder",": ‘app’ – folder of the application components that will develop as our application grows. We will keep there our Views, Models, Controllers, Stores in package like (hierarhical) folder structure.",[505,1175,1176,1179],{},[1164,1177,1178],{},"launch"," – this is method (function) that will be called when application is ready to be initialized",[414,1181,1182],{},"When application is being initialized following code is being executed:",[536,1184,1186],{"className":903,"code":1185,"language":905,"meta":434,"style":434},"Ext.create('Ext.container.Viewport', {\n      layout: 'fit',\n      items: [\n        {\n          title: 'MainContainer',\n          html: 'Hello, world'\n        }\n      ]\n    });\n",[464,1187,1188,1208,1222,1230,1234,1248,1260,1264,1268],{"__ignoreMap":434},[544,1189,1190,1192,1194,1196,1198,1200,1202,1204,1206],{"class":546,"line":547},[544,1191,912],{"class":644},[544,1193,915],{"class":598},[544,1195,987],{"class":918},[544,1197,922],{"class":644},[544,1199,942],{"class":598},[544,1201,994],{"class":672},[544,1203,942],{"class":598},[544,1205,999],{"class":598},[544,1207,977],{"class":598},[544,1209,1210,1212,1214,1216,1218,1220],{"class":546,"line":553},[544,1211,1006],{"class":602},[544,1213,933],{"class":598},[544,1215,936],{"class":598},[544,1217,1013],{"class":672},[544,1219,942],{"class":598},[544,1221,945],{"class":598},[544,1223,1224,1226,1228],{"class":546,"line":559},[544,1225,1022],{"class":602},[544,1227,933],{"class":598},[544,1229,1027],{"class":644},[544,1231,1232],{"class":546,"line":632},[544,1233,1032],{"class":598},[544,1235,1236,1238,1240,1242,1244,1246],{"class":546,"line":655},[544,1237,1037],{"class":602},[544,1239,933],{"class":598},[544,1241,936],{"class":598},[544,1243,1044],{"class":672},[544,1245,942],{"class":598},[544,1247,945],{"class":598},[544,1249,1250,1252,1254,1256,1258],{"class":546,"line":680},[544,1251,1053],{"class":602},[544,1253,933],{"class":598},[544,1255,936],{"class":598},[544,1257,1060],{"class":672},[544,1259,1063],{"class":598},[544,1261,1262],{"class":546,"line":713},[544,1263,1068],{"class":598},[544,1265,1266],{"class":546,"line":719},[544,1267,1073],{"class":644},[544,1269,1270,1272,1274],{"class":546,"line":726},[544,1271,1078],{"class":598},[544,1273,1081],{"class":644},[544,1275,1084],{"class":598},[414,1277,1278,1279,1282],{},"This code creates ",[464,1280,1281],{},"Viewport",". This is a container that fills whole widow body space and resizes when the size of the window changes. This is also unique container that adopts automatically to the body if no components are attached to the page body yet.",[414,1284,1285],{},"Containers are components that can contain many other components like Panels, TabPanels, AccordionPanels. Child elements are defined as objects of items array. They can lay inside the container according to the layout defined by layout property.",[414,1287,1288,1289,1291],{},"In our case ",[464,1290,1281],{}," has single panel that lays inside in fit manner. By default if the object doesn’t have defined type it renders Panel component that has title and html properties.",[1293,1294,1295],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":434,"searchDepth":553,"depth":553,"links":1297},[],"2014-02-14","Introduction to ExtJS framework with Netbeans IDE","md",{"layout":1302},"post",true,"\u002Fblog\u002F2014-02-14-extjs-project-with-netbeans",{"title":408,"description":1299},"2.blog\u002F2014-02-14-ExtJs-project-with-Netbeans","sOYFvk5rF7sv9KIUxrOqhCiuo-hddS_CIo0uyZVzQSg",[1309,1314],{"title":1310,"path":1311,"stem":1312,"description":1313,"children":-1},"UI Binder GWT Styles","\u002Fblog\u002F2013-06-12-synchronous-injection-of-styles-to-ui-binder","2.blog\u002F2013-06-12-Synchronous-injection-of-Styles-to-UI-Binder","Synchronous injection of Styles to UI Binder",{"title":1315,"path":1316,"stem":1317,"description":1318,"children":-1},"Stage Maven archetypes to Central Repository","\u002Fblog\u002F2014-02-27-stage-maven-archetypes-to-central-repository","2.blog\u002F2014-02-27-stage-maven-archetypes-to-central-repository","Using Sonatype tools for publishing Maven archetypes to Central Repository",1788257054804]