javascript ExtJS 4 ग्रिड सामग्री चुनने योग्य बनाना




extjs4 (6)

मैं सिर्फ ट्राइकिस उत्तर में जोड़ना चाहता हूं: ExtJS 4.1.0 के साथ आप वृक्षारोपण के लिए भी चयन सक्षम कर सकते हैं:

Ext.override(Ext.view.Table, { enableTextSelection: true }); // Treepanels

Ext.override(Ext.grid.View,  { enableTextSelection: true }); // Grids

इस कोड को अपने Ext.onReady () फ़ंक्शन में या अपने एप्लिकेशन में जल्दी से कहीं भी रखें।

(क्षमा करें, मैं Triqui के जवाब पर एक टिप्पणी पोस्ट करने में सक्षम नहीं हूं क्योंकि मेरे पास अभी तक आवश्यक प्रतिष्ठा नहीं है।)

ExtJS 4 (सेन्चा) में ग्रिड डिफ़ॉल्ट रूप से सामग्री का चयन करने की अनुमति नहीं देते हैं। लेकिन मैं इसे संभव बनाना चाहता हूं।

मैंने इस ग्रिड कॉन्फ़िगरेशन की कोशिश की है:

viewConfig: {
    disableSelection: true,
    stripeRows: false,
    getRowClass: function(record, rowIndex, rowParams, store){
        return "x-selectable";
    }
},

इन सीएसएस वर्गों के साथ (मूल रूप से क्रोम में देख सकने वाले प्रत्येक तत्व को लक्षित करना):

/* allow grid text selection in Firefox and WebKit based browsers */

.x-selectable,
.x-selectable * {
                -moz-user-select: text !important;
                -khtml-user-select: text !important;
    -webkit-user-select: text !important;
}

.x-grid-row td,
.x-grid-summary-row td,
.x-grid-cell-text,
.x-grid-hd-text,
.x-grid-hd,
.x-grid-row,

.x-grid-row,
.x-grid-cell,
.x-unselectable
{
    -moz-user-select: text !important;
    -khtml-user-select: text !important;
    -webkit-user-select: text !important;
}

मुझे पता है कि आप नीचे दिए गए एक्स 3 में ग्रिड पंक्ति टेम्पलेट को ओवरराइड कर सकते हैं, लेकिन मुझे नहीं पता कि Ext 4 में ऐसा कैसे करें:

templates: {
    cell: new Ext.Template(
    '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
           '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
    '</td>'
    )
}

किसी भी सुझाव की बहुत सराहना की।


कॉलम के लिए रेंडरर का उपयोग करके आप इसे इस तरह जोड़ सकते हैं

columns: [
    {
        header: "",
        dataIndex: "id",
        renderer: function (value, metaData, record, rowIndex, colIndex, store) {
            return this.self.tpl.applyTemplate(record.data);
        },
        flex: 1
    }
],
statics: {
    tpl: new Ext.XTemplate(
        '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
            '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
        '</td>')
}

ऐसा करने का एक वैकल्पिक तरीका नए templatecolumn का उपयोग करते समय कक्षाओं को मनमाने ढंग से HTML तत्वों को असाइन करना हो सकता है। यहां एक कॉलम परिभाषा में एक स्तंभ है जिसे मैंने अभी तक extjs4 पर एक ऐप पोर्ट करते समय लिखा था।

{   
    text: "Notes",
    dataIndex: 'notes',
    width: 300,    
    xtype: 'templatecolumn',  
    tpl: [
    '&lt;span class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}"',
    'style="{style}" tabIndex="0" {cellAttr}&gt;',
    '&lt;span class="x-grid3-cell-inner x-grid3-col-{id}" {attr}&gt;{notes}',
    '&lt;/span&gt;&lt;/span&gt;' ],
    editor: {xtype:'textfield'} 
}

EXTJS के पुराने संस्करण के लिए जो समर्थन नहीं करता पाठ चयन सक्षम करता है। निम्नलिखित ग्रिड सेल में एक नया टेम्पलेट असाइन करके काम करेगा। यह EXTJS 3.4.0 के लिए काम करता है

   var grid = new Ext.grid.GridPanel({
   viewConfig: {
      templates: {
         cell: new Ext.Template(
            '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id}\
                        x-selectable {css}" style="{style}"\
                        tabIndex="0" {cellAttr}>',\
            '<div class="x-grid3-cell-inner x-grid3-col-{id}"\
                        {attr}>{value}</div>',\
            '</td>'
         )
      }
   },
});

आप कोड की उन कुछ पंक्तियों के साथ ग्रिड व्यू के चयन को सक्षम कर सकते हैं, यह आईई 11 और संगतता मोड के साथ EXTJS 3.4 में बहुत अच्छी तरह से काम करता है

   if (!Ext.grid.GridView.prototype.templates) {
Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
'</td>'
);

आप enableTextSelection जोड़ सकते हैं: आपके दृश्य के लिए सही कॉन्फ़िगर करें या इसके साथ हर ग्रिड के लिए वैश्विक रूप से परिवर्तन लागू करें:

Ext.override(Ext.grid.View, { enableTextSelection: true });




extjs