JSON 数据格式正确!但我无法将 JSON 数据与 Grid 绑定(bind)。我什至没有得到一个空网格!问题出在我的 extjs 代码上，我是 Extjs 的新手!我正在使用 4.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();
});
最佳答案
直接导致问题的错误是:
<g:uploadForm action="upload" enctype="multipart/form-data">
行动是
upload ，即返回 JSON 的 url。一种解决方案是创建一个单独的页面，将其定义为操作并在该页面上加载 JavaScript。
或者，您可以在加载商店时将值作为参数发送而不是提交表单(将它们传递到
store1.load({params: {...}}) 的选项对象中。在这种情况下，使用 extjs 创建整个页面会是一个更好的设计，包括形式。代码还有其他问题，比如你有
store1.reload(); ，但您从未调用 load()前。
关于json - 无法在 Grails 2.1 中的 ExtJS 网格 (4.2.1) 中填充 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30994644/