2013-04-14 7 views
3

ОбзорКак создать плагин редактора столбцов dgrid с динамическим выбором ввода?

Я использую додзё и dgrid построить сетку. 2 соответствующие колонки: Клиент и Предложение. Двойной щелчок по любому из столбцов позволит вам отредактировать его с помощью dijit/form/Select. Я хочу, чтобы варианты предложения были основаны на вариантах для клиента.

Здесь плагин столбец, используемый для обоих colums:

define([ 
    "dojo", 
    "sb", 
    "put-selector/put", 
    "dgrid/editor", 
    "dijit/form/Select" 
], function(dojo, sb, put, editor, Select){ 
    dojo.global.starbug.grid.columns = dojo.global.starbug.grid.columns || {}; 
    dojo.global.starbug.grid.columns.select = function(column){ 

     //populate the cell with the label or value 
     column.renderCell = function(object, value, cell, options, header){ 
      put(parent && parent.contents ? parent : cell, ".dgrid-select"); 
      items = column.editorInstance.getOptions(); 
      var label; 
      for (var i in items) { 
       if (value == items[i].value) value = items[i].label; 
      } 
      put(cell, 'span.'+value.replace(/ /g, '-').toLowerCase(), value); 
     }; 

     column.editorArgs = { 
      style:'width:100%', 
      labelAttr:'label', 
      store:sb.get(column.from, 'select') 
     }; 

     column = editor(column, Select, "dblclick"); 

     return column; 
    }; 
}); 

Магазин эквивалентно додзе/магазин/JsonRest.

Проблема

Если я понимаю природу dgrid и додзё/магазине, мне нужно найти способ заполнить каталог/обновить Dijit/форму/Выбор вариантов, когда пользователь пытается изменить столбец.

Резюмируя

  • Как определить, когда пользователь пытается изменить столбец?
  • Как я могу получить доступ к dijit/form/Выбрать, чтобы я мог его обновить?
  • Как отложить отображение редактора до его заполнения?

ответ

4

1. Как определить, когда пользователь попытается отредактировать столбец?

Вы можете использовать событие dgrid-editor-show, которое отправляется плагином редактора.

2. Как я могу получить доступ к dijit/form/Выбрать, чтобы я мог его обновить?

Вы будете иметь доступ к column.editorInstance из обработчика событий

3. Как я могу задержать отображение редактора, пока он не заполнен?

Для этого я должен доступа к закрытому члену column.editorInstance, но я был в состоянии выполнить задачу, используя dojo/when на column.editorInstance._queryRes

Я также это было нужно, чтобы установить значение редакторов разы результаты были в

Вот мое решение:.

define([ 
    "dojo", 
    "dojo/when", 
    "sb", 
    "put-selector/put", 
    "dgrid/editor", 
    "dijit/form/Select" 
], function(dojo, when, sb, put, editor, Select){ 
    dojo.global.storm.grid.columns.proposals = function(column){ 

    //We have to keep some cached display values since our editor 
    //will only contain the display values from the last request 
    var cache = {}; 

    //Use the init function to access the grid 
    //so we can attach the event handler to `dgrid-editor-show` 
    column.init = function() { 
     column.grid.on('.dgrid-cell:dgrid-editor-show', function(evt) { 

      //My data contains null values, 
      //so I need to convert them to strings 
      if (evt.cell.row.data[column.field] == null) { 
       evt.cell.row.data[column.field] = "NULL"; 
      } 

      //This is where we set the query and update the available options 
      column.editorInstance.setStore(
       column.editorInstance.store, 
       evt.cell.row.data[column.field], 
       {query:{client:evt.cell.row.data.client_id}} 
      ); 
      //This is where we set editor value upon receipt of the results 
      when(column.editorInstance._queryRes, function() { 
       column.editorInstance.set(
        'value', 
        evt.cell.row.data[column.field] 
       ); 
      }); 
     }); 
    }; 

    //Use the renderCell function to set the display value 
    column.renderCell = function(object, value, cell, options, header){ 

     //add a class to distinguish this column 
     put(parent && parent.contents ? parent : cell, ".dgrid-select"); 

     //for null values, we just put in an empty string 
     if (value == "NULL") put(cell, 'span.proposal', ""); 
     else if (value) { 
      //otherwise delay til we have results 
      when(column.editorInstance._queryRes, function() { 
       //look for the display value in the editor 
       items = column.editorInstance.getOptions(); 
       var found = false; 
       for (var i in items) { 
        //if we find the display value in the editor, cache it 
        if (value == items[i].value) { 
         found = true; 
         cache[value] = items[i].label; 
         value = items[i].label; 
        } 
       } 
       //if we don't find the display value in the editor, 
       //look for it in the cache 
       if (!found && cache[value]) value = cache[value]; 
       //finally, populate the cell 
       put(cell, 'span.proposal', value); 
      }); 
     } 
    }; 

    //Set the editor args, mostly standard stuff 
    column.editorArgs = { 
     style:'width:100%', 
     labelAttr:'label', 
     sortByLabel:false, 
     store:sb.get(column.from, 'select'), 
     onSetStore:function(store, items) { 
      //if the field is not required, put in an empty options 
      //so the store doesn't have to include one 
      if (!this.required) { 
       this.options.unshift({label:' ', value:'NULL'}); 
       this._loadChildren(); 
      } 
     } 
    }; 

    //create the editor 
    column = editor(column, Select, "dblclick"); 

    //return the column 
    return column; 

    }; 
}); 

 Смежные вопросы

  • Нет связанных вопросов^_^