PDA

View Full Version : RowEditor example...



rbastic
16 Jul 2009, 12:07 PM
Hi, I've tried to modify the roweditor example based on another datagrid I was working on.
now nothing displays at all (i started with the actual roweditor example) and I'm getting "grid.getColumnModel() is undefined" ... Not sure why, I'm specifying columns: cm in the grid object.

Here's the sample javascript code i'm workign on:

/*!
* contactRowEditor....
*/

Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}


Ext.onReady(function(){
Ext.QuickTips.init();

var fm = Ext.form;


var Contact = Ext.data.Record.create([
{name: 'Internal_Contact', type: 'int'},
{name: 'Contact', type: 'string'},
{name: 'Status' },
{name: 'Salutation', type: 'string' }, //-fixme- NOT yet implemented.
{name: 'First_Name', type: 'string'},
{name: 'Middle_Initials', type: 'string'},
{name: 'Last_Name', type: 'string'},
{name: 'Nick_Name', type: 'string'},
{name: 'Title', type: 'string'},
{name: 'Gender', type: 'string'}
]);


var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({fields: Contact}),
proxy: new Ext.data.HttpProxy({url: 'ejsGridAjax.jsp?action=contactsearch_json'}),

sortInfo: {field: 'Internal_Contact', direction: 'ASC'}
});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

var statusCombo = new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'lstatus',
lazyRender: true,
mode: 'local',
valueNotFoundText: 'Value not found!',
listClass: 'x-combo-status-small',
forceSelection: true

});

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
id: 'Internal_Contact',
header: 'Internal_Contact',
dataIndex: 'Internal_Contact',
width: 220,
editor: new fm.TextField({
allowBlank: false
}),
hidden: true
},
{
id: 'Contact',
header: 'Contact',
dataIndex: 'Contact',
width: 220,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: 'Status',
dataIndex: 'Status',
width: 130,
editor: statusCombo,
renderer: Ext.util.Format.comboRenderer(statusCombo) // pass combo instance to reusable renderer
},
{
header: 'First',
dataIndex: 'First_Name',
width: 220,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Middle',
dataIndex: 'Middle_Initials',
width: 50,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Last',
dataIndex: 'Last_Name',
width: 220,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Nick Name',
dataIndex: 'Nick_Name',
width: 64,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Title',
dataIndex: 'Title',
width: 50,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Gender',
dataIndex: 'Gender',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'lgender',
lazyRender: true,
listClass: 'x-combo-gender-small'
})
}
]);

cm.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
store: store,
width: 600,
region:'center',
margins: '0 5 5 5',
autoExpandColumn: 'First_Name',
plugins: [editor],
view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Contact',
handler: function(){

// Add Contact...
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Contact',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}],

columns: cm
});

var layout = new Ext.Panel({
title: 'Contacts',
layout: 'border',
layoutConfig: {
columns: 1
},
renderTo: 'editor-grid',

width:600,
height: 600,
items: [grid]
});
layout.render(Ext.getBody());

grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
});



As you can see, I'm just trying to do a basic JsonStore with a custom ColumnModel, the hardest thing here is probably the ComboBox... I've got the custom renderer in there that I stole from the docs... It's just erroring and I'm not sure why now.

Any help would be greatly appreciated, I'm trying to get some prototypes working for my company -- might actually have a reason to buy extjs if they work well enough... Just... so much to these APIs :(

Thanks
-Ryan

steffenk
16 Jul 2009, 12:38 PM
please edit your post and use codeboxes, if you want any help.

pmatsumura
16 Jul 2009, 1:28 PM
You should use

cm: cminstead of


columns: cm

Patrick

mjlecomte
16 Jul 2009, 5:00 PM
As already said, post in code tags so someone can read that code.

Also suggest making the posted code smaller, just post something that shows the problem at hand, not everything else you have working.

rbastic
17 Jul 2009, 6:44 AM
Hello, I posted before, here is the new code reposted.

I changed 'columns' to 'cm' and now the layout widget renders but nothing else renders yet.
Also I noticed store.load() was missing so I added that...

Still, endless problems that I can't figure out:



/*!
* contactRowEditor....
*/

