jwong
19 Jun 2008, 7:18 AM
Hey Guys,
I have searched through the forums and tried solutions piece by piece on my grid but it still doesn't work properly. Any help is highly appreciated.
The grid and all the combos share the same store.
When you make any changes in any combo box and tab out, it doesn't keep it.
When you type in the combo box, having the focus on the combo box for more than a couple of seconds, it flashes back to the first value on the list.
Grid Code:
Ext.onReady(function(){
Ext.QuickTips.init();
// shorthand alias
var fm = Ext.form;
store = new Ext.data.JsonStore({
url: 'admin/searchrules.action',
fields: ['from', 'to', 'ruleContextCode', 'results1'],
root: 'records',
totalProperty: 'record_count',
autoLoad:true
});
var comboFrom = new Ext.form.ComboBox({
displayField:'from',
store: store,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a sender',
selectOnFocus:true,
listeners: {
beforequery: function(qe) {
qe.forceAll = true;
}
}
});
var comboTo = new Ext.form.ComboBox({
displayField:'to',
store: store,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a recipient',
selectOnFocus:true,
listeners: {
beforequery: function(qe) {
qe.forceAll = true;
}
}
});
var comboContext = new Ext.form.ComboBox({
displayField:'ruleContextCode',
store: store,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a result',
selectOnFocus:true,
listeners: {
beforequery: function(qe) {
qe.forceAll = true;
}
}
});
var comboResults = new Ext.form.ComboBox({
displayField:'results1',
store: store,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select rule context',
selectOnFocus:true,
listeners: {
beforequery: function(qe) {
qe.forceAll = true;
}
}
});
var cm = new Ext.grid.ColumnModel([{
id:'from',
header: "From",
dataIndex: 'from',
editor: comboFrom
},{
header: "To",
dataIndex: 'to',
editor: comboTo
},{
header: "Context",
dataIndex: 'ruleContextCode',
editor: comboContext
},{
header: "Results",
dataIndex: 'results1',
editor: comboResults
}
]);
// by default columns are sortable
cm.defaultSortable = true;
var Rules = Ext.data.Record.create([
{name: 'key'},
{name: 'from'},
{name: 'to'},
{name: 'results1'},
{name: 'results2'},
{name: 'ruleContextName'},
{name: 'ruleContextCode'},
])
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'rules-grid',
width:800,
height:400,
title:'Rules',
frame:true,
clicksToEdit: 1,
viewConfig: {
forceFit: true
},
// inline buttons
buttons: [{text:'Save'},{text:'Cancel'}],
buttonAlign:'center',
// inline toolbars
tbar:[{
text:'Add Rules',
iconCls:'add',
handler : function(){
var r = new Rules({
from: 'ANY',
to: 'ASO',
ruleContextCode:'Use Default Templates',
results1: 'Yes'
});
grid.stopEditing();
store.insert(0, r);
grid.startEditing(0, 0);
}
}],
});
grid.render("rules-grid");
};
Store Code Example:
{record_count: "6","records":[{key: "1", from: "ANY", to: "ANY", results1: "First", results2: "First", ruleContextName:"TEMPLATE_ORDER_SELECTION", ruleContextCode:"Template Order Selection"},
Also is it possible to return only distinct values from the store to populate the combo box? In the screenshot, you will see "ANY" repeated as an option multiple times. I would like it to display as an option only once.
I have searched through the forums and tried solutions piece by piece on my grid but it still doesn't work properly. Any help is highly appreciated.
The grid and all the combos share the same store.
When you make any changes in any combo box and tab out, it doesn't keep it.
When you type in the combo box, having the focus on the combo box for more than a couple of seconds, it flashes back to the first value on the list.
Grid Code:
Ext.onReady(function(){
Ext.QuickTips.init();
// shorthand alias
var fm = Ext.form;
store = new Ext.data.JsonStore({
url: 'admin/searchrules.action',
fields: ['from', 'to', 'ruleContextCode', 'results1'],
root: 'records',
totalProperty: 'record_count',
autoLoad:true
});
var comboFrom = new Ext.form.ComboBox({
displayField:'from',
store: store,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a sender',
selectOnFocus:true,
listeners: {
beforequery: function(qe) {
qe.forceAll = true;
}
}
});
var comboTo = new Ext.form.ComboBox({
displayField:'to',
store: store,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a recipient',
selectOnFocus:true,
listeners: {
beforequery: function(qe) {
qe.forceAll = true;
}
}
});
var comboContext = new Ext.form.ComboBox({
displayField:'ruleContextCode',
store: store,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a result',
selectOnFocus:true,
listeners: {
beforequery: function(qe) {
qe.forceAll = true;
}
}
});
var comboResults = new Ext.form.ComboBox({
displayField:'results1',
store: store,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select rule context',
selectOnFocus:true,
listeners: {
beforequery: function(qe) {
qe.forceAll = true;
}
}
});
var cm = new Ext.grid.ColumnModel([{
id:'from',
header: "From",
dataIndex: 'from',
editor: comboFrom
},{
header: "To",
dataIndex: 'to',
editor: comboTo
},{
header: "Context",
dataIndex: 'ruleContextCode',
editor: comboContext
},{
header: "Results",
dataIndex: 'results1',
editor: comboResults
}
]);
// by default columns are sortable
cm.defaultSortable = true;
var Rules = Ext.data.Record.create([
{name: 'key'},
{name: 'from'},
{name: 'to'},
{name: 'results1'},
{name: 'results2'},
{name: 'ruleContextName'},
{name: 'ruleContextCode'},
])
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'rules-grid',
width:800,
height:400,
title:'Rules',
frame:true,
clicksToEdit: 1,
viewConfig: {
forceFit: true
},
// inline buttons
buttons: [{text:'Save'},{text:'Cancel'}],
buttonAlign:'center',
// inline toolbars
tbar:[{
text:'Add Rules',
iconCls:'add',
handler : function(){
var r = new Rules({
from: 'ANY',
to: 'ASO',
ruleContextCode:'Use Default Templates',
results1: 'Yes'
});
grid.stopEditing();
store.insert(0, r);
grid.startEditing(0, 0);
}
}],
});
grid.render("rules-grid");
};
Store Code Example:
{record_count: "6","records":[{key: "1", from: "ANY", to: "ANY", results1: "First", results2: "First", ruleContextName:"TEMPLATE_ORDER_SELECTION", ruleContextCode:"Template Order Selection"},
Also is it possible to return only distinct values from the store to populate the combo box? In the screenshot, you will see "ANY" repeated as an option multiple times. I would like it to display as an option only once.