Question

谁帮我简单写一个extjs添加数据库记录的示例

谁帮我简单写一个extjs添加数据库记录的示例
extjs部分代码要全！ 数据可以随便简单点~~~
我是初学者~~

Answer 1

1,页面部分的
Ext.onReady(function(){
//定义数据集对象
var bookStore = new Ext.data.Store({
autoLoad :true,
reader: new Ext.data.XmlReader({
totalRecords: "results",
record: "Book",
id: "id"
},
Ext.data.Record.create([
{name: 'id'},
{name: 'bookName'},
{name: 'author'},
{name: 'typeName'},
{name: 'price'},
{name: 'brief'}
])
),
proxy : new Ext.data.HttpProxy({
url : 'bookext.do?method=getBookList'
})
})
//创建工具栏组件
var toolbar = new Ext.Toolbar([
{text : '修改书籍',iconCls:'option',handler:showModifyBook}

]);
//创建Grid表格组件
var cb = new Ext.grid.CheckboxSelectionModel()
var bookGrid = new Ext.grid.GridPanel({
applyTo : 'grid-div',
frame:true,
tbar : toolbar,
store: bookStore,
stripeRows : true,
autoScroll : true,
viewConfig : {
autoFill : true
},
sm : cb,
columns: [//配置表格列
new Ext.grid.RowNumberer({
header : '行号',
width : 40
}),//表格行号组件
cb,
{header: "书籍编号", width: 80, dataIndex: 'id', sortable: true},
{header: "书籍名称", width: 80, dataIndex: 'bookName', sortable: true},
{header: "作者", width: 80, dataIndex: 'author', sortable: true},
{header: "类型", width: 80, dataIndex: 'typeName', sortable: true},
{header: "金额", width: 80, dataIndex: 'price', sortable: true},
{header: "简介", width: 80, dataIndex: 'brief', sortable: true}
]
})
//创建新增书籍信息的form表单
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';//统一指定错误信息提示方式
var bookForm = new Ext.FormPanel({
labelSeparator : "：",
frame:true,
border:false,
items : [
{
xtype:'textfield',
width : 200,
allowBlank : false,
blankText : '书籍名称不能为空',
name : 'bookName',
fieldLabel:'书籍名称'
},{
xtype:'textfield',
width : 200,
allowBlank : false,
blankText : '书籍作者不能为空',
name : 'author',
fieldLabel:'作者'
},{
xtype:'combo',
width : 200,
allowBlank : false,
blankText : '必须选择书籍类型',
hiddenName : 'bookTypeId',
name : 'typeName',
store : new Ext.data.Store({
autoLoad :true,
reader: new Ext.data.XmlReader({
totalRecords: "results",
record: "BookType",
id: "id"
},
Ext.data.Record.create([
{name: 'id'},
{name: 'title'},
{name: 'detail'}
])
),
proxy : new Ext.data.HttpProxy({
url : 'bookext.do?method=getBookTypeList'
})
}),//设置数据源
allQuery:'allbook',//查询全部信息的查询字符串
triggerAction: 'all',//单击触发按钮显示全部数据
editable : false,//禁止编辑
loadingText : '正在加载书籍类型信息',//加载数据时显示的提示信息
displayField:'title',//定义要显示的字段
valueField : 'id',
emptyText :'请选择书籍类型',
mode: 'remote',//远程模式
fieldLabel:'类型'
},{
xtype:'textfield',
width : 200,
name : 'price',
fieldLabel:'金额'
},{
xtype:'textarea',
width : 200,
name : 'brief',
fieldLabel:'简介'
},{
xtype:'hidden',
name : 'id'
}
],
buttons:[
{
text : '关闭',
handler : function(){
win.hide();
}
},{
text : '提交',
handler : submitForm
}
]
});
//创建弹出窗口
var win = new Ext.Window({
layout:'fit',
width:380,
closeAction:'hide',
height:280,
resizable : false,
shadow : true,
modal :true,
closable:true,
bodyStyle:'padding:5 5 5 5',
animCollapse:true,
items:[bookForm]
});
//显示新建书籍窗口
function showAddBook(){
bookForm.form.reset();
bookForm.isAdd = true;
win.setTitle("新增书籍信息");
win.show();
}
//加载表单数据
function loadForm(bookId){
bookForm.form.load({
waitMsg : '正在加载数据请稍后',//提示信息
waitTitle : '提示',//标题
url : 'bookext.do?method=getBookById',//请求的url地址
params : {bookId:bookId},
method:'GET',//请求方式
success:function(form,action){//加载成功的处理函数
//Ext.Msg.alert('提示','数据加载成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','数据加载失败');
}
});
}
//提交表单数据
function submitForm(){
//判断当前执行的提交操作，isAdd为true表示执行书籍新增操作，false表示执行书籍修改操作
if(bookForm.isAdd){
//新增书籍信息
bookForm.form.submit({
clientValidation:true,//进行客户端验证
waitMsg : '正在提交数据请稍后',//提示信息
waitTitle : '提示',//标题
url : 'bookext.do?method=addBook',//请求的url地址
method:'POST',//请求方式
success:function(form,action){//加载成功的处理函数
win.hide();
updateBookList(action.result.bookId);
Ext.Msg.alert('提示','新增书籍成功');
},
failure:function(form,action){//加载失败的处理函数
Ext.Msg.alert('提示','新增书籍失败');
}
});
}
}
//明细数据修改后，同步更新书籍列表信息
function updateBookList(bookId){
var fields = getFormFieldsObj(bookId);
var index = bookStore.find('id',fields.id);
if(index != -1){
var item = bookStore.getAt(index);
for(var fieldName in fields){
item.set(fieldName,fields[fieldName]);
}
bookStore.commitChanges();
}else{
var rec = new Ext.data.Record(fields);
bookStore.add(rec);
}
}
=====================================================================
2,后台部分的Action
/*
* 添加书籍
*/
public ActionForward addBookType(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String title = request.getParameter("title");
String detail = request.getParameter("detail");
BookType bookType = new BookType();
bookType.setTitle(new String(title.getBytes("ISO8859-1"),"UTF-8"));
bookType.setDetail(new String(detail.getBytes("ISO8859-1"),"UTF-8"));
int bookTypeId = service.addBookType(bookType);
boolean isSuccess = true;
if(bookTypeId == -1){
isSuccess = false;
}
response.setContentType("text/json;charset=UTF-8");
response.getWriter().write("{success:"+isSuccess+",bookTypeId:"+bookTypeId+"}");
return null;
}
。。。。。。。。。

其他的应该不用帖了吧

还有不懂得 你可以继续补充

Answer 2

extjs只是一个前端展现框架，不能直接向数据库插入记录。
它会将数据封装为JSON格式，将JSON串发送给后台（可能是ASP、PHP、JSP等），再由后台处理数据库部分，然后通过回调函数通知ext数据插入完毕。
所以，你想知道的应该是在extjs里面如何将控件中的数据封装为json然后发送给后台吧；
ext很久以前用过，现在语法已经记不得了，不过大概是这样：
1.给你的空间取一个ID，比如textField控件，id为"username"
2.为你的“添加”按钮绑定事件，可以在构建控件时绑定,如：listeners: {click: function(){} }，或Ext.getCmp("addButton").on("click", function() {})；这样一来，当点击“添加按钮”时，就会执行function中的内容。
3.在function中获取textField控件的值，如：var username = Ext.getCmp("username").getValue();
4.将获取到的值通过AJAX发送给后台程序处理。如：
Ext.Ajax.request({
url: "",
success: function() {}
});
最简单的程序大概就是这么个过程，具体的方法你还得看看API。