SOS EXT Grid 如和提交 大侠们
悬赏:20 发布时间:2008-05-13 提问人:lvpengfei (初级程序员)
Ext.onReady(function(){
Ext.QuickTips.init();
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;
// custom column plugin example
var checkScanRight = new Ext.grid.CheckColumn({
header: "浏览权限?",
dataIndex: 'ScanRight',
width: 60
});
var checkInsert = new Ext.grid.CheckColumn({
header: "添加权限?",
dataIndex: 'InsertRight',
width: 60
});
var checkDeleeRight = new Ext.grid.CheckColumn({
header: "删除权限?",
dataIndex: 'DeleeRight',
width: 60
});
var checkUpdaeRight = new Ext.grid.CheckColumn({
header: "修改权限?",
id:'UpdaeRight',
dataIndex: 'UpdaeRight',
width: 60
});
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "Common Name",
dataIndex: 'common',
width: 240,
editor: new fm.TextField({
allowBlank: false
})
},{
header: "Light",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "Price",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkScanRight,
checkInsert,
checkDeleeRight,
checkUpdaeRight
]);
// by default columns are sortable
cm.defaultSortable = true;
// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'ScanRight', type: 'bool'},
{name: 'InsertRight', type: 'bool'},
{name: 'DeleeRight', type: 'bool'},
{name: 'UpdaeRight', type: 'bool'}
]);
// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'jsp-plants.jsp',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),
sortInfo:{field:'common', direction:'ASC'}
});
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:650,//宽度
height:350,//高度
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
plugins:[checkInsert,checkScanRight,checkDeleeRight,checkUpdaeRight],
clicksToEdit:1,
tbar: [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
ScanRight: false,
InsertRight:false,
DeleeRight:false,
UpdaeRight:false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
// trigger the data store load
store.load();
var top = new Ext.FormPanel({
buttonAlign:'right',
labelWidth:70,
frame:true,
title: '职员管理',
bodyStyle:'padding:5px 5px 0',
style:'margin:10px',
items: [{
xtype:'fieldset',
title: '基本信息',
autoHeight:true,
items:[{
layout:'column',
items:[ {
columnWidth:.90,
layout: 'form',
items: [{
title:fm,
value: '',
anchor:'90%'
}]
}]
}]
}],
buttons: [{
text: '保存',
handler:function(){
if(top.form.isValid()){
top.form.doAction('submit',{
url:'outGrid.jsp',
method:'post',
params:'',
success:function(form,action){
Ext.Msg.alert('操作','保存成功!');
top.form.reset();
},
failure:function(){
Ext.Msg.alert('操作','服务器出现错误请稍后再试!');
}
});
}
}
},{
text: '重置',
handler:function(){top.form.reset();}
}]
});
top.render(document.body);
});
Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};
该问题已经关闭: 超过15天由系统自动关闭
Ext.QuickTips.init();
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form;
// custom column plugin example
var checkScanRight = new Ext.grid.CheckColumn({
header: "浏览权限?",
dataIndex: 'ScanRight',
width: 60
});
var checkInsert = new Ext.grid.CheckColumn({
header: "添加权限?",
dataIndex: 'InsertRight',
width: 60
});
var checkDeleeRight = new Ext.grid.CheckColumn({
header: "删除权限?",
dataIndex: 'DeleeRight',
width: 60
});
var checkUpdaeRight = new Ext.grid.CheckColumn({
header: "修改权限?",
id:'UpdaeRight',
dataIndex: 'UpdaeRight',
width: 60
});
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "Common Name",
dataIndex: 'common',
width: 240,
editor: new fm.TextField({
allowBlank: false
})
},{
header: "Light",
dataIndex: 'light',
width: 130,
editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "Price",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
})
},
checkScanRight,
checkInsert,
checkDeleeRight,
checkUpdaeRight
]);
// by default columns are sortable
cm.defaultSortable = true;
// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'ScanRight', type: 'bool'},
{name: 'InsertRight', type: 'bool'},
{name: 'DeleeRight', type: 'bool'},
{name: 'UpdaeRight', type: 'bool'}
]);
// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'jsp-plants.jsp',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),
sortInfo:{field:'common', direction:'ASC'}
});
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width:650,//宽度
height:350,//高度
autoExpandColumn:'common',
title:'Edit Plants?',
frame:true,
plugins:[checkInsert,checkScanRight,checkDeleeRight,checkUpdaeRight],
clicksToEdit:1,
tbar: [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
ScanRight: false,
InsertRight:false,
DeleeRight:false,
UpdaeRight:false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
// trigger the data store load
store.load();
var top = new Ext.FormPanel({
buttonAlign:'right',
labelWidth:70,
frame:true,
title: '职员管理',
bodyStyle:'padding:5px 5px 0',
style:'margin:10px',
items: [{
xtype:'fieldset',
title: '基本信息',
autoHeight:true,
items:[{
layout:'column',
items:[ {
columnWidth:.90,
layout: 'form',
items: [{
title:fm,
value: '',
anchor:'90%'
}]
}]
}]
}],
buttons: [{
text: '保存',
handler:function(){
if(top.form.isValid()){
top.form.doAction('submit',{
url:'outGrid.jsp',
method:'post',
params:'',
success:function(form,action){
Ext.Msg.alert('操作','保存成功!');
top.form.reset();
},
failure:function(){
Ext.Msg.alert('操作','服务器出现错误请稍后再试!');
}
});
}
}
},{
text: '重置',
handler:function(){top.form.reset();}
}]
});
top.render(document.body);
});
Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};
该问题已经关闭: 超过15天由系统自动关闭
回答
不 知道你要怎么去提交。。。能说清楚点不
gaochun556 (初级程序员) 2008-05-16




