ignar's log

Dojo Toolkit – dojox.grid

Декабрь 11th, 2009 от admin Оставить свое мнение »

Добрый день

Хочу привести пример переопределения dojox.grid, с целью создания своего, готового к использованию класса.

А так же показать механизм создания виджетов внутри дата-таблицы.

Начиная с версии Dojo Toolkit 1.4 виджет dojox.grid достаточно сильно изменен, он больше не совместим с предыдущими версиями.

Теперь есть возможность создавать вложенные гриды и мультисортировку.

Ниже следует небольшой пример, который хорошо раскрывает новые возможности.

Пример в работе examples.ignar.name

Статьи про Dojo Toolkit на DaddyFeed.com

Код класса:

dojo.provide("dojoi.grid.feed");
dojo.require("dojox.grid.DataGrid");

dojo.declare("dojoi.grid.feed", [dojox.grid.DataGrid] ,{
    query: {
        id: '*'
    },
    clientSort: true,
    selectionMode: 'single',
    rowSelector: '20px',
    structure: [
        {field: 'id', name: 'ID', width: '50px'},
        {field: 'title', name: 'Название', width: '200px', formatter: function(v){
                return ''+v+'';
        }},
        {field: 'description', name: 'Описание', width: '300px'}
    ]
});

Файл данного класса находится в папке dojoi в корне фреймворка (на одном уровне с dojo, dijit и dojox)

Функция formatter предназначена для форматирования данных поступающих с хранилища и может принимать dijit виджет (данная возможность доступна начиная с версии Dojo Toolkit 1.4).

Подключение и создание

// регистрируем путь к расширению
// указываем область видимости и путь к ней
dojo.registerModulePath("dojoi","/js/dojotoolkit/dojoi");
// запрашиваем файл
dojo.require('dojoi.grid.feed');
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function(){
	dojo.parser.parse();
});

Создание виджетов происходит непрограммным путем

// dojoType - указывает на класс виджета
// url - на путь к данным


// атрибут store - указывает на store-класс по его ID

При больших объемах текста таблица становится плохо читаемой, из-за большого количества текста в колонки «описание».

Вот такой виджет позволит сократить количество текста выводимого за один раз и улучшит читабельность:

dojo.provide("dojoi.tools.slicer");

dojo.declare("dojoi.tools.slicer", [dijit._Widget,dijit._Templated] ,{
    originalValue: '',
    slicedValue: '',
    tuggle: false,
    templateString: "[+]",
    indicatorCont: function(e){
        dojo.stopEvent(e);
        if (!this.tuggle){
            this.pain.innerHTML = this.originalValue;
            this.indicator.innerHTML = '[–]';
            this.tuggle = true;
        } else {
            this.pain.innerHTML = this.slicedValue+'[...]';
            this.indicator.innerHTML = '[+]';
            this.tuggle = false;
        }
    },
    constructor: function(v){
        this.originalValue = v.value;
        this.slicedValue = v.value.slice(0,100);
    },
    postCreate: function(){
        this.pain.innerHTML = this.slicedValue+'[...]';
    }
});

Пример в работе examples.ignar.name