EXTJS 动态数据 行里面 添加 删除 操作
EXTJS 动态数据 行里面 添加 删除 操作
/*! }
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
// Application instance for showing user-feedback messages.
var App = new Ext.App({});
// Create a standard HttpProxy instance.
var proxy = new Ext.data.HttpProxy({
url: 'app.php/users'
});
// Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-response
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'data',
messageProperty: 'message' // <-- New "messageProperty" meta-data
}, [
{name: 'id'},
{name: 'email', allowBlank: false},
{name: 'first', allowBlank: false},
{name: 'last', allowBlank: false}
]);
// The new DataWriter component.
var writer = new Ext.data.JsonWriter({
encode: false // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params
});
// Typical Store collecting the Proxy, Reader and Writer together.
var store = new Ext.data.Store({
id: 'user',
restful: true, // <-- This Store is RESTful
proxy: proxy,
reader: reader,
writer: writer // <-- plug a DataWriter into the store just as you would a Reader
});
// load the store immeditately
store.load();
////
// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"
// upon Ext.data.DataProxy class. This is handy for centralizing user-feedback messaging into one place rather than
// attaching listenrs to EACH Store.
//
// Listen to all DataProxy beforewrite events
//
Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) {
App.setAlert(App.STATUS_NOTICE, "Before " + action);
});
////
// all write events
//
Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) {
App.setAlert(true, action + ':' + res.message);
});
////
// all exception events
//
Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) {
App.setAlert(false, "Something bad happend while executing " + action);
});
var cmb = new Ext.form.ComboBox({ typeAhead: true,
triggerAction: 'all',
mode: 'local',editable:false,store:[['key1','value1'],['key2','value2']]});
// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})},
{header: "First", width: 50, sortable: true, dataIndex: 'first', editor: cmb},
{header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})},
{header: "Last", width: 50, sortable: true, dataIndex: 'last',
renderer:function(val, metadata, record, rowIndex, colIndex, store){
return "<input type='button' name='"+val.name+"opt_type' value='add' onclick='add_row("+rowIndex+");'/> " +
"<input type='button' name='"+val.name+"opt_type' value='del' onclick=''/>";
}}];
Ext.onReady(function() {
Ext.QuickTips.init();
// use RowEditor for editing
var editor = new Ext.ux.grid.RowEditor({
clicksToEdit : 2,
saveText: 'Update'
});
// Create a typical GridPanel with RowEditor plugin
var userGrid = new Ext.grid.GridPanel({
id:'user',
renderTo: 'user-grid',
iconCls: 'icon-grid',
frame: true,
title: 'Users',
autoScroll: true,
height: 300,
store: store,
plugins: [editor],
columns : userColumns ,
tbar: [{
text: 'Add',
iconCls: 'silk-add',
handler: onAdd
}, '-', {
text: 'Delete',
iconCls: 'silk-delete',
handler: onDelete
}, '-'],
viewConfig: {
forceFit: true
},
addRow : function(){
var u = new this.store.recordType({
first : '',
last: '',
email : ''
});
editor.stopEditing();
this.store.insert(2,u);
editor.startEditing(2);
}
});
/**
* onDelete
*/
function onDelete(index) {
var rec = userGrid.getSelectionModel().getSelected();
if (!rec) {
return false;
}
userGrid.store.remove(rec);
userGrid.store.remove(index);
}
function onAdd(btn, ev) {
var u = new userGrid.store.recordType({
first : '',
last: '',
email : ''
});
editor.stopEditing();
userGrid.store.insert(2, u);
editor.startEditing(2);
}
});
function add_row(Index) {
var user = Ext.getCmp('user');
user.addRow(); //执行user里面的方法
// user.getTopToolbar().get(0).getEl().dom.click(); //模拟点击;tbar上面的点击。
