{"id":47,"date":"2012-07-13T20:42:00","date_gmt":"2012-07-13T20:42:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2012\/07\/13\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/"},"modified":"2016-01-31T00:13:55","modified_gmt":"2016-01-31T00:13:55","slug":"extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2012\/07\/13\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/","title":{"rendered":"Extjs 4.1 &#8211; zmiana stylu konkretnej kom\u00f3rki w gridzie"},"content":{"rendered":"<p>Witam Dzisiejszy post nie b\u0119dzie zwi\u0105zany z platform\u0105 .NET, lecz z javascriptowym frameworkiem Extjs w wersji 4.1. Jako, \u017ce ostatnio w pracy po\u015bwi\u0119cam du\u017co czasu na pisanie w wy\u017cej wymienionej technologii postanowi\u0142em zaprezentowa\u0107, w jaki spos\u00f3b zmieni\u0107 styl konkretnej kom\u00f3rki w gridzie. Zacznijmy od przygotowania danych do wy\u015bwietlenia &#8211; zdefiniujmy zatem stora, kt\u00f3ry b\u0119dzie przechowywa\u0142 informacje maj\u0105ce zosta\u0107 zaprezentowane na gridzie.<\/p>\n<pre lang=\"javascript\">\r\nExt.create('Ext.data.Store', {\r\n    storeId:'itemsStore',\r\n    fields:['name', 'email', 'change'],\r\n    data:{'items':[\r\n        { 'name': 'LCD PLAYER',    \"change\":100  },\r\n        { 'name': 'DVD PLAYER', \"change\":-20  },\r\n        { 'name': 'CD PLAYER',   \"change\":23   },\r\n        \r\n    ]},\r\n    proxy: {\r\n        type: 'memory',\r\n        reader: {\r\n            type: 'json',\r\n            root: 'items'\r\n        }\r\n    }\r\n});\r\n<\/pre>\n<p>Nast\u0119pnie podepnijmy stora pod grida w wersji podstawowej &#8211; bez zmiany stylu konkretnych kom\u00f3rek.<\/p>\n<pre lang=\"javascript\">\r\nExt.create('Ext.grid.Panel', {\r\n    store: Ext.data.StoreManager.lookup('itemsStore'),\r\n    columns: [\r\n        { header: 'Name',  dataIndex: 'name' },\r\n        { header: 'Change', dataIndex: 'change'}\r\n    ],\r\n    height: 200,\r\n    width: 400,\r\n    forceFit:true,\r\n    renderTo: Ext.getBody()\r\n});\r\n<\/pre>\n<p>W celu zmiany parametr\u00f3w poszczeg\u00f3lnych kom\u00f3rek grida pos\u0142u\u017cymy si\u0119 tzw. rendererem. Renderer jest to funkcja, kt\u00f3rej zadaniem jest modyfikacj\u0105 kom\u00f3rek w danej kolumnie grida. Dzi\u0119ki rendererowi mo\u017cemy nie tyko zmieni\u0107 zawarto\u015b\u0107 kom\u00f3rki, ale r\u00f3wnie\u017c przypisa\u0107 jej osobny styl lub klas\u0119 CSS. My\u015bl\u0119, \u017ce renderer mo\u017cna por\u00f3wna\u0107 do conwertera znanego z technologii WPF. Funkcj\u0119 renderera pod\u0142\u0105czymy pod ostatni\u0105 kolumn\u0119. Kod po modyfikacjach b\u0119dzie wygl\u0105da\u0142 w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n<pre lang=\"javascript\">\r\nExt.create('Ext.grid.Panel', {\r\n    store: Ext.data.StoreManager.lookup('itemsStore'),\r\n    columns: [\r\n        { header: 'Name',  dataIndex: 'name' },\r\n        { header: 'Change', dataIndex: 'change', renderer: function(value, metaData, record, row, col, store, gridView){\r\n            if(value>0)\r\n              metaData.tdCls = 'price-rise'\r\n            else\r\n              metaData.tdCls = 'price-fall'\r\n                  \r\n             return value;\r\n        }}\r\n    ],\r\n    height: 200,\r\n    width: 400,\r\n    \r\n    renderTo: Ext.getBody()\r\n});\r\n<\/pre>\n<pre lang=\"css\">\r\n.price-fall  {\r\n    background-color: red !important;\r\n    \r\n}\r\n.price-rise {\r\n    background-color: #B0FFC5;\r\n    color:green;\r\n}\u200b\r\n<\/pre>\n<p>Zauwa\u017cmy, \u017ce funkcja renderer przyjmuje kilka parametr\u00f3w. Najwa\u017cniejsze z nich to<\/p>\n<ul>\n<li>value &#8211; warto\u015b\u0107 wy\u015bwietlona w kom\u00f3rce grida<\/li>\n<li>metaData- obiekt daj\u0105cy nam dost\u0119p do parametr\u00f3w kom\u00f3rki (np. tdCls)<\/li>\n<li>record &#8211; record grida<\/li>\n<\/ul>\n<p>W moim przypadku na podstawie warto\u015bci wy\u015bwietlanej w kom\u00f3rkach kolumny &#8220;Change&#8221;,okre\u015blam czy dana kom\u00f3rka powinna by\u0107 czerwona czy zielona. Wygl\u0105d grida przed oraz po zastosowaniu renderera przedstawiaj\u0105 poni\u017csze screeny<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/Before.jpg\" rel=\"attachment wp-att-414\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/Before.jpg\" alt=\"Before\" width=\"402\" class=\"aligncenter size-full wp-image-414\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/Before.jpg 402w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/Before-150x76.jpg 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/Before-300x151.jpg 300w\" sizes=\"(max-width: 402px) 100vw, 402px\" \/><\/a><br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/After.jpg\" rel=\"attachment wp-att-413\"><img decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/After.jpg\" alt=\"zmiana stylu\" width=\"402\"  class=\"aligncenter size-medium wp-image-413\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/After.jpg 405w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/After-150x76.jpg 150w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/07\/extjs-4-1-zmiana-stylu-konkretnej-komorki-w-gridzie\/After-300x151.jpg 300w\" sizes=\"(max-width: 405px) 100vw, 405px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Witam Dzisiejszy post nie b\u0119dzie zwi\u0105zany z platform\u0105 .NET, lecz z javascriptowym frameworkiem Extjs w wersji 4.1. Jako, \u017ce ostatnio w pracy po\u015bwi\u0119cam du\u017co czasu na pisanie w wy\u017cej wymienionej technologii postanowi\u0142em zaprezentowa\u0107, w jaki spos\u00f3b zmieni\u0107 styl konkretnej kom\u00f3rki w gridzie. Zacznijmy od przygotowania danych do wy\u015bwietlenia &#8211; zdefiniujmy zatem stora, kt\u00f3ry b\u0119dzie przechowywa\u0142 [&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,100,106],"tags":[210,234,241],"class_list":["post-47","post","type-post","status-publish","format-standard","hentry","category-extjs-4-1-1","category-grid","category-renderer","tag-extjs-4-1-1","tag-grid","tag-renderer"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/47","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=47"}],"version-history":[{"count":4,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/47\/revisions\/553"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}