Question

JSON数据格式正确！但是我无法将JSON数据与Grid绑定。我甚至没有得到一个空格！问题在于我的extjs代码，我是Extjs的新手！我正在使用4.2.1

我正在尝试使用
在upload.gsp div中渲染网格 extjs小组中的renderTo: 'csvGrid'。

它只是渲染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();
        });

Answer 1

直接导致问题的错误是：

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

操作是upload，这是返回JSON的网址。

解决方案是创建一个单独的页面，将其定义为操作并在该页面上加载JavaScript。

或者，您可以在加载商店时将值作为参数发送，而不是提交表单（在store1.load({params: {...}})的选项对象中传递它们。在这种情况下，创建整个页面将是更好的设计与extjs，包括表格。

代码还有其他问题，例如您store1.reload();，但之前从未调用load()。

无法在Grails 2.1中的ExtJS网格（4.2.1）中填充JSON数据

1 个答案: