{"id":44,"date":"2012-09-02T12:32:00","date_gmt":"2012-09-02T12:32:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2012\/09\/02\/extjs-4-1-1-multiselectable-datepicker-as-plugin\/"},"modified":"2016-01-31T00:08:54","modified_gmt":"2016-01-31T00:08:54","slug":"extjs-4-1-1-multiselectable-datepicker-as-plugin","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2012\/09\/02\/extjs-4-1-1-multiselectable-datepicker-as-plugin\/","title":{"rendered":"Extjs 4.1.1 – multiselectable datepicker as plugin"},"content":{"rendered":"

A couple of weeks ago I wrote a post about creating a mutiselectable datepicker. The idea of creating this component was to use the object inheritance. Today, I would like to show how to create a multiselectable datepicker as a plugin to Ext.date.Picker<\/i>. The code responsible for selecting dates is almost the same, the only thing which must be changed is the component initialization and access to the datepicker component. In order to make a plugin to any Ext.Component<\/i> class, you must implement the init<\/i> method which takes as argument a reference to the component – so let’s change the existing code to meet this requirement. We need to rename initComponent<\/i> function to init<\/i>. In addition to, we should delete the extend<\/i> property from our code. After these changes the init<\/i> function looks like this:<\/p>\n

\r\ninit:function(datePicker){\r\n        var me = this;\r\n        me.datePicker = datePicker;\r\n        \/\/ me.callParent(arguments);\r\n        me.datePicker.on('select',me.handleSelectionChanged,me);\r\n        me.datePicker.on('afterrender',me.higlighDates,me);\r\n}\r\n<\/pre>\n
Please notice, that the init<\/i> function takes as an argument the datepicker component – and from now on this is our only way to access this component. The rest of the code also requires some modifications – it’s necessary to change all references to the datepicker<\/i> (from the variable me<\/i> to me.datePicker<\/i>). The entire code listing is presented below.<\/p>\n
\r\nExt.define('Multiselect', {\r\n    selectedDates : {},\r\n    clsHigligthClass :'x-datepicker-selected',\r\n    datePicker:null,\r\n    init:function(datePicker){\r\n        var me = this;\r\n        me.datePicker = datePicker;\r\n       \/\/ me.callParent(arguments);\r\n        me.datePicker.on('select',me.handleSelectionChanged,me);\r\n        me.datePicker.on('afterrender',me.higlighDates,me);\r\n    },\r\n    \r\n    higlighDates: function(){\r\n        var me = this;\r\n        if(!me.datePicker.cells)\r\n            return;\r\n        me.datePicker.cells.each(function(item){\r\n            var date = new Date(item.dom.firstChild.dateValue).toDateString();\r\n            if(me.selectedDates[date]){\r\n                if(item.getAttribute('class').indexOf(me.clsHigligthClass)=== -1){\r\n                    item.addCls(me.clsHigligthClass)\r\n                }\r\n            }else{\r\n                item.removeCls(me.clsHigligthClass);\r\n            }\r\n        })\r\n    },\r\n\r\n    handleSelectionChanged:function(cmp,date){\r\n        var me = this;\r\n        if(me.selectedDates[date.toDateString()])\r\n            delete me.selectedDates[date.toDateString()]\r\n        else\r\n            me.selectedDates[date.toDateString()] = date;\r\n        me.higlighDates();\r\n    }\r\n})\r\n<\/pre>\n
Here is example of usage;<\/p>\n
\r\nvar picker = Ext.create('Ext.picker.Date', {\r\n                    plugins: [Ext.create('Multiselect')]\r\n                });\r\n<\/pre>\n
and the result
\n\"multiselectable<\/a>
\nSource code for this post can be found here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
A couple of weeks ago I wrote a post about creating a mutiselectable datepicker. The idea of creating this component was to use the object inheritance. Today, I would like to show how to create a multiselectable datepicker as a plugin to Ext.date.Picker. The code responsible for selecting dates is almost the same, the only […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[102,101,67,103,61],"tags":[235,236,210,237,205],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-datepicker","category-ext-picker-date","category-extjs-4-1-1","category-multiselect","category-plugin","tag-datepicker","tag-ext-picker-date","tag-extjs-4-1-1","tag-multiselect","tag-plugin"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/44","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=44"}],"version-history":[{"count":5,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":550,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/44\/revisions\/550"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}