PDA

View Full Version : ExtJS 4.1.1a Grid With RowEditor Plugin Not Working Correctly



npuleo
27 Feb 2013, 5:38 AM
I've converted a project I had from version 3 to 4. All has gone fairly smoothly but I've been unable to get the row editor working on the grid correctly. I'm able to doubleclick to edit the row and I see the post backs correctly, the problem is the text box sizes are off and I'm unable to click the checkboxes (and they don't have the values) of the row for what I'm editing.

42086

Here's the code:


var grid;
var contactReader;

Ext.onReady(function(){

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'ID', type: 'int'},
{name: 'First', type: 'string'},
{name: 'Last', type: 'string'},
{name: 'Title', type: 'string'},
{name: 'EmailBusiness', type: 'string'},
{name: 'PhoneOffice', type: 'string'},
{name: 'PhoneMobile', type: 'string'},
{name: 'Contact', type: 'boolean'},
{name: 'DeclarationAuthority', type: 'boolean'},
{name: 'HostingAuth', type: 'boolean'},
{name: 'BadgeAuthority', type: 'boolean'},
{name: 'Manager', type: 'boolean'},
{name: 'ChallengeQuestion', type: 'string'},
{name: 'ChallengeResponse', type: 'string'},
{name: 'Disabled', type: 'boolean'}
]
});


contactReader = new Ext.data.JsonStore({
idProperty: 'ID',
successProperty: 'success',
totalProperty: 'total',
model: 'User',
root: 'clients',
proxy: {
type: 'ajax',
api: {
read: 'ajax/ajax_helper.php?ajaxFunction=GET_JSON_Contacts',
create: 'ajax/ajax_helper.php?ajaxFunction=NEW_JSON_Contacts',
update: 'ajax/ajax_helper.php?ajaxFunction=UPDATE_JSON_Contacts',
destroy: 'ajax/ajax_helper.php?ajaxFunction=DELETE_JSON_Contacts'
},
reader: {
type: 'json',
root: 'clients'
}
},
writer: {
writeAllFields: true,
type: 'json',
root: 'clients',
allowSingle: false,
encode: true,
autoCommit: false
},
autoLoad: true,
autoSync: true,
batch: false
});

function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

var editor = Ext.create('Ext.grid.plugin.RowEditing', {
pluginId: 'rowEditorX',
clicksToEdit: 2
});


