extjs 读取数据库数据

var store = new Ext.data.Store({

proxy: _proxy,

reader: new Ext.data.JsonReader(

    {

totelPropetty: _jsonProperty,

root: _jsonRoot

    },

    Ext.data.Record.create([

                {name: 'book_id'},

        {name: 'book_name'},

        {name: 'book_author'},

        {name: 'book_type'},

        {name: 'book_flag'}

    ])

        )

})

//这个reader肯定有错误....

1. 使用form表单提交

使用表单提交是调用了表单的submit方法，其配置项包括url、method等。这种方式能够以JSON的形式提交参数信息。

var myform = Ext.create('Ext.form.Panel',{undefined

defaultType: 'textfield',

items:[{undefined

fieldLabel : 'Name',

name : 'name'

},{undefined

fieldLabel: 'Gender',

name : 'gender'

},{undefined

fieldLabel : 'Age',

name: 'age'

}],

buttons: [{undefined

text : 'load',

handler : function(){undefined

this.up('form').getForm().submit({undefined

url: '/request/userinfo',

method : 'POST',

success : function(form, action){undefined

console.log(form)

Ext.Msg.alert('title', 'load success')

})

}])

2. 使用Ajax异步提交

将上述handler方法中的内容换成一下代码即可。在Ajax的request方法中是一个配置对象，其配置参数包括url，type，params。其中params表示要提交的参数，在此例中是从form表单中通过getValues()方法获得的。该种方式也能将参数一JSON的方式提交到后台，与一个对象匹配。

var values = this.up('form').getForm().getValues()

Ext.Ajax.request({undefined

url:'/request/userinfo',

headers : {undefined'userHeader': 'userMsg'},

type:'POST',

params:values,

success:function(response){undefined

var data = response.responseText

console.log(data)

console.log("success")

},

})

3. 使用Ext.data.Store

在项目中经常需要通过提交一些数据来从后台获取相应的信息。例如，在表单中输入某个人的id和name就可以查出它的相关信息并在前台显示。一个关于extjs的例子如下：

//data Model

Ext.define('User',{undefined

extend: 'Ext.data.Model',

fields: [{name:'name',type:'string'},

{name:'gender',type:'string'},

{name:'age',type:'string'}

]

})

var userStore = Ext.create('Ext.data.Store',{undefined

model: 'User',

pageSize: 20,

// autoLoad : true,

proxy: {undefined

type : 'ajax', //提交数据的方式

url : '/request/userinfo',

reader : { //以json的形式读取将要提交的数据

type : 'json',

root : 'resultList'

},

writer : {undefined

type : 'json'

},

actionMethods : {undefined

create : 'POST'

}

},

})

//grid Panel

Ext.create('Ext.grid.Panel',{undefined

store: userStore,

columns: [

{header : 'Name', dataIndex : 'name'},

{header : 'Gender', dataIndex : 'gender'},

{header : 'Age', dataIndex : 'age'}

],

height: 200,

width: 400,

renderTo: 'div2'

})

//form Panel

var myform = Ext.create('Ext.form.Panel',{undefined

defaultType: 'textfield',

items:[{undefined

fieldLabel: 'Name',

name: 'name'

},{undefined

fieldLabel: 'Gender',

name: 'gender'

},{undefined

fieldLabel : 'Age',

name : 'age'

}],

buttons: [{undefined

text: 'load',

handler: function(){undefined

var values = this.up('form').getForm().getValues()

console.log(values)

userStore.proxy.extraParams=values

userStore.loadPage(1)

}

}

})

在handler方法中获取form表单的参数后，赋值给userStore.proxy.extraParams，然后调用userStore.loadPage(1)。调用loadPage()方法时，会委托给proxy对象去后台获取数据。所以对proxy的配置是核心。使用这个方式从后台获取数据时，后台接口返回的对象应该包括一个List字段，list中包含所需要的具体信息。比如

@ReponseBody

public UserInfoResp getUserInfo(User user) {undefined

}

UserInfoResp应该像这样有一个List字段

class UserInfoResp {undefined

List<User>resulltList

}

Ext部分：

Ext.onReady(function(){

var myFormPanel = new Ext.form.Panel({

title: 'Client and routing info',

renderTo:Ext.getBody(),

defaults:{

xtype:'textfield'

},

items: [{

fieldLabel: 'Client',

name: 'clientName'

}, {

fieldLabel: 'Port of loading',

name: 'portOfLoading'

}, {

fieldLabel: 'Port of discharge',

name: 'portOfDischarge'

}]

})

myFormPanel.getForm().load({

url: 'page/formload.jsp',

params: {

consignmentRef: 'myConsignmentRef'

},

failure: function(form, action) {

Ext.Msg.alert("Load failed", action.result.errorMessage)

}

})

})

JSP部分

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String forms = "{success: false,errorMessage:'errorMessage',data: {clientName: 'Fred. Olsen Lines',portOfLoading: 'FXT',portOfDischarge: 'OSL'}}"

response.getWriter().write(forms)

%>

---