using extjs 5.1.0
My issues, when I add value to store of grid and then call store.sync()
inserted row become selected (visually) but I cannot select it for edit or darg&drop row for sorting, only helps reload grid.
here is my store:
var store = Ext.create('Ext.data.ArrayStore', {
model: 'pbxe.module.conference.ConferenceModel',
proxy: {
type: 'direct',
api: {
read: pbxe._conference.read,
create: pbxe._conference.create,
update: pbxe._conference.update,
destroy: pbxe._conference.destroy,
},
reader: {
rootProperty: 'data',
totalProperty: 'totalCount',
successProperty: 'success',
messageProperty: 'message'
},
writer: {
writeAllFields: true,
},
},
autoSync: false,
autoLoad: true,
});
We ran into same problem, seems there is an issue of the Selection Model keeping a map of the records added to the store which can't get "deselected".
So with a bit of brute force:
// WORKAROUND for grid / selection model problem
// after adding multiple new records with Store.sync()
//var grid = grid bound to this store...
myStore.sync(
{
scope: this,
success: function (batch, options) {
var sm = grid.getSelectionModel();
var records = batch.operations[0].getRecords();
if (sm && sm.selected)
{ // deselect does not work as has bug leaves new records in map
sm.selected.map = {}; //wipe clear the selected records map
}
sm.select(records);
}
});
Hope this helps - works for us in Ext JS 5.1.0
Related
Okay, so I have a view that extends Ext.dataview.component.DataItem' I have this function
onNameButtonTap: function(button, e) {
var record = this.getRecord();
console.log("The tid of this record is: " + record.get('tid'));
}
I am able to get an tid back from this tap, which I would like to use to load a new view that will use this id to alter the proxy url to get back different data. Here is the view:
Ext.define('AIN.view.Headlines.Card', {
extend: 'Ext.NavigationView',
xtype: 'headlineContainer',
config: {
tab: {
title: 'Headlines',
iconCls: 'star',
action: 'headlinesTab'
},
autoDestroy: false,
items: [
{
xtype: 'headlines',
store: 'Headlines',
}
]
}
});
How would I get the url parameter in my store to accept a URL like this one
'http://mywebsite.com/app-feeds/channels/' + tid
Thanks for reading, I am new to this and after hours of google searching I can't quite figure this out.
Update, this is working for me.
var store = Ext.StoreMgr.get('Headlines');
store: store.setProxy({
type: 'jsonp',
url: 'http://awebsite.com/app-feeds/channels/' + tid,
reader: {
type: 'json',
rootProperty: 'nodes',
record: 'node'
}
}).load()
You can set the URL of an Ext.data.Store by doing:
store.getProxy().setUrl('http://mywebsite.com/app-feeds/channels/' + tid);
Note that if you are planning on using this Store in multiple areas that use different URLs, you may want to create a new instance of it when you are setting the URL.
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.
Hi all I am using Extjs 3.4 my problem is I have one editor grid panel
and inside panel I have one department combobox. So, in first page I
have search grid and on click of grid I am coming to this page and on
load using ajax I am populating combobox value in grid panel. But sometimes
values are not coming, means it is invisible and only after clicking on that
combobox it is appearing. Can some body explain what is the problem.
Thanks in advance, I hope will get reply soon.
While populating I am calling one ajax which is populating values in grid but
there is no issue with other columns, only with combobox it is invisible sometimes
Ext.util.Format.comboRenderer = function(Departmentscombo){
return function(value){
var record = combo.findRecord(combo.valueField || combo.displayField, value);
return record ? record.get(combo.displayField) : combo.valueNotFoundText;
}
}
Ext.grid.ComboColumn = Ext.extend(Ext.grid.Column, {
constructor: function(cfg){
Ext.grid.ComboColumn.superclass.constructor.call(this, cfg);
this.renderer = Ext.util.Format.comboRenderer(this.editor.field ?
this.editor.field : this.editor);
}
});
Ext.apply(Ext.grid.Column.types, {
combocolumn: Ext.grid.ComboColumn
});
var DepartmentsJReader = new Ext.data.JsonReader
({ root: 'data', id: 'mastercode' },
[{ name: 'mastercode' }, { name: 'description'}]);
Departments_store = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy(
{ url: '', method: 'GET' }),
reader: DepartmentsJReader, autoLoad: true,
listeners:
{
load: function () {
var rec = new Departments_store.recordType({ mastercode:'-', description: '-' });
rec.commit();
Departments_store.insert(0, rec);
Departments_store.commitChanges();
}
}
});
Does anyone have/know of a working example of a moving rows within an EditorGridPanel (or know why it's not working for me)?
I've found few examples, and the ones I've found use this approach:
// calculate the new index, then remove the record from the store, and re-insert it at the new index
grid.getStore().remove(record);
grid.getStore().insert(index, record);
In my case this fails. It looks good in the grid, but 2 DELETE http requests actually get sent to the server, and no PUT. This becomes evident when I reload the page - the moved row has actually been deleted.
He're the basic config of my store:
var remoteJsonStore = new Ext.data.JsonStore({
storeId: 'colStore',
autoDestroy: false,
autoSave: true,
proxy: new Ext.data.HttpProxy({url:'/exercises/collect/data_rows'}),
restful: true,
format: 'json',
disableCaching: false,
autoLoad: true,
writer: new Ext.data.JsonWriter({
encode: false
}),
root: 'data',
idProperty: 'data_row_id',
fields: recordFields,
baseParams:{section_id:GridUtils.properties[gridId]['section_id']},
listeners:{
exception:function(misc){
// stuff....
},
beforewrite:function(store, action, rs, options, arg){
this.baseParams["position"]=rs.rowIndex;
},
beforesave:function(store, data){
// stuff.... }
}
}
});
I had a similar problem when implementing a DnD reordering view. The problem is that the store marks every remove()d record for delete, even if you re-insert it.
Reading the source of Ext.data.Store's remove() method, I found a solution:
remove: function(records, /* private */ isMove) {
See? We can pass a second boolean agument to tell the store we are just moving the record! But being marked as private and not documented, we should take care when upgrading to a new version of the framework.
So the final solution is:
grid.getStore().remove(record, true); // just moving
grid.getStore().insert(index, record);
ExtJS version: 4.1
I write special combo object to use it as linked combos. Here it is:
comboDivClass = Ext.extend(Ext.form.ComboBox, {
fieldLabel: 'Divisions',
anchor: '95%',
lazyRender:true,
store:new Ext.data.Store({
proxy: proxy,
baseParams:{rfb_type:'divisions'},
reader: divReader,
autoLoad: true
}),
displayField:'div_name',
allowBlank:false,
valueField:'div_id',
triggerAction:'all',
mode:'local',
listeners:{
select:{
fn:function(combo, value) {
if (this.idChildCombo) {
var modelCmp = Ext.getCmp(this.idChildCombo);
modelCmp.setValue('');
modelCmp.getStore().reload({
params: { 'div_id': this.getValue() }
});
}
}
}
},/**/
hiddenName:'div_id',
initComponent: function() {comboDivClass.superclass.initComponent.call(this);}})
As you may see, this combobox load data at child combobox store(which set as idChildCombo).
Ok. Here is how i declare it
new comboDivClass({id:'sub0div',idChildCombo:'sub1div'}),
new comboDivClass({id:'sub1div'})
Yes it works, but it have some odd trouble - it load not only sub1div store, it load at sub0div store too. Why? What im doing wrong?
One thing I see is that you have mode: 'local' config, while it should be remote.
Other thing to consider: Why don't you do it more like this:
var c1 = new comboDivClass({id:'sub0div'});
var c2 = new comboDivClass({id:'sub1div'});
c1.on('select',function(combo, value) {c2.getStore().reload({
params: { 'div_id': c1.getValue() }
})});
ChildCombo.setMasterField( masterField ) {
masterField.on('change', function(field){
this.getStore().filterBy( function(){ //filter by masterFIeld.getValue() } );
})
}
The idea is to link child field to parent not parent to child and this way you can link to any kind form field no only combo.
Here in child combo you have to have store with three columns [group,value,label] where group is value of master field.
This way you can manage to have mode than one master field.