I am able to load my first combobox with field name "projectID".
When I select a combobox value, I want to populate the axcode field.
I know that my url works, and the data that is retrieved is:
[{"id":"26","groupID":"1","projectID":"18","Description":"Holiday","isActive":"1"},{"id":"28","groupID":"1","projectID":"18","Description":"Other","isActive":"1"},{"id":"24","groupID":"1","projectID":"18","Description":"Sick Leave","isActive":"1"},{"id":"27","groupID":"1","projectID":"18","Description":"Unpaid Leave","isActive":"1"},{"id":"25","groupID":"1","projectID":"18","Description":"Vacation","isActive":"1"}]
Can someone tell me why this code doesn't work?
{field:'projectID',
title:'Project/Paid Leave',
width:100,
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'DescriptionCode',
data:cmbprojects,
required:true,
editable:false,
onSelect:function(record){
$('#axCode').combobox('reload','remote_combo_data.php?type=projectax&projectID='+record.id);
}
// closes onSelect
}
// closes options
}
// closes editor
}
// closes field
,
{
field:'axCode',
title:'axCode',
width:100,
editor:{
type:'combobox',
valueField:'id',
textField:'Description',
data:cmbaxcodes,
required:true,
editable:false
}
// closes editor
,formatter:function(value,row,index){return row.Description;}
// closes formatter
}
// closes field
,
{
field:'activityID',
title:'Activity',
width:100,
editor:{
type:'combobox',
options:{
// this is a key/value pair from the data source
valueField:'id',
textField:'ActivityCode',
data:cmbactivities,
required:true,
editable:false
}
// closes options
}
// closes editor
,formatter:function(value,row,index){return row.ActivityCode;}
}
//closes field
you can try to do like this
<select class="easyui-combobox " data-options="
required:true,
valueField:'family_id',
textField:'family',
url:'<?php echo site_url(); ?>/ref_json/DataFamily',
onSelect: function(rec){
var url = '<?php echo site_url(); ?>/ref_json/DataMaterial1/'+rec.family_id;
$('#material').combobox('reload',url);
}" id="family" name="family" style="width:120px;">
</select>
Related
I have a MessageBox configured like that
Ext.MessageBox.show({
buttons:Ext.MessageBox.OKCANCEL,
prompt:true,
buttonText:{ok:"Button1",cancel:"Button2"},
fn:function(btn, text, cBoxes){
if(btn=='ok'){
// do not close
// return false does not help
}
}
});
I do not know how to prevent it from closing on button click. In particular, I do not want to make it close when the user hits "ok" button. I've seen overrides on the Web, but do not know how to poperly configure buttons properties. I guess, there should be a very simple solution for this task.
You should use a regular window over which you'll have full control.
In your case, that would be something like this:
Ext.widget('window', {
autoShow: true
,closable: false
,modal: true
,title: "My window"
,defaults: {
margin: 5
}
// you can obviously compose the items you want; an input field
// is what you get with the prompt window
,items: [{
xtype: 'textfield'
,itemId: 'inputField'
}]
,buttons: [{
text: "Button1"
,handler: function(button) {
// here's how to get a ref to the window (for closing)
var win = button.up('window'),
// here's the value of the field
input = win.down('#inputField').getValue();
// you can close the window if you want, or not
if (!Ext.isEmpty(input)) {
win.close();
}
}
},{
text: "Button2"
,handler: function() {
// ...
}
}]
});
I have a combo box inside a form like:
xtype: 'combo',
id: 'example',
name: 'ax',
triggerAction: 'all',
forceSelection: true,
editable: false,
allowBlank: false,
fieldLabel: 'example',
mode: 'remote',
displayField:'name',
valueField: 'id',
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'id'},
{name: 'name'}
],
//autoLoad: false,
proxy: {
type: 'ajax',
url: 'example.php',
reader: {
type: 'json',
root: 'rows'
}
}
}
})
I don't want that auto load because that's slow when i start.
But i want set a value to combo box when i click edit button and load value to combo
this.down('form').getForm().load({
url: 'load.php',
success:function(){
}
});
data from load.php like (name of combe is ax)
{ success:true , data : { ax: '{"id":"0","name":"defaults"}' } }
But that's not working. How can i do that thanks.
p/s: If i have autoLoad : true and data is { success:true , data : { ax: '0' } } that's work well. But that's slow when i start.
What you want to do is make sure the combo is loaded before you try to set it's value.
You could check if the combo's store has any data in it:
if(combo.getStore().getCount() > 0)
{
//the store has data so it must be loaded, you can set the combo's value
//doing a form.load will have the desired effect
}
else
{
//the store isn't loaded yet! You can't set the combo's value
//form.load will not set the value of the combo
}
If it does, you can just set the value. But more likely however it will not have been loaded.
You could also do something like this
//in the controller's init block
this.control({
"#myEditButton" : {click: this.loadForm}
});
//a function in your controller
loadForm: function(button)
{
var combo; //get your combo somehow, either via references or via the button
combo.getStore().load({
scope: this,
callback:
function(records, operation, success)
{
if(success)
{
//load your form here
}
}
});
}
I know that might seem like a lot of code, but it's the only way to know for sure if the combo was loaded. If it is not, you cannot set it's value.
A third option would just be to explicitly load the store before you open your view.
I've a combobox (e.g. change owner). When a user selects a value of the combobox, I prompt user if he is sure to change owner. If he clicks on 'Yes', I update the record in database. All works fine till this point.
Now, if the user selects a value and clicks 'No' on prompt (after selecting value from combo). The combo retains the new value and does not bring it back to the old value. I tried setValue/Load etc but none is setting back the old value on the click on No.
My Code looks like this
combo = new Ext.form.ComboBox({
store: storeJson,
xtype: 'combo',
displayField:'name',
valueField: 'id',
mode: 'local',
id: 'privateTo',
name: 'privateTo',
typeAhead: false,
triggerAction: 'all',
lazyRender: true,
editable:false,
listeners: {select: changeOwner}
});
var changeOwner = function(combo, record, index) {
Ext.MessageBox.confirm("Change Owner","Are you sure you want to change owner?",function(btn){
if (btn == "yes") {
Ext.Ajax.request({
url: 'somUrl',
method: 'PATCH',
success: function(result, request) {
msg('Owner changed', 'Owner changed');
},
failure: function(result, request) {
Ext.MessageBox.alert('Error', "Unable to change owner");
Ext.getCmp("customizationGrid").getStore().reload();
}
});
} else {
var d = Ext.getCmp('customizationGrid').getSelectionModel().selection;
var rec = combo.store.getById(d.record.json.privateTo);
Ext.getCmp("privateTo").setValue(rec.data.name);
}
});
}
Just remove the else { ... } block, it should take care of NO. :-)
The last selected value of your combo is already present in the select handler.
You can simply do :
...
} else {
combo.setValue(combo.startValue);
}
I use Grid panel. When I select the row in the grid I get the following results:
If I render the Form in 'document.body' everything is OK, and form
fields are filled.
If I, same Form start in Window panel, Form fields are empty.
When I use both, Form which is rendered in the 'document.body' is
closed, and Form fields in Window are filled.
Where I make mistake.
// Grip panel part
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, index, record) {deleteWindow.show();}
}
})
// End Grid panel part
var myForm = new Ext.form.FormPanel({
title:"Basic Form",
width:425,
frame:true,
items: [
new Ext.form.TextField({
id:"to",
fieldLabel:"To",
width:275,
allowBlank:false,
blankText:"Please enter a to address",
readOnly: true
}),
new Ext.form.TextField({
id:"subject",
fieldLabel:"Subject",
width:275,
allowBlank:false,
blankText:"Please enter a subject address",
readOnly: true
}),
],
buttons: [
{text:"Cancel"},
{text:"Save"}
]
});
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm
});
var id_test = 2; // This is only for this problem
//myForm.render(document.body); // When using this code everything is ok, and form fields are filled
myForm.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
JSON data
{success:true,results:[{"id_test":"1","to":"a","subject":"aa"}]}
I would suggest the following changes to the code:
In place of using the id property on the TextField (say, id: 'subject'), use name property (name: 'subject')
Just curious....since you are handling the rowselect event on the grid, you might want to load the selected record in the form panel rather than loading it again. If this is the case, then you may call the loadRecord() method on the form panel and pass the record object to it and then call the show() method on the window
I figured out that when load is called on form, ExtJS tries to access form dom element to determine form method. I've found 2 solutions:
Add method to the form config
Load data to form after window is showed
Here is code for second solution:
var deleteWindow = new Ext.Window({
id: 'id_deleteWindow',
title: 'Delete',
closable:true,
width: 750,
height: 380,
plain:true,
layout: 'fit',
items: myForm,
listeners: {
show: function() {
var form = this.items.get(0);
form.getForm().load({
url:'ggg.php',
params:{
id: id_test
}
});
}
}
});
deleteWindow.show();
I am using EXTJS with an editorgridpanel and I am trying to to insert a combobox, populated with JsonStore.
Here is a snapshot of my code:
THE STORE:
kmxgz.ordercmpappro.prototype.getCmpapproStore = function(my_url) {
var myStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: my_url
, method: 'POST'
})
, reader: new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'total',
id: 'list_cmpappro_id',
fields: [
{name: 'list_cmpappro_id', mapping: 'list_cmpappro_id'}
, {name: 'list_cmpappro_name', mapping: 'list_cmpappro_name'}
]
})
, autoLoad: true
, id: 'cmpapproStore'
, listeners: {
load: function(store, records, options){
//store is loaded, now you can work with it's records, etc.
console.info('store load, arguments:', arguments);
console.info('Store count = ', store.getCount());
}
}
});
return myStore;
};
THE COMBO:
kmxgz.ordercmpappro.prototype.getCmpapproCombo = function(my_store) {
var myCombo = new Ext.form.ComboBox({
typeAhead: true,
lazyRender:false,
forceSelection: true,
allowBlank: true,
editable: true,
selectOnFocus: true,
id: 'cmpapproCombo',
triggerAction: 'all',
fieldLabel: 'CMP Appro',
valueField: 'list_cmpappro_id',
displayField: 'list_cmpappro_name',
hiddenName: 'cmpappro_id',
valueNotFoundText: 'Value not found.',
mode: 'local',
store: my_store,
emptyText: 'Select a CMP Appro',
loadingText: 'Veuillez patienter ...',
listeners: {
// 'change' will be fired when the value has changed and the user exits the ComboBox via tab, click, etc.
// The 'newValue' and 'oldValue' params will be from the field specified in the 'valueField' config above.
change: function(combo, newValue, oldValue){
console.log("Old Value: " + oldValue);
console.log("New Value: " + newValue);
},
// 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
select: function(combo, record, index){
console.log(record.data.name);
console.log(index);
}
}
});
return myCombo;
};
The combobox is inserted in an editorgridpanel.
There's a renderer like this:
Ext.util.Format.comboRenderer = function(combo){
return function(value, metadata, record){
alert(combo.store.getCount()); //<== always 0!!
var record = combo.findRecord(combo.valueField || combo.displayField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
};
When the grid is displayed the first time, instead of have the displayField, I have : "Value not found."
And I have the alert : 0 (alert(combo.store.getCount())) from the renderer.
But I can see in the console that the data have been correctly loaded!
Even if I try to reload the store from the renderer (combo.store.load();), I still have the alert (0)!
But when I select the combo to change the value, I can see the data and when I change the value, I can see the displayFiel!
I don't understand what's the problem?
Since now several days, I already tried all the solutions I found...but still nothing!
Any advice is welcome!
Yoong
The core of the problem is that you need to hook an listener which will execute after the grid store loaded. That listener will then convert the combo grid content to the displayField content instead of valueField.
Here is my resolution to this issue.
Ext.ns("Ext.ux.renderer");
Ext.ux.renderer.ComboBoxRenderer = function(combo, grid) {
var getValue = function(value) {
var record = combo.findRecord(combo.valueField, value);
return record ? record.get(combo.displayField) : value;
};
return function(value) {
var s = combo.store;
if (s.getCount() == 0 && grid) {
s.on({
load: {
single: true,
fn: function() {
grid.getView().refresh()
}
}
});
return value
}
return getValue(value)
}
};
You can use this renderer in your code like the following:
{
header: 'Header',
dataIndex: 'HeaderName',
autoWidth: true,
renderer: Ext.ux.renderer.ComboBoxRenderer(combo, grid),
editor: combo
}
This is a common issue. If you need a store value to display in the combo, handle the store's load event and select the appropriate value in the combo only after that. You shouldn't need a specific record just to render the combo up front.
I would recommend adding the field required from the combobox's store, to the grid's store, and change the renderer to use that field. (It does not have to be in the database)
and on the afteredit event of the grid, grab that value from the combobox's store and copy it to the grid's store.
This would yield better performance.
Actually, the problem seems to be that the grid renders the combobox values BEFORE the loading of the store data.
I found something here.
But when I applied the override, still the same problem...
The question i: how to defer the render of the combobox, waiting for the loading of the store?