2011-09-01 9 views
25

ExtJS 4 (सेन्चा) में ग्रिड डिफ़ॉल्ट रूप से सामग्री का चयन करने की अनुमति नहीं देते हैं। लेकिन मैं इसे संभव बनाना चाहता हूं।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; 
} 

मुझे पता है कि आप ग्रिड ओवरराइड कर सकते हैं

मैं इस ग्रिड config की कोशिश की है नीचे वर्ण 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>' 
    ) 
} 

कोई भी su बहुत अधिक सराहना की।

उत्तर

4

आप स्तंभ

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>') 
} 
+0

बहुत बढ़िया है, धन्यवाद के लिए चयन सक्षम कर सकते हैं। मुझे संदेह है कि यह एक संकेत है कि मैं किसी चीज के लिए ग्रिड का उपयोग करने की कोशिश कर रहा हूं जिसका मतलब यह नहीं है - मैं प्रदर्शन उद्देश्यों के लिए पूरी तरह से ग्रिड का उपयोग कर रहा था और इसकी किसी भी संपादन सुविधाओं का उपयोग नहीं कर रहा था। मैं बस एक एक्सटेम्प्लेट के साथ एक पैनल का उपयोग कर समाप्त हुआ जिसने विमान-जेन तालिका प्रदान की। – keeny

+0

@keeny मुझे पता है कि यह वास्तव में पुराना है, लेकिन मैं अक्सर प्रदर्शन केवल प्रदर्शन के लिए ग्रिड का उपयोग करता हूं। वे सॉर्टिंग और शैली – WattsInABox

0

करने के लिए यह जबकि नए templatecolumn का उपयोग कर मनमाना HTML तत्वों में कक्षाएं आवंटित करने के लिए हो सकता है एक वैकल्पिक रास्ता के लिए इस तरह जोड़ सकते हैं, रेंडरर का उपयोग कर। यहां एक कॉलम परिभाषा में एक स्तंभ है जिसे मैंने अभी तक extjs4 पर एक ऐप पोर्ट करते समय लिखा था। सच अपने viewConfig करने के लिए या इस के साथ हर ग्रिड के लिए विश्व स्तर पर परिवर्तन लागू:

{ 
    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'} 
} 
50

आप enableTextSelection जोड़ सकते हैं ExtJS 4.1.0 के साथ :

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

शैली के लिए बहुत अच्छे हैं, मेरा मानना ​​है कि "enableTextSelection" केवल 4.1.0 के बाद उपलब्ध है।वास्तव में यह नहीं पता कि यह मामला है, लेकिन यदि ऐसा है, तो यह रास्ता तय करने का तरीका है। –

1

मैं सिर्फ Triquis में जोड़ने के लिए चाहते हैं का जवाब इस कोड को कहीं न कहीं अपने Ext.onReady() फ़ंक्शन के शुरू में या अपने आवेदन में जल्दी

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

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

स्थान: आप treepanels के लिए चयन के रूप में अच्छी तरह से सक्षम कर सकते हैं।

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

0

समर्थन पाठ चयन सक्षम doesnot कि 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>' 
     ) 
     } 
    }, 
}); 
17

सबसे Exty तरह से इन उत्तरों के कई संयोजन .... जब ग्रिड बनाने ग्रिड के ध्यान में रखते हुए सही पर enableTextSelection सेट करें।

var grid = new Ext.grid.GridPanel({ 
    viewConfig: { 
     enableTextSelection: true 
    }, 
}); 
0

आप कोड की उन कुछ लाइनों के साथ ग्रिड दृश्य, यह IE 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>' 
);