Ext .grid.Panel को Ext.toolbar.Toolbar के साथ पंक्तियों को एकीकृत करने के लिए घटक

परियोजनाओं में से एक के प्रशासनिक भाग के निर्माण के हिस्से के रूप में, मैं भाग्यशाली था कि एक बल्कि पतला घटक विकसित किया गया था जो कि एलटीजेएस 4 पुस्तकालय की काफी समृद्ध कार्यक्षमता का पूरक है।

उदाहरण उपयोग: http://siterra.org/examples/rowtoolbar.html
रिपोजिटरी: https://github.com/siterra/RowToolbar
एक्सटीजेएस 4.1.1 ए के साथ परीक्षण किया गया।


मैंने इसे Apache लाइसेंस 2.0 के तहत सार्वजनिक डोमेन में रखने का फैसला किया। इसके अलावा, यह काफी हल्का निकला, लेकिन उपयोग करने के लिए बहुत सुविधाजनक है।

समस्या जो घटक हल करती है, वह सबसे लचीले तरीके से तालिका में प्रत्येक व्यक्तिगत पंक्ति के लिए फ़ंक्शन बटन बनाने की आवश्यकता है।

बेशक, इस तरह की समस्या को हल करने के लिए, एक "एक्शनकोल्यूम" है। हालांकि, इसके तत्व के लिए बटन पर हस्ताक्षर जोड़ने का कोई सामान्य अवसर नहीं है। लेकिन बटन को एक अतिरिक्त कॉलम में रखने के बजाय, उन्हें अधिक स्पष्टता के लिए एक नई पंक्ति में स्थानांतरित करने का निर्णय लिया गया, क्योंकि अक्सर, एक कर्मचारी को फ़ंक्शन बटन के लिए पहुंचने के लिए पहला सेल पढ़ने की आवश्यकता होती है।

/* Copyright 2013 Siterra Ltd. (www.siterra.org) Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ Ext.define('Ext.ux.grid.features.RowToolbar', { extend: 'Ext.grid.feature.Feature', alias: 'feature.rowtoolbar', rowToolbarCls: 'app-grid-feature-rowtoolbar', /* @param renderTimeout (int) * Timeout for delay before render items. Required, because we have no events to call * our render after data loads and grid rendered. It can be edit, then computer is too * slow to render so fast. */ renderTimeout: 1, toolbar: {}, init: function() { this.toolbar = Ext.applyIf(this.toolbar, { xclass: 'Ext.toolbar.Toolbar', padding: '0 16 0 0', cls: 'grid-feature-rowtoolbar-instance', baseCls: '', baseId: Ext.id() + '-rowtoolbar', /* @optional * @param isDisabledForRecord (function) * Function gives a record to check enable item or not for it * inputs * @param record * @return boolean */ /* @optional * @param isVisibleForRecord (function) * Function gives a record to check visibility of item * inputs * @param record * @return boolean */ /* @optional * @param hiddenItemsSavePosition (boolean) * With this flag is true and element is hidden, then it's width * doesn't 0. Visibility doesn't influence on positioning othe items. */ listeners: { scope: this, afterrender: function(tbar) { Ext.each(tbar.items.items, function(item) { if (item.isDisabledForRecord) { var is_disabled = item.isDisabledForRecord(item, tbar.record); item.setDisabled(is_disabled); } if (item.isVisibleForRecord) { var is_visible = item.isVisibleForRecord(item, tbar.record); if (item.hiddenItemsSavePosition) { item.getEl().dom.style.visibility = (is_visible ? 'visible' : 'hidden'); } else { item.setVisible(is_visible); } } }, this); } } /* @variable renderedItems * Keeps rendered components created with help of this toolbar config */ /* each renderedItem has * @variable record * what links to it's own record in store * Keeps rendered components created with help of this toolbar config */ }); }, renderItems: function() { this.toolbar.renderedItems = []; var els = Ext.query('.'+ this.toolbar.baseId +'-wrap', this.grid.getEl().dom); Ext.each(els, function(el) { // clone toolbar config for each row var tb_clone = Ext.clone(this.toolbar); tb_clone.items = Ext.clone(this.items); // find record in store for current row var row = Ext.get(el).up('.x-grid-row'); if (row) { tb_clone.record = this.grid.getView().getRecord(row); } // create and render toolbar for current row tb_clone = Ext.create(tb_clone); el.innerHTML = ''; tb_clone.render(el); // remember an item this.toolbar.renderedItems.push(tb_clone); }, this); }, getRowToolbar: function() { var tpl = '<tr class="'+ this.rowToolbarCls +'">'+ '<td class="'+ this.rowToolbarCls +'" colspan="{[ this.embedColSpan() ]}">'+ '<div class="'+ this.toolbar.baseId +'-wrap '+ this.rowToolbarCls +'-btn"></div>'+ '</td>'+ '</tr>'; return tpl; }, embedColSpan: function() { return '{rowToolbarColspan}'; }, getAdditionalData: function(data, idx, record, orig) { var colspan = this.view.headerCt.getColumnCount(); return { rowToolbarCls: this.rowToolbarCls, rowToolbarColspan: colspan }; }, mutateMetaRowTpl: function(metaRowTpl) { metaRowTpl.push(this.getRowToolbar()); }, getMetaRowTplFragments: function() { // render toolbar after some time Ext.defer(this.renderItems, this.renderTimeout, this); return { embedColSpan: this.embedColSpan }; } }); 

प्रस्तुत विकास एक "सुविधा" के रूप में तालिका से जुड़ा हुआ है। उसी समय, रोवरैप घटक के कनेक्शन की आवश्यकता होती है। तालिका की दृश्य उपस्थिति और सुविधाजनक पंक्ति प्रबंधन को बनाए रखने के लिए यह आवश्यक है।

 features: [{ ftype: 'rowtoolbar', items: [ ... ] },{ ftype: 'rowwrap' }] 

आइटम फ़ील्ड में घोषित आइटम कई बार बनाए जाएंगे क्योंकि डेटा लोड करने के बाद तालिका में पंक्तियाँ होती हैं। कभी-कभी आवश्यकता "छिपी" और "अक्षम" झंडे को बदलने के लिए उठती है। इसलिए, कार्यDisabledForRecord और isVoubleForRecord को RowToolbar में बनाया गया है। प्रत्येक फ़ंक्शन को 2 पैरामीटर प्राप्त होते हैं: रोवुलबार तत्व का एक उदाहरण, और Ext.data.Record (Ext.data.Model), जिसे संसाधित किया जा रहा तालिका पंक्ति में मैप किया गया है। इस प्रकार, स्ट्रिंग की सामग्री के आधार पर, तत्वों के प्रदर्शन को बदलना संभव हो जाता है।