Zaznaczanie tekstu w grid Ext JS 4

Zaznaczanie tekstu w grid Ext JS 4

Cześć, w tym artykule dowiesz się jak dodać wydaje się dość prostą funkcjonalność ale nie jest włączona domyślnie i widziałem w projektach, że sprawiała trudność. A przeczesanie dokumentacji zabierze sporo czasu aby odkryć jak to zrobić. Postaram się co jakiś czas dzielić właśnie takimi krótkimi postami o pomocnych trickach.

Nie będę umieszczał tutaj całego kodu, w swoich artykułach wykorzystuje podstawowy szkielet MVC wygenerowany za pomocą terminala, jeśli chcesz również tak zrobić zapraszam tutaj:

Tworzenie aplikacji Ext JS 4 przy użyciu Sencha Cmd

Przykładowy grid wygląda następująco:

5-extjs4

W takim przypadku użytkownik nie ma możliwości zaznaczenia tekstu i skopiowania tego czego potrzebuje, np. do użycia w wyszukiwarce.

Jeśli nie wiesz jak działa MVC w Ext JS 4, zapraszam tutaj:

Podstawy MVC w Ext JS 4

Kod takiego grida wygląda jak poniżej, znajduje się w folderze view i pliku Main.js :

Ext.define('DevJS.view.Main', {
 extend: 'Ext.container.Container',
 requires: [
 'Ext.tab.Panel',
 'Ext.layout.container.Border',
 'Ext.grid.Panel',
 ],

xtype: 'app-main',

layout: {
 type: 'border'
 },

initComponent: function () {

this.items = [
 {
     region: 'west',
     xtype: 'panel',
     title: 'west',
     width: 150
 },
 {
     region: 'center',
     xtype: 'tabpanel',
     items: [
     {
         xtype: 'grid',
         title: 'Zaznaczenie tekstu',
         store: Ext.data.StoreManager.lookup('testStore'),
     columns: [
         { text: 'Nr', dataIndex: 'number' },
         { text: 'Tekst', dataIndex: 'text', flex: 1 },
     ]
    }
 ]
 }
 ]

 //parent
 this.callParent(arguments);
 }
});

Musisz jeszcze utworzyć Store z danymi dla tej listy, który tworzony jest w kontrolerze Main.js:


Ext.define('DevJS.controller.Main', {
 extend: 'Ext.app.Controller',

init: function () {
     //utwórz testowego stora
     this.prepareGridStore();
 },

prepareGridStore: function () {
     Ext.create('Ext.data.Store', {
         storeId: 'testStore',
         fields: ['number', 'text'],
         data: {
         'items': [
             { number: 1, text: "Testowy tekst." },
             { number: 2, text: "Testowy tekst do zaznaczenia." }
         ]},
         proxy: {
             type: 'memory',
             reader: {
                  type: 'json',
                  root: 'items'
             }
         }
     });
 }
});

I na końcu podpiąć ten kontroler przy wywołaniu aplikacji. Tym zajmuje się plik application.js w folderze app.

//Pamiętaj, tutaj zawsze dodajesz swoje mvc komponenty

Kod tego pliku wygląda aktualnie tak:


Ext.define('DevJS.Application', {
 name: 'DevJS',

extend: 'Ext.app.Application',

views: [
 // TODO: add views here
 ],

controllers: [
 'DevJS.controller.Main'
 ],

stores: [
 // TODO: add stores here
 ]
});

Jak możesz zauważyć, kontroler jest zamontowany i uruchomi się podczas inicjalizacji ustawiając odpowiedni store dla naszego grida.

Teraz do senda, naszym celem jest taki rezultat:

6-extjs4

Ustawienie tego jest dość proste, lecz trzeba wiedzieć jak i gdzie to zrobić. Musisz skonfigurować wierzchnią warstwę grida, czyli tzw. “the grid’s UI view”. Odpowiedzialnym za to jest Ext.view.Table. Podanie parametrów dla tego obiektu odbywa się poprzez zmienną viewConfig, która jest obiektem. Możesz też utworzyć całą instancję Ext.view.Table i podać wraz z nową konfiguracją ale tak się nie powinno robić.

Modifikacja wygląda nastepująco:

{
 region: 'center',
 xtype: 'tabpanel',
 items: [
 {
     xtype: 'grid',
     title: 'Zaznaczenie tekstu',
     store: Ext.data.StoreManager.lookup('testStore'),
     columns: [
         { text: 'Nr', dataIndex: 'number' },
         { text: 'Tekst', dataIndex: 'text', flex: 1 },
     ],
     viewConfig: {
         enableTextSelection: true
     }
 }
 ]
}

Zmienna enableTextSelection jest odpowiedzialna za zaznaczanie tekstu kursorem. Ustaw na true i cel osiągniety. Pozdrawiam.

Komentarze:

Zostaw odpowiedź

Proszę wypełnij wymagane pola aby dodać komentarz.


Drag circle to the rectangle on the right!

Wyślij