{"id":36,"date":"2013-03-19T18:58:00","date_gmt":"2013-03-19T18:58:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2013\/03\/19\/extjs-changing-style-of-items-in-dropdownlist\/"},"modified":"2016-01-30T23:53:30","modified_gmt":"2016-01-30T23:53:30","slug":"extjs-changing-style-of-items-in-dropdownlist","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2013\/03\/19\/extjs-changing-style-of-items-in-dropdownlist\/","title":{"rendered":"Extjs &#8211; Changing style of items in dropdownlist"},"content":{"rendered":"<p>I&#8217;ve recently been asked to create ComboBox with custom styled drop-down list. Colors of items of drop-dow list should be picked based on values of record bounded to given item. After reading some post on Extjs forum, I decided to overwrite default template of drop-down list.<\/p>\n<pre lang=\"javascript\">\r\nExt.create('Ext.XTemplate',\r\n                     '<tpl for=\".\">',\r\n                       '<div class=\"{[this.getClass(values)]}\">{abbr} - {name}<\/div>',\r\n                     '<\/tpl>',{\r\n                            getClass: function (rec) {\r\n                                return rec.name == 'Arizona' ? 'x-boundlist-item x-highlighted-item' : 'x-boundlist-item';\r\n                        }\r\n                    }\r\n    )\r\n<\/pre>\n<p>As You can see I decided to use <i>XTemplate<\/i>, which (to the contrary to <i>Template<\/i>) allows to call user defined function. Function <i> getClass<\/i> from <i>XTemplate<\/i> will be called for each element in ComboBox&#8217;s store. The result of this function will be inserted into class attribute of <i>div<\/i> element, which is resposible for displaying single item in drop-down list. Please notice, that in order to maintain ability to select items from drop-down list, it is necessary to specify <i>x-boundlist-item<\/i> class in template.<br \/>\nHere is example of usage<\/p>\n<pre lang=\"css\">\r\ndiv.x-highlighted-item {\r\n    background: blue !important; \r\n}\r\n<\/pre>\n<pre lang=\"javascript\">\r\n\r\nvar states = Ext.create('Ext.data.Store', {\r\n            fields: ['id', 'abbr', 'name'],\r\n            data: [\r\n                { id: 1, abbr: \"AL\", name: \"Alabama\" },\r\n                { id: 2, abbr: \"AK\", name: \"Alaska\" },\r\n                { id: 3, abbr: \"AZ\", name: \"Arizona\" },\r\n                { id: 4, abbr: \"AZ\", name: \"Arizona\" },\r\n                { id: 5, abbr: \"AZ\", name: \"Arizona\" }\r\n            ]\r\n        });\r\n\r\n  Ext.create('Ext.form.ComboBox', {\r\n       fieldLabel: 'Choose State',\r\n       store: states,\r\n       queryMode: 'local',\r\n       valueField: 'abbr',\r\n       displayField: 'name',\r\n       renderTo: Ext.getBody(),\r\n       tpl: Ext.create('Ext.XTemplate',\r\n                '<tpl for=\".\">',\r\n                  '<div class=\"{[this.getClass(values)]}\">{abbr} - {name}<\/div>',\r\n                 '<\/tpl>',\r\n                    {\r\n                        getClass: function (rec) {\r\n                            return rec.name == 'Arizona' ? 'x-boundlist-item x-highlighted-item' : 'x-boundlist-item';\r\n                        }\r\n                    }\r\n    )\r\n        });\r\n<\/pre>\n<p>and the result<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/03\/extjs-changing-style-of-items-in-dropdownlist\/Result.png\" rel=\"attachment wp-att-364\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/03\/extjs-changing-style-of-items-in-dropdownlist\/Result.png\" alt=\"dropdownlist\" width=\"300\" class=\"aligncenter size-full wp-image-364\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/03\/extjs-changing-style-of-items-in-dropdownlist\/Result.png 306w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/03\/extjs-changing-style-of-items-in-dropdownlist\/Result-150x113.png 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2013\/03\/extjs-changing-style-of-items-in-dropdownlist\/Result-300x225.png 300w\" sizes=\"(max-width: 306px) 100vw, 306px\" \/><\/a><br \/>\nSource code for this post can be found <a href=\"https:\/\/github.com\/tpodolak\/Blog\/tree\/master\/ExtjsChangeStyleInDropDown\">here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve recently been asked to create ComboBox with custom styled drop-down list. Colors of items of drop-dow list should be picked based on values of record bounded to given item. After reading some post on Extjs forum, I decided to overwrite default template of drop-down list. Ext.create(&#8216;Ext.XTemplate&#8217;, &#8221;, &#8216;{abbr} &#8211; {name}&#8217;, &#8221;,{ getClass: function (rec) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67,74,73],"tags":[210,216,217],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-extjs-4-1-1","category-template","category-xtemplate","tag-extjs-4-1-1","tag-template","tag-xtemplate"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":4,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/36\/revisions"}],"predecessor-version":[{"id":542,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/36\/revisions\/542"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}