grid = Ext.create('Ext.grid.Panel', {
store: contactReader,
width: '100%',
renderTo: 'contact-div',
selType: 'rowmodel',
plugins: [ editor ],
viewConfig: {
loadMask: false,
getRowClass: function(record) {
if (record.get('Disabled')) {
return 'red-row';
} else {
return '';
}
}
},
height: 600,
columns: [
{header: 'ID', sortable: true, dataIndex: 'ID', hidden: true},
{header: 'First', width: 90, sortable: true, dataIndex: 'First', editor: { xtype: 'textfield', allowBlank: false} },
{header: 'Last', width: 120, sortable: true, dataIndex: 'Last',editor: { xtype: 'textfield', allowBlank: false} },
{header: 'Title', width: 115, sortable: true, dataIndex: 'Title',editor: { xtype: 'textfield', allowBlank: true} },
{header: 'Email', width: 170, renderer: renderEmail, sortable: true, dataIndex: 'EmailBusiness',editor: { xtype: 'textfield', allowBlank: false} },
{header: 'PhoneOffice', width: 120, sortable: true, dataIndex: 'PhoneOffice',editor: { xtype: 'textfield', allowBlank: true} },
{header: 'PhoneMobile', width: 80, sortable: true, dataIndex: 'PhoneMobile',editor: { xtype: 'textfield', allowBlank: true} },
{header: 'Contact', width: 50, renderer:renderIcon, sortable: true, dataIndex: 'Contact',editor: { xtype: 'checkbox', allowBlank: true} },
{header: 'DA', width: 45, renderer:renderIcon, sortable: true, dataIndex: 'DeclarationAuthority',editor: { xtype: 'checkbox', allowBlank: true} },
{header: 'Hosting', width: 45, renderer:renderIcon, sortable: true, dataIndex: 'HostingAuth',editor: { xtype: 'checkbox', allowBlank: true} },
{header: 'Badge', width: 45, renderer:renderIcon, sortable: true, dataIndex: 'BadgeAuthority',editor: { xtype: 'checkbox', allowBlank: true} },
{header: 'PM', width: 55, renderer:renderIcon, sortable: true, dataIndex: 'Manager',editor: { xtype: 'checkbox', allowBlank: true} },
{header: 'ChallengeQuestion', width: 0, hidden: true, dataIndex: 'ChallengeQuestion' },
{header: 'ChallengeResponse', width: 0, hidden: true, dataIndex: 'ChallengeResponse' },
{header: 'Disabled', width: 0, hidden: true, dataIndex: 'Disabled' }
],
forceFit: true,
defaults: { flex: 1 },

tbar: [{
iconCls: 'user-add',
id: 'user-add',
text: 'Add Contact',
disabled: true,
//here we can check to see if they have rights to enable/disable users
//disabled: true,
handler: function(){
var e = Ext.create('User', {
contact: 1
});
contactReader.insert(0, e);
editor.startEdit(0,1);
}
},{
iconCls: 'user-del',
id: 'user-del',
text: 'Remove Contact',
disabled: true,
handler: function() {
Ext.MessageBox.confirm('Confirm Deletion', 'Are you sure that you want to delete this user?', function(btn){
if (btn == 'yes') {
editor.stopEditing();
var s = grid.getSelectionModel().getSelection();
for(var i = 0, r; r = s[i]; i++){
contactReader.remove(r);
}
contactReader.commitChanges();
} else {
//do nothing
}
});
}
},{
iconCls: 'user-edit',
id: 'user-edit',
text: 'Edit Contact',
disabled: true,
handler: function() {
rowsSelected = grid.getSelectionModel().getSelection();
aRecord = rowsSelected[0];

window.location = '/profile.php?userID=' + aRecord.get('ID');
}
},
'|',{
iconCls: 'icon-help',
text: 'Challenge',
id: 'moreinfo',
disabled: true,
handler: function(){
var showResult;
var record = grid.getSelectionModel().getSelection();
var output;
output = buildContact(record[0]);
document.getElementById('contact-info').innerHTML = output;
}

},'|',{
iconCls: 'icon-disable',
text: 'Disable/Enable',
id: 'user-dis',

disabled: true,
handler: function(){
rowsSelected = grid.getSelectionModel().getSelection();
aRecord = rowsSelected[0];
if (aRecord.get('Disabled') == true) {
$.ajax({
url: "/ajax/ajax_helper.php",
data: 'ajaxFunction=disableUser&method=enable&id='+ aRecord.get('ID'),
success: function(msg){
aRecord.set('Disabled') == false;
contactReader.reload();
}
});
} else {
$.ajax({
url: "/ajax/ajax_helper.php",
data: 'ajaxFunction=disableUser&method=disable&id='+ aRecord.get('ID'),
success: function(msg){
aRecord.set('Disabled') == true;
contactReader.reload();
}
});

}
}

},
'|',{
iconCls: 'icon-vcard',
id: 'user-vcard',
text: 'VCard',
handler: function() {
rowsSelected = grid.getSelectionModel().getSelection();
aRecord = rowsSelected[0];

window.location = '/includes/vcard.php?vid=' + aRecord.get('ID');


}
},
'->',{

iconCls: 'user-highlight',
text: 'Highlight',
xtype: 'splitbutton',
menu: [{
text: 'Contacts',
handler: function(){
grid.getView().focusEl.focus();
grid.getView().getRowClass = function(record, index){
if (record.data.Contact == true) {
return 'yellow-row';
}
};
grid.getView().refresh();
}
},{
text: 'Declaration Authority',
handler: function(){
grid.getView().focusEl.focus();
grid.getView().getRowClass = function(record, index){
if (record.data.DeclarationAuthority == true) {
return 'yellow-row';
}
};
grid.getView().refresh();
}
},{
text: 'Hosting Authority',
handler: function(){
grid.getView().focusEl.focus();
grid.getView().getRowClass = function(record, index){
if (record.data.HostingAuth == true) {
return 'yellow-row';
}
};
grid.getView().refresh();
}
},{
text: 'Manager',
handler: function(){
grid.getView().focusEl.focus();
grid.getView().getRowClass = function(record, index){
if (record.data.Manager == true) {
return 'green-row';
}
};
grid.getView().refresh();
}
}]
}]
});


function renderIcon(val) {
if (val==1) { return '<img src="images/icons/star.png">'; } else { return '<p>&nbsp;</p>'; }
}

function renderEmail(val) {
return '<a href="mailto:'+val+'">'+val+'</a>';
}

grid.on('itemclick', function () {
Ext.getCmp('moreinfo').enable();
Ext.getCmp('user-del').enable();
Ext.getCmp('user-edit').enable();
Ext.getCmp('user-dis').enable();
});


function buildContact(record) {
var output = '';
output+= '<p align="right"><a onclick="hideContact();" style="cursor: pointer;"><img src="/images/icons/close-icon.png"></a></p>';
output+='<h1>'+record.get('First')+' ' +record.get('Last')+'</h1>';
output+= '<p>'+record.get('EmailBusiness')+'</p>';
output+= '<p><strong>Challenge: </strong>'+record.get('ChallengeQuestion')+'</p>';
output+= '<p><strong>Response: </strong>'+record.get('ChallengeResponse')+'</p>';
$('#contact-info').slideDown('slow', function() {
// Animation complete
});
return output;

}
Ext.getCmp('user-add').enable();

});

$(document).ready(function() {
init();
});

function hideContact() {
$('#contact-info').slideUp('slow', function() {
// Animation complete
});
return true;

}


Any help would be most appreciated, I've been banging my head against the wall for a week on this.

scottmartin
27 Feb 2013, 10:15 AM
That is a lot of custom code/css to go through.

Perhaps start simple and work your code back in until you find the problem:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.RowEditing

Scott

npuleo
27 Feb 2013, 10:28 AM
I've basically stripped it down to nothing but the data model and the grid and it's still giving me the same.

I posted it here hoping someone had seen something similar to what I see with the display issues for the row editor - even generically. Or why the checkboxes in the row editor would get the values or allow me to click them.

EPV
27 Feb 2013, 10:42 AM
For that amount of code i would recommend you making it runnable in http://jsfiddle.net/.

1. Choose Ext JS 4.1.1 library to the left
2. Attach extjs css as an extrnal resource to the left http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css
3. Click "save" and post the link here.

That makes it alot easier for the forum guys to help you!

Good luck!






(http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css)

npuleo
27 Feb 2013, 12:27 PM
Thanks. If anything it looks like it's just a CSS bug on my part and the code is correct.