Ext.util.Format.comboRenderer = function(combo){
return function(value){
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}

Ext.onReady(function(){
Ext.QuickTips.init();

var fm = Ext.form;

var Contact = Ext.data.Record.create([
{name: 'Internal_Contact', type: 'int'},
{name: 'Contact', type: 'string'},
{name: 'Status' },
// {name: 'Salutation', type: 'string' }, //-fixme- NOT yet implemented.
{name: 'First_Name', type: 'string'},
{name: 'Middle_Initials', type: 'string'},
{name: 'Last_Name', type: 'string'},
{name: 'Nick_Name', type: 'string'},
{name: 'Title', type: 'string'},
{name: 'Gender', type: 'string'}
]);


var store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({fields: Contact}),
proxy: new Ext.data.HttpProxy({url: 'ejsGridAjax.jsp?action=contactsearch_json'}),

sortInfo: {field: 'Internal_Contact', direction: 'ASC'}
});



var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
});

var statusCombo = new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'lstatus',
lazyRender: true,
mode: 'local',
valueNotFoundText: 'Value not found!',
listClass: 'x-combo-status-small',
forceSelection: true

});

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
id: 'Internal_Contact',
header: 'Internal_Contact',
dataIndex: 'Internal_Contact',
width: 220,
editor: new fm.TextField({
allowBlank: false
}),
hidden: true
},
{
id: 'Contact',
header: 'Contact',
dataIndex: 'Contact',
width: 220,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: 'Status',
dataIndex: 'Status',
width: 130,
editor: statusCombo,
renderer: Ext.util.Format.comboRenderer(statusCombo) // pass combo instance to reusable renderer
},
{
header: 'First',
dataIndex: 'First_Name',
width: 220,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Middle',
dataIndex: 'Middle_Initials',
width: 50,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Last',
dataIndex: 'Last_Name',
width: 220,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Nick Name',
dataIndex: 'Nick_Name',
width: 64,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Title',
dataIndex: 'Title',
width: 50,
editor: {
xtype: 'textfield',
allowBlank: false
}

},
{
header: 'Gender',
dataIndex: 'Gender',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'lgender',
lazyRender: true,
listClass: 'x-combo-gender-small'
})
}
]);

cm.defaultSortable = true;

var grid = new Ext.grid.EditorGridPanel({
store: store,
width: 600,
//height: 600,

region:'center',
margins: '0 5 5 5',

autoExpandColumn: 'First_Name',
renderTo: 'editor-grid',
plugins: [editor],

view: new Ext.grid.GroupingView({
markDirty: false
}),
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Contact',
handler: function(){

// Add Contact...
}
},{
ref: '../removeBtn',
iconCls: 'icon-user-delete',
text: 'Remove Contact',
disabled: true,
handler: function(){
editor.stopEditing();
var s = grid.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++){
store.remove(r);
}
}
}],

cm: cm
});


var layout = new Ext.Panel({
title: 'Contacts',
layout: 'border',
layoutConfig: {
columns: 1
},
//renderTo: 'editor-grid',

width:600,
height: 600,
items: [grid]
});
layout.render(Ext.getBody());


grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});

store.load();
});


Sorry, formatting got kind of screwed up. Btw, as someone coming from absolutely no prior vBulletin experience, i had no idea that code and /code was the right syntax... It wasn't even mentioned in the FAQ from what I saw.

Anyway, this s till isn't doing much, anyone have any ideas/suggestions?

rbastic
17 Jul 2009, 6:48 AM
The reason I didn't trim down the amount of code is because I really don't know what IS and ISN'T working... Extjs doesn't provide a lot of diagnostic notification when a user does something stupid, so I really have almost no way of figuring this out :)

mjlecomte
17 Jul 2009, 6:58 AM
Hello, Sorry, formatting got kind of screwed up. Btw, as someone coming from absolutely no prior vBulletin experience, i had no idea that code and /code was the right syntax... It wasn't even mentioned in the FAQ from what I saw.

http://extjs.com/learn/Ext_Forum_Help#How_to_post_code_properly

Follow that and it will help you improve what you post.

mjlecomte
17 Jul 2009, 7:01 AM
Is this your first grid more or less?

If so I would not make this your first grid using renderer, roweditor, etc.

Have you looked at the Grid FAQ? It has a section for debugging steps to go through when having problems with grids (for example adding a load and exception listener to your store to see which one fires).

Post new code in new posts as you update your code based on forum help.