在 extjs4 中编辑时需要对齐复选框、添加多条记录并查看日期归档
Need to align the check box, add multiple records and view the datefiled while edit in extjs4?
-
我需要在网格中一次添加一条或多条记录。单击添加按钮后,我可以一次添加一条记录。但他的事情是我需要一次添加多个记录。我尝试同时使用clickToEdit,clicksToMoveEditor,但不起作用。
-
我需要在编辑网格时将复选框居中对齐。
- 最主要的是,当我能够在网格中编辑时,我只能编辑除开始日期和结束日期列之外的字段。 它不是从数据库呈现的。
如果网格的配置参数错误,任何人都可以帮助我。
this.mcmRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
autoCancel: true,
listeners: {
scope: this,
canceledit: function(editor, event) {
if(!editor.record.get('FocusMarketId')) { //if it was a brand new record
console.log("edit");
console.log(editor.record.get('Id'));
var sm = this.mcmGridPanel.getSelectionModel();
App.mcmFocusMarketStore.remove(sm.getSelection());
if(sm.getCount()) {
sm.select(0);
}
}
}
}
});
var addFocusMarket = function(focusmarket) {
this.mcmRowEditing.cancelEdit();
console.log("add focus market");
var record = new Sch.model.Resource({
Id: focusmarket ? focusmarket.Id : '',
Origin: focusmarket ? focusmarket.Origin : '',
Destination: focusmarket ? focusmarket.Destination: '',
CabinClass: focusmarket ? focusmarket.CabinClass: '',
StartAvailability: focusmarket ? focusmarket.startAvailability: '',
EndAvailability: focusmarket ? focusmarket.endAvailability: ''
});
console.log("records-->"+record);
App.mcmFocusMarketStore.insert(0, record);
this.mcmRowEditing.startEdit(0, 0);
this.mcmHasChanges = true;
};
this.mcmGridPanel = new Ext.grid.GridPanel({
height: 240,
width: 540,
title: 'Results',
store: App.mcmFocusMarketStore,
multiSelect: true,
x: 0,
y: 170,
columns: [
{ xtype: 'gridcolumn', text: 'Flight#', sortable: true, width: 100, dataIndex: 'FlightNumber', hidden: true,
editor: {
xtype: 'textfield',
maxLength: 4,
minLength: 4,
maxChars: 4,
}
},
{ xtype: 'gridcolumn', text: 'Origin', sortable: true, width: 100, dataIndex: 'Origin',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Destination', sortable: true, width: 100, dataIndex: 'Destination',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Cabin', sortable: true, width: 80, dataIndex: 'CabinClass',
editor: {
xtype: 'textfield',
maxLength: 1,
minLength: 1,
maxChars: 1,
}
},
{ xtype: 'datecolumn', text: 'Start Date', width: 100, dataIndex: 'StartAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'datecolumn', text: 'End Date', width: 100, dataIndex: 'EndAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{
xtype: 'gridcolumn',
text: 'Delete?',
header: 'Delete?',
dataIndex: 'delete',
width: 60,
renderer: function (value, meta, record, rowIndex, colIndex) {
return '<center><input type="checkbox" id="Delete-' + rowIndex + '"/></center>';
},
listeners :
{
checkchange : function(column, recordIndex, checked)
{
this.mcmRemoveFocusMarket();
//or send a request
}
},
handler: function() {
/* var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}*/
},
//disabled: true,
editor: {
xtype: 'checkbox'
}
}
],
tbar: [
{
text: 'Add',
tooltip: 'Add Focus Market',
iconCls: 'icon-shift-add',
scope: me,
handler: function() {
addFocusMarket.call(me);
}
}
],
plugins: [ this.mcmRowEditing ],
1.)不要直接将记录添加到网格中。将数据添加到后端并重新加载网格的存储,然后在网格中显示新添加的数据
2)应使用检查列固定对齐方式
3)我不太确定你在这里问什么。根据我的理解,编辑似乎有效。是否确定以正确的格式(日期:"2014/02/04")为日期列提供数据?
// Presuming you are using ExtJS 4...
this.mcmRowEditing = Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToEdit: 1,
autoCancel: true,
listeners: {
scope: this,
edit: function(editor, context, eOpts){
// do your editing processing here
// lookup api documentation for params
}
}
});
this.mcmGridPanel = Ext.create('Ext.grid.Panel',
{
height: 240,
width: 540,
title: 'Results',
store: App.mcmFocusMarketStore,
multiSelect: true,
x: 0,
y: 170,
columns: [
{ xtype: 'gridcolumn', text: 'Flight#', sortable: true, width: 100, dataIndex: 'FlightNumber', hidden: true,
editor: {
xtype: 'textfield',
maxLength: 4,
minLength: 4,
maxChars: 4,
}
},
{ xtype: 'gridcolumn', text: 'Origin', sortable: true, width: 100, dataIndex: 'Origin',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Destination', sortable: true, width: 100, dataIndex: 'Destination',
editor: {
xtype: 'textfield',
maxLength: 3,
minLength: 3,
maxChars: 3,
}
},
{ xtype: 'gridcolumn', text: 'Cabin', sortable: true, width: 80, dataIndex: 'CabinClass',
editor: {
xtype: 'textfield',
maxLength: 1,
minLength: 1,
maxChars: 1,
}
},
{ xtype: 'datecolumn', text: 'Start Date', width: 100, dataIndex: 'StartAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'datecolumn', text: 'End Date', width: 100, dataIndex: 'EndAvailability', format: 'd/m/Y',
editor: {
xtype: 'datefield',
format: 'd/m/Y'
}
},
{ xtype: 'checkcolumn', text: 'Delete?', width: 60, dataIndex: 'delete', format: 'd/m/Y',
// Make checkboxes of checkcolumn unchangeable. Editor can change state then.
// Handle changes in CellEditing/RowEditing 'edit' event for consistent behavior with other columns.
listeners: {beforecheckchange: function(column, recordIndex, checked){return false}}
editor: {xtype: 'checkbox'},
// checkcolumn aligns center by default use the 2 lines below instead if you want to align left
//align: 'left',
//editor: {xtype: 'checkbox', style: 'text-align:left; display:inline; padding-left:10px;'},
}
],
tbar: [
{
text: 'Add',
tooltip: 'Add Focus Market',
iconCls: 'icon-shift-add',
scope: me,
handler: function() {
addFocusMarket.call(me);
}
}
],
plugins: [ this.mcmRowEditing ]
});
相关文章:
- 使用Dnamics CRM 2011中的JavaScript读取子网格的所有记录,而不考虑活动页面
- 比较从函数和生成的日期对象
- Json数据包含日期和时间格式
- Javascript日期格式类似于ISO,但本地
- 如何在删除第二个表中的所有记录后删除具有日期值的tr
- AngularJS基于日期检索JSON记录
- 在 Meteor 中,如何在给定年份、月份、日期的集合中找到记录
- 在 extjs4 中编辑时需要对齐复选框、添加多条记录并查看日期归档
- 使用 PHP 中记录的日期进行用户登录验证
- Breeze 查询不提取检查 sql 服务器表中日期列的记录
- 这是我的代码,我想添加日期选择器事件,它根据日期给出特定的记录
- 使用PHP从MySql数据库中选择两个日期之间的记录
- 我正在访问日期的记录:如何分配一个值时,一个特定的日期不存在
- 如何从记录集设置时间和日期的格式
- 来自ADO记录集的Javascript日期格式
- 显示包含日期和其他记录的表
- Node.js记录日期大于当前客户端日期
- 日期计算 - 以亲属的形式记录日期
- 我怎么能'fetchXml'在CRM中根据日期而不是时间进行记录
- 如何从日期中删除时间从JavaScript拉记录从SQL