The grid looks to have the right number of rows displayed and the column headers are correct but the actual data in the cells is blank. Any idea why this is happening?
data
var data = new DOMParser().parseFromString('<sio><sql><row><Name>item 1</Name><Dn>value 1</Dn></row><row><Name>item 2</Name><Dn>value 2</Dn></row></sql></sio>',"text/xml");
var columns=JSON.parse('[{"dataIndex": "Name","text": "NEW Clumn Name"},{"dataIndex": "Dn","text": "NEW Column Dn"}]');
var fields = JSON.parse('[{"name": "Name","type": "string"},{"name": "Dn","type": "string"}]');
model
var model = new Ext.data.Model({
fields: fields
});
new model
Ext.define('testModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.String',
],
fields: fields
});
store
var store = new Ext.data.Store({
// model: model, // this not works
model: 'testModel', // this works
// fields: fields, // this works
proxy: {
type: 'memory',
reader: {
type: 'xml',
rootProperty: 'sql',
record: 'row'
}
}
});
grid
var grid = new Ext.grid.GridPanel({
xtype: 'gridpanel',
title: 'Test',
titleAlign: 'center',
columnLines: true,
id: 'testGrid',
forceFit: true,
store: store,
});
load
grid.reconfigure(store,columns);
store.loadRawData(data);
console.log(fields);
log $reference: undefined - any idea what that means
[Object, Object]
0: Object
$reference: undefined
name: "Name"
type: "string"
Related
I have a paging grid with a store. I have to change the proxy of the store, but when i do this and try to reload the grid, it gives a loading mask and do nothing else. Can you help me?
This is the original store:
var store = new Ext.data.JsonStore({
autoDestroy: true,
proxy: {
type: 'direct',
directFn: Ext.d.Class.Function,
extraParams: {
param: param
},
paramOrder: ['param', 'filter', 'start', 'limit', 'sort'],
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
},
fields: fields,
remoteSort: true,
autoLoad: false,
sorters: sorters
});
The original grid:
var grid = Ext.create('Ext.grid.Panel', {
selModel: selmodel,
title: title,
flex: 1,
store: store,
columns: columns,
bbar: pager = Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{1} / {2}',
emptyMsg: ""
})
//...
The new proxy:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
paramsAsHash: false,
url: 'tasks.php',
actionMethods: {
read: 'POST'
},
extraParams: {
task: 'getItems',
id: id
},
reader: {
type: 'json',
root: "rows",
idProperty: 'id',
totalProperty: "all"
}
});
And I tried to set proxy and load the store, but it doesn't do anything.
grid.getStore().removeAll();
grid.getStore().setProxy(newProxy);
grid.getDockedItems()[2].store.setProxy(newProxy);
grid.getStore().load(); // fails, loading mask but no ajax
Any idea?
That's because you're not actually creating an Ajax proxy, but its parent class Ext.data.Proxy. The type is not interpreted in these lines:
var newProxy = Ext.create('Ext.data.Proxy', {
type: 'ajax',
You have to specify the actual class name:
var newProxy = Ext.create('Ext.data.proxy.Ajax', {
(And, IMHO, you'd better create it with the new keyword new Ext.data.proxy.Ajax, so that you discover your missing requires early...)
The value becomes null as the store of Grid.json format is
{"struct_grid":[{"id":null,"struct_grid":null}]}
The Grid is
var grid1 = Ext.extend(Ext.grid.GridPanel, {
border: false,
width: 'auto',
height: 300,
hideHeaders: true,
initComponent: function () {
var config = {
// store
store: struct_grid_Store
// column model
, columns: [
{ text: "struct_grid", dataIndex: 'struct_grid' }
]
// force fit
, viewConfig: { forceFit: true, scrollOffset: 0 }
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
and Store is
var struct_grid_Store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'struct_grid'],
root: 'struct_grid'
}),
proxy: new Ext.data.HttpProxy({
url: '../../EicePackege/phpframework/DefStruct.php?mode=struct_grid',
}),
autoLoad: true,
remoteSort: true
});
You should not send a record back from server when it is not a record at all. Note that
{"id":null,"struct_grid":null}
is a valid JSON string so a valid JavaScript object and per default it will be a valid model instance. So the record will exist in the store and so it will be displayed. ExtJS does it all right. Yes you could handle this by tweaking the reader, but that is the wrong way.
If you want no record you should send none.
I'm new to ExtJS but I am unable find anyway to populate my grid with a simple JSON array of strings. My JSON looks like this:
{
...stuff...
"users": ["kevin","ryan", "david", "mark", "ed"]
...more stuff...
}
I want to populate a simple one column grid with this list of users, but can't seem to find any way to do it! :(
My code looks like this:
Ext.define('usersModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'users', type: 'auto'}]
});
var usersStore = Ext.create('Ext.data.Store', {
model: 'usersModel',
proxy: {
type: 'ajax',
url : '/users',
reader: 'json'
},
autoLoad: true
});
// create the Grid
Ext.create('Ext.grid.Panel', {
store: usersStore,
columns: [{
dataIndex: 'users',
width: 500,
text: 'User'
},
],
});
But it just displays a comma separated list of the users in one cell. I can see why it would do that, I'm setting the dataIndex of the column to be the array, not the elements in the array, but have no idea how to fix it.
Try this:
Ext.define('usersModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'name', type: 'auto'}]
});
var usersStore = Ext.create('Ext.data.Store', {
model: 'usersModel',
proxy: {
type: 'ajax',
url : '/users',
reader: {
type: 'json',
rootProperty: 'users'
}
},
autoLoad: true
});
// create the Grid
Ext.create('Ext.grid.Panel', {
store: usersStore,
columns: [{
dataIndex: 'name',
width: 500,
text: 'User'
},
],
});
As part of my EXTJS 4 learning process, I am trying to establish a simple process of database connection - loading a value in a data Store - taking the value and placing it in a dataField.
The data is loaded fine from the php script and placed into the Store via a json call. (as confirmed through FireBug)
However, the dataField, does not seem to be able to load the value.
Here is what I have so far:
//Model definition
Ext.define('FingerModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'}
]
});
//Store Definition
var est_data = new Ext.data.Store({
model: 'FingerModel',
proxy: {
type: 'ajax',
url: 'finger.php',
extraParams: {opt: 'getName'},
reader: {
type: 'json',
root: 'results',
totalProperty: 'total'
}
},
autoLoad: true,
// turn off remote sorting
remoteSort: false
});
//Form definition
var fingerForm = Ext.create('Ext.form.Panel', {
width: 500,
title: 'Finger',
waitMsgTarget: true,
items: [{
xtype: 'fieldset',
title: 'Finger Form',
items: [{
xtype:'textfield',
fieldLabel: 'Location Name',
name: 'name'
}]
}]
});
fingerForm.getForm().loadRecord(FingerModel);
Anybody see anything obvious that I'm doing wrong?
Thanks in advance.
M.
Ext.form.field.Text does not have a 'store' property. How would it know which row of the store to use?
You should use Form.loadRecord() to load the model into the form, and it will set form fields with the same name as the model field names.
I have an editor grid panel, with 2 fields. Based on the 1st field, the second field should change to a combobox with further options. For that getting the value of the 1st field on runtime is required to fire the query for the second field.
The code is working fine and retriving the data. But even when the mentioned width is 350 for the second field, the combobox which appears, is very small and can't be read. Even the dropdown is not seen. I tried the ListWidth property too.. but no change in the output.
Is it because, initially the combobox is empty and I'm using the beforequery property to change the url with the id field so the combobox is not getting the data? But I can't see any errors on firebug.
I have the following code:
createGrid= function(e){
var store= new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: ..... }) //url to get the data
reader: new Ext.data.JsonReader({
root: //the root,
id: //id,
sortInfo: {field: 'id', direction: 'ascending' },
fields: ['id','fields']
})
});
var store2= new Ext.data.store ({
autoLoad: true,
id: 'store2',
proxy: new Ext.data.HttpProxy({ url: ' '}) //url
reader: new Ect.data.JsonReader({
root: 'enums','id', fields: ['enum_id','value']
})
});
var cm=new ext.grid.columnModel([
{id:'id',name:'id',dataIndex: 'id', width: 300},
{id:'fields', header: 'fields',width: 350, editor: new Ext.form.ComboBox({
name: 'combo',
store: store2,
width: 350,
valueField: 'enum_id',
displayField: 'value',
listeners: {
beforequery: function(query){
var g_n=Ext.getCmp('grid1');
var s_t=g_n.getSelectionModel().getSelections();
var record=s_t[0];
var assign_data=record.get('id');
var actionStore=Ext.StoreMgr.get('store2');
var action_combobox=Ext.getCmp('combo1');
actionStore.proxy.conn.url=' ',//new url which requires the 'id' field
actionStore.load();
return query;
}
}
})},
]);
return new Ext.grid.EditorGridPanel({
id: 'grid1',
store: store,
cm:cm,
sm: new Ext.grid.RowSelectionModel ({ singleSelect: true});
autoExpandableColumn: 'fields',
listeners: {
//the other grid listeners
}
})
}
Please help me with this problem.
Thanks in advance.
var store2 = new Ext.data.store(
Maybe you need to replace Ext.data.store with Ext.data.Store or Ext.data.JsonStore