Украинская Баннерная Сеть

Dojo Toolkit – dojox.grid

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

Добрый день

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

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

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

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

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


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

ignar.name - dojox.grid

Статьи про 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

ignar.name - dojox.grid

Так же, необходимо подключить требуемые css файлы в зависимости от выбранной вами темы.

Ссылки по теме:

Очень надеюсь, что вы нашли то, что искали.

Легкого вам кодирования :)

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

Вас также может заинтересовать:

Posted in Dojo Toolkit, JavaScript, О работе

Tags:

You can follow any responses to this entry through the RSS 2.0 Feed. You can leave a response , or trackback from your own site.

Advertisement

Украинская Баннерная Сеть
  • Timur
    Спаисбо за информацию. Скажите, а как можно реализовать в этой таблице (в каждом поле) селекты с выборкой из доп.таблиц и сохранением в одной.
  • Извините, я не понял, какой конкретный функционал должны нести селекты в полях.
    Расскажите подробней.
  • Sergio
    Хотелось бы увидеть пример работы с dojox.grid.TreeGrid особенно с большим количеством уровней дерева. :)
  • Обязательно сделаю пример dojox.grid.TreeGrid на этой рабочей неделе.
    Большое спасибо Вам за интерес.
blog comments powered by Disqus