php extjs crud,ExtJs之列表惯用CRUD

ExtJs之列表常用CRUD

前端代码:

Ext.onReady(function(){

Ext.define('Person', {

extend: 'Ext.data.Model',

fields: [{name: 'id',

type: 'int',

useNull: true

}, 'email', 'first', 'last'],

validations: [{ type: 'length',

field: 'email',

min: 1

}, {type: 'length',

field: 'first',

min: 1

}, {type: 'length',

field: 'last',

min: 1

}]

});

//构造store

var store = Ext.create('Ext.data.Store', {

//autoLoad: true,

autoSync: true,

model: 'Person',

proxy: {

type: 'ajax',

api: {

read: '/AdminServlet?param=read',//查询

create: '/AdminServlet?param=add',//创建

update: '/AdminServlet?param=update',//更新

destroy: '/AdminServlet?param=deletes'//删除

},

reader: {

type: 'json',

root: 'data'

},

writer: {

type: 'json'

}

},

listeners: {

write: function(store, operation){

var record = operation.getRecords()[0],

name = Ext.String.capitalize(operation.action),

verb;

if (name == 'Destroy') {

record = operation.records[0];

verb = 'Destroyed';

} else {

verb = name + 'd';

}

Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));

}

}

});

store.load({

params:{

start:0,

limit:20

}

});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {

id:'edit',

listeners: {

edit:function(rowEditing,context){

context.record.commit();

store.reload();//提交后重新加载 获取新数据 包括自动生成的id

},

cancelEdit: function(rowEditing, context) {

// Canceling editing of a locally added, unsaved record: remove it

if (context.record.phantom) {

store.remove(context.record);

}

}

}

});

//创建 panel

var grid = Ext.create('Ext.grid.Panel', {

renderTo: document.body,

plugins: [rowEditing],

width: 400,

height: 300,

frame: true,

title: 'Users',

store: store,

iconCls: 'icon-user',

columns: [{

text: 'ID',

width: 40,

sortable: true,

dataIndex: 'id'

}, {

text: 'Email',

flex: 1,

sortable: true,

dataIndex: 'email',

field: {

xtype: 'textfield'

}

}, {

header: 'First',

width: 80,

sortable: true,

dataIndex: 'first',

field: {

xtype: 'textfield'

}

}, {

text: 'Last',

width: 80,

sortable: true,

dataIndex: 'last',

field: {

xtype: 'textfield'

}

}],

dockedItems: [{

xtype: 'toolbar',

items: [{

text: 'Add',

iconCls: 'icon-add',

handler: function(){

// empty record

store.insert(0, new Person());//从指定索引处开始插入 插入Model实例 并触发add事件

rowEditing.startEdit(0, 0);//开始编辑，并显示编辑器

}

}, '-', {

itemId: 'delete',

text: 'Delete',

iconCls: 'icon-delete',

disabled: true,

handler: function(){

var selection = grid.getView().getSelectionModel().getSelection()[0];

if (selection) {

store.remove(selection);

}

}

}]

}]

});

grid.getSelectionModel().on('selectionchange', function(selModel, selections){

grid.down('#delete').setDisabled(selections.length === 0);

});

});

后台代码：

/**

* @author Lucare(fcs)

*

* 2015年1月9日

*/

public class AdminServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

private Connection con;

private List admins;

private int count;

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

try {

//根据参数param分发请求

String param = request.getParameter("param");

System.out.println(param);

Class.forName("com.mysql.jdbc.Driver");

con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ext","root","root");

Gson gson = new Gson();

response.setCharacterEncoding("UTF-8");

if(param.equals("read")){

String start = request.getParameter("start");

String limit = request.getParameter("limit");

admins = findAll(start, limit);

count = totalCount();

response.getWriter().print("{total:"+count+",data:"+gson.toJson(admins)+"}");

}else if(param.equals("add")){

//extjs 以流的形式传递数据(json类型)

String msg = request.getReader().readLine();

Admin admin = gson.fromJson(msg, Admin.class);

add(admin);

}else if(param.equals("update")){

String msg = request.getReader().readLine();

Admin admin = gson.fromJson(msg, Admin.class);

update(admin);

}else if(param.equals("deletes")){

String msg = request.getReader().readLine();

Admin admin = gson.fromJson(msg, Admin.class);

del(admin);

}

} catch (Exception e) {

e.printStackTrace();

}finally{

closeCon();

}

}

public List findAll(String start,String limit){

List adminlist = new ArrayList();

try {

PreparedStatement ps = con.prepareStatement("select * from admins limit "+start+","+limit);

ResultSet rs = ps.executeQuery();

while(rs.next()){

Admin admin = new Admin();

admin.setId(rs.getInt(1));

admin.setEmail(rs.getString(2));;

admin.setFirst(rs.getString(3));

admin.setLast(rs.getString(4));

adminlist.add(admin);

}

} catch (SQLException e) {

e.printStackTrace();

}

return adminlist;

}

public void add(Admin admin){

try {

PreparedStatement ps = con.prepareStatement("insert into admins values(null,?,?,?)");

ps.setString(1, admin.getEmail());

ps.setString(2, admin.getFirst());

ps.setString(3, admin.getLast());

ps.execute();

} catch (SQLException e) {

e.printStackTrace();

}

}

public void del(Admin admin){

try {

PreparedStatement ps = con.prepareStatement("delete from admins where id=?");

ps.setInt(1, admin.getId());

ps.execute();

} catch (SQLException e) {

e.printStackTrace();

}

}

public void update(Admin admin){

try {

PreparedStatement ps = con.prepareStatement("update admins set email=?,first=?,last=? where id=?");

ps.setString(1,admin.getEmail());

ps.setString(2,admin.getFirst());

ps.setString(3,admin.getLast());

ps.setInt(4, admin.getId());

ps.execute();

} catch (SQLException e) {

e.printStackTrace();

}

}

public int totalCount(){

int total = 0;

try {

PreparedStatement ps = con.prepareStatement("select count(*) from admins");

ResultSet rs = ps.executeQuery();

if(rs.next()){

total = rs.getInt(1);

}

} catch (SQLException e) {

e.printStackTrace();

}

return total;

}

public void closeCon(){

if(con!=null){

try {

con.close();

} catch (SQLException e) {

e.printStackTrace();

}

}

}

}

时间过得好快，虽然学了几天ExtJs，可是后来没有用上，在这里还是总结一下基本用法。ExtJs很强大，远不止我总结的这些，要想学好并熟练运用还是要花费一番功夫的。不过建议初学者学习时要针对版本，每个版本的差异还是比较大的。