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.
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 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"
I am using ExtJS3.4.
I want to filter the billingstore based on value selected by the user for billingName.
So, How do I pass the value selected to the store or grid? How do I achieve this?
Here is my code:
// Store for the grid panel - has billing grid data
this.billingStore = new Ext.data.JsonStore({
autoLoad: {params:{start: 0, limit: 2}},
filter: {billingName}
proxy: new Ext.data.HttpProxy({
url: '/ELCM/Client/getBillingList.do',
}),
root: 'data',
fields: ['billingName','billingAmount','usedData','duration'],
totalProperty:'totalRows'
});
var billingStore = this.billingStore;
//view billing
this.billingGrid = new Ext.grid.GridPanel({
title: 'View Billing',
store: that.billingStore,
columns:[
{header: "Amount",dataIndex: 'billingAmount'},
{header: "Data Used", dataIndex: 'usedData'},
{header: "Duration", dataIndex: 'duration'}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
bbar: new Ext.PagingToolbar({
store: that.billingStore, // grid and PagingToolbar using same store
displayInfo: true,
pageSize: 2
}),
listeners: {
rowclick : function(grid, rowIndex, e){
console.log("row Index "+rowIndex);
}
}
});
var billingGrid = this.billingGrid;
Thanks
Depending on what you want to filter by a simple filter method on the store will achieve what your looking for.
billingGrid.getStore().filter([{
property: '',
id: '',
value:
}
]);
Look at http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-method-filter for further information.
Check out this code ,how does the filter in ExtJS work its required the property (i.e billingName for filtering as per your example) then 'value' on basis of which the filter happen this 2 are the mandatory options required for the filter function to work other optional config property which is exactMatch & caseSensitive which add the accuracy to the filter function.
Try out the below code
// Store for the grid panel - has billing grid data
this.billingStore = new Ext.data.JsonStore({
autoLoad: {params:{start: 0, limit: 2}},
filter: [{
property: 'billingName',
value: ''//Data source which need to be filter or based on value selected by the user for billingName
exactMatch: true,
caseSensitive: true
}],
proxy: new Ext.data.HttpProxy({
url: '/ELCM/Client/getBillingList.do',
}),
root: 'data',
fields: ['billingName','billingAmount','usedData','duration'],
totalProperty:'totalRows'
});
var billingStore = this.billingStore;
//view billing
this.billingGrid = new Ext.grid.GridPanel({
title: 'View Billing',
store: that.billingStore,
columns:[
{header: "Amount",dataIndex: 'billingAmount'},
{header: "Data Used", dataIndex: 'usedData'},
{header: "Duration", dataIndex: 'duration'}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
bbar: new Ext.PagingToolbar({
store: that.billingStore, // grid and PagingToolbar using same store
displayInfo: true,
pageSize: 2
}),
listeners: {
rowclick : function(grid, rowIndex, e){
console.log("row Index "+rowIndex);
}
}
});
var billingGrid = this.billingGrid;
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
I am generating data in a grid panel using json store. I have to generate tabs from the content of column 1 on page load . How can I generate those dynamic tabs from column 1?
Thanks! I am following the same approach but when I am looping through the tabs its not able to add tabs dynamically . I am sure my loop is working properly because I put an alert and its looping through all the records. My code is below...Please let me know where I am wrong..
var store = new Ext.data.JsonStore({
autoLoad: true,
url: '../json/test.json',
root: 'results',
fields:
[
'TIEBACK',
'GATE_TIME',
'TOTAL',
'STOP_DESC',
'DOOR'
],
sortInfo: {
field: 'TIEBACK', direction: 'ASC'
}
});
my tabpanel:
tabPanel = new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
items: [{
xtype: 'grid',
store: store,
//selModel: selModel,
columns: assignment,
stripeRows: true,
loadMask: true,
height: 200,
width: 200,
x: 490, y: 620,
title:'Assignment Status',
bbar: pagingBar
}]
});
loop:
store.on('load', function(){
store.each(function(re)
{
var tieback = re.get('TIEBACK');
//alert(tieback);
tabPanel.add(tieback);
});
});
So you have the JSON store, something like this
var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: 'get-images.php',
storeId: 'myStore',
// reader configs
root: 'images',
idProperty: 'name',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});
Then you can add a callback function to the store that gets fired once it loads. This is the documentation on that function
load : ( Store this, Ext.data.Record[] records, Object options )
so,
store.addListener(load, function(store, records, options){
// loop over records and dynamically create tabs here
});
So if you had a tabpanel like this
var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});
You can dynamically add tabs to it like this
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>'
+ Ext.example.bogusMarkup,
closable:true
}).show();
That should be everything you need, more documentation can be found here.
http://www.sencha.com/deploy/dev/examples/tabs/tabs-adv.html