Невозможно заполнить данные JSON в сетке ExtJS (4.2.1) в Grails 2.1

Данные JSON находятся в правильном формате! но я не могу связать данные JSON с Grid. Я даже не получаю пустую сетку! Проблема заключается в моем коде extjs, я новичок в Extjs! Я использую 4.2.1Невозможно заполнить данные JSON в сетке ExtJS (4.2.1) в Grails 2.1

Я пытаюсь сделать сетку в upload.gsp DIV с помощью
renderTo: 'csvGrid' в ExtJS панели.

Он просто визуализирует данные JSON, но не внутри сетки! Пожалуйста помоги !

 Grails Contoller Actions Contoller Code 

     def index() { 

       render (view:"upload") 
      } 


      def upload() { 

       def uploadedCSVFile = request.getFile('file') 
     //  def csvMap = [:] 
     //  def listOfCsvMap = [] 

       def materialCode 
       def serialNumber 
       def label 

       String [] row ; 
       char separator = ';'; 
       CSVReader reader = new CSVReader(new InputStreamReader(uploadedCSVFile.getInputStream()),separator); 




       String [] header = reader.readNext() 
       // String [] temp; 
       if (header[0].equalsIgnoreCase("Material_Code") && header[1].equalsIgnoreCase("Serial_Number") && header[2].equalsIgnoreCase("#Labels")) 
       { 

        List <String []> fileData = reader.readAll() 
        Iterator<String[]> rowIterator =  fileData.iterator() 



        def listOfCsvMap = [] 

         while (rowIterator.hasNext()) 

        { 



         def csvMap = [:] 

         row = rowIterator.next() 

         materialCode = row.collect().get(0) 
         serialNumber = row.collect().get(1) 
         label = row.collect().get(2) 

         csvMap.put('Material_Code', materialCode) 
         csvMap.put('Serial_Number', serialNumber) 
         csvMap.put('Labels', label) 
         listOfCsvMap.add(csvMap) 


        } 



       render([items:listOfCsvMap] as JSON) 


     upload.gsp 

     <body> 
      <div class="body"> 

      <g:uploadForm action="upload" enctype="multipart/form-data"> 
      <input type="file" name="file"> 
      <g:submitButton name="upload" value="Upload"/> 
     </g:uploadForm> 

     <g:javascript src="grid.js" /> 

     <div id="csvGrid"> </div> 


     and in the grid.js 


     var store1; 
     Ext.onReady(function() { 
       store1 = new Ext.data.JsonStore({ 
       storeId: 'myStore1', 
       pageSize: 20, 
       proxy: { 
        type: 'ajax', 
        url:'upload', 
         reader: { 
         type: 'json', 
         root: 'items' 

        } 

       }, 
       fields: ['Material_Code','Serial_Number','Labels'] 

      }); 
      var grid = Ext.create('Ext.grid.Panel', { 
       store: store1, 
       stateful: false, 
       layout:'fit', 
       enableColumnMove: true, 
       enableColumnResize:true, 
       emptyText:'<b style="font-size:14px;color: #F49000;">'+'Please fill all the mandatory fields!!!'+'</b>', 

       columns: [ 
        { 
         text  : 'Material Code', 
         width:175, 
         sortable : true, 
         dataIndex: 'Material_Code', 
        }, 
        { 
         text  : 'Serial Number', 
         width :275, 
         sortable : true, 
         dataIndex: 'Serial_Number' 
        }, 
        { 
         text  : '#Labels', 
         width :275, 
         sortable : true, 
         dataIndex: 'Labels' 
        } 

       ], 
       bbar: Ext.create('Ext.PagingToolbar', { 
       store: store1, 
        pageSize: 20, 
        displayInfo: true, 
        displayMsg: 'Displaying rows {0} - {1} of {2}', 
        emptyMsg: "No rows to display" 

       }), 
       height: 350, 
       width: 850, 
       renderTo: 'csvGrid', 
       viewConfig: { 
        stripeRows: true, 
        enableTextSelection:true 
       } 
      }); 
      store1.reload(); 
     });

источник

2015-06-23 CoderCosmo

Ошибка, которая вызывает проблему непосредственно заключается в следующем:

<g:uploadForm action="upload" enctype="multipart/form-data">

Действие upload, который является URL, который возвращает JSON.

Решение состоит в том, чтобы создать отдельную страницу, определить ее как действие и загрузить JavaScript на этой странице.

В качестве альтернативы вместо отправки формы вы можете отправлять значения в качестве параметров при загрузке хранилища (передать их в объекте опций store1.load({params: {...}}). В этом случае было бы лучше создать всю страницу с помощью extjs, в том числе форму.

есть и другие проблемы с кодом, как у вас есть store1.reload();, но вы никогда не называли load() раньше.

источник

2015-06-23 18:36:22

большое спасибо! Лоренц! мне удалось добиться того, что я хотел, делая то, что вы предложил и немного помог от документации Sencha! – CoderCosmo

Невозможно заполнить данные JSON в сетке ExtJS (4.2.1) в Grails 2.1

ответ

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