I'm trying to build an app using tha MVC model and although most things are going well i'm having issues with the new architecture. The problem at hand is that i have created a store using this
Ext.define('MCMS.store.Items', {
extend: 'Ext.data.Store',
model: 'MCMS.model.Item',
autoLoad: {'limit':10},
pageSize:10,
remoteSort:true,
proxy: {
url:'/ajax/moduleLoaded.php',
actionMethods: 'post',
extraParams :{'code': code,'toLoad':'latestContet','return':'json','module':Ext.getDom('module').value,'test':function(){console.log(this)}},
type: 'ajax',
reader: {
type: 'json',
successProperty: 'success',
root: 'items'
}
}
});
This works fine, but i need the module param to be dynamic depending on the view that is using it. Let's say that i have 1 grid like this
Ext.define('MCMS.view.items.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.itemsList',
title : lang.items,
store: 'Items',
loadMask: true,
columns: [
{header: "#ID", width: 60, dataIndex: 'id', sortable: true,filter: {type: 'numeric'}},
{header: "Title", width: 250, dataIndex: 'title', id:'title', sortable: true,filter: {type: 'string'}},
{header: "Availability", width: 60, dataIndex: 'active', sortable: true,renderer: function(value, metaData, record, rowIndex, colIndex, store) { if (value == 1) { return '<span style="color:green;">' +lang.yes + '</span>'; } else { return '<span style="color:red;">' + lang.no + '</span>'; } }},
{header: "Category", width: 200, dataIndex: 'category',sortable:false,renderer: function(value, metaData, record, rowIndex, colIndex, store) {
var cat = new Array;
Ext.each(value, function(person, index) {
cat.push('' + this.category + '');
});
return cat.join(' , '); }},
],
selModel: Ext.create('Ext.selection.CheckboxModel'),
columnLines: true,
dockedItems: [ {
xtype: 'toolbar',
items: [{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add',
itemId:'addItem'
}, '-', {
text:'Options',
tooltip:'Set options',
iconCls:'option'
},'-',{
itemId: 'removeButton',
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove',
disabled: true
}]
}],
bbar: {xtype: 'itemsPaging' },
features: [filters],
});
and i use this grid in 3 or 4 different occasions but the data needs to change depending on the view that it's using it. All i need is a way to change the module parameter somehow.
Try using this code:
store.getProxy().extraParams.module = newValue;
store.reload();
If I understand you correctly, you need to use grid.reconfigure() to change the makeup of a grid and allow alterations to its store.
You could set the extraParams directly
store.getProxy().extraParams.module = newValue;
Related
facing issue in Sencha offline proxy , when json received 100 records
offline proxy only add 50 records add in store here is my simple code
response.responseText [my ajax response], it returns reocords set
var data = Ext.decode(response.responseText);
for (var c=0; c < data.length; c++){
console.log(c);
var itemrecord = Ext.create('Inertia.model.InstallingCompany');
itemrecord.set(data[c]);
Ext.getStore('InstallingCompanies-offline').add(itemrecord);
}
console.log(c);
console.log(Ext.getStore('InstallingCompanies-offline').data.length);
For this you can use direct store.loadData() method of store.
In this FIDDLE, I have create a demo using gridpanel and Ext.data.Store. I hope this FIDDLE will help you or guide you to achieve your requirement.
Code Snippet
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
Ext.create('Ext.data.Store', {
storeId: 'topicsStore',
model: 'ForumThread'
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
Ext.create('Ext.grid.Panel', {
height: window.innerHeight,
title: 'Example of Store loadData() with GRID and Ajax Request',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('topicsStore'),
loadMask: true,
columns: [{
xtype: 'rownumberer',
width: 35,
sortable: false
}, {
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
groupable: false,
cellWrap: true
}, {
text: "Author",
dataIndex: 'username',
flex: 0.5,
sortable: true,
groupable: false
}, {
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 90,
sortable: false
}, {
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
flex: 0.5,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false
}],
listeners: {
afterrender: function (cmp) {
var store = Ext.data.StoreManager.lookup('topicsStore'),
store1;
cmp.getEl().mask('Please wait..!');
Ext.Ajax.request({
url: 'topics.json',
success: function (data) {
var response = Ext.decode(data.responseText);
store.loadData(response.topics);
cmp.getEl().unmask();
//Add data using store.add() method in Store
store1 = Ext.create('Ext.data.Store', {
model: 'ForumThread'
});
response.topics.forEach(function (item) {
store1.add(item);
})
console.log(`total count of store1 data is ${store1.getCount()}`);
}
});
}
}
});
I'm trying to get value inserted from the interface in a text box rendered inside a GridPanel extjs 3.4, below how is defined the textbox inside the column model:
header: "Rosso",
dataIndex: "contrFilEsRosso",
width: 50,
renderer: function(val, meta,record){
var str0='<p align="left"><input type="text" name="verde" value="' + val + '
return str0;
}
I've modified from the interface the value inside the textbox and i want to send the modified value to the controller. Obviously the store has the value extracted from the backend and is not updated with the new value, so i tried the getView() method of the GridPanel but i haven't been able to get the new value of the textbox.
Thanks a lot.
Any data loaded into an ExtJs grid will be kept in a store, along with the edits.
There are a number of ways you can get the specific value but usually you will just want to send the data back to the server to update as needed.
You can access the store via the getStore() method on the grid and from there you can access any individual records by id or index.
Yo would be best using an EditorGrid and listening to events such as afterEdit
Something like this should work (might need some tweaking, not tested as on mobile)
Fiddle
Ext.application({
name: 'MyApp',
launch: function() {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
autoLoad: true
});
Ext.create("Ext.grid.EditorGridPanel", {
title: 'Simpsons',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
isCellEditable: function(col, row) {
return (col == 0);
},
listeners: {
afterEdit: function(e) {
alert("You changed " + e.field + " from " + e.originalValue + " to " + e.value);
}
},
height: 200,
width: 400,
});
}
});
I have an ExtJS grid with a toolbar button to save the date. The save works and the data is stored. But the grid is not refreshed. How do I reload the grid data after the save?
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
initComponent: function(){
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
var store = Ext.create('MyLodge.store.Members');
Ext.apply(this, {
height: this.height,
plugins: [rowEditing],
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id :'id',
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
},{
text : 'Name',
flex: 1,
sortable : true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
},{
text : 'E-Mail',
width : 150,
sortable : true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
},{
text : 'Href',
width : 200,
sortable : true,
dataIndex: 'href',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new MyLodge.model.Member());
rowEditing.startEdit(0, 0);
}
}, {
text: 'Delete',
iconCls: 'icon-delete',
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
},'-',{
text: 'Save',
iconCls: 'icon-save',
handler: function(){
store.sync();
}
}]
}]
});
this.callParent(arguments);
}
});
You can load store in callback of sync
store.sync({
success: function( response ) {
store.load();
}
});
You will probably want to call store.reload() in a callback from store.save() (what is store.save() anyway? it is not part of Ext.data.Store interface)
After reading this article, I've managed to change rendering.
I'm calling an internal function:
renderer: this.onRenderCell
And this function is like this:
onRenderCell: function(value, metaData, record, rowIndex,
colIndex, store, view) {
metaData.css = 'ini-cell-pas-traduit';
return '«'+value+'»';
}
If you read carefully I return '«'+value+'»'; so for each value it is transformed to: '«value»'; . This is a proof that on every single line, it works perfectly. So should it be for the css. But the css is applied one time out of two!! This drives me nuts.
Here's what it gives (latest Firefox, same with latest Chrome):
Any idea where I should take a look?
Here's a big sample of my source code:
Ext.define('Lang.grid.Panel', {
extend: 'Ext.grid.Panel',
alias: 'widget.langgrid',
requires: [
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem'
],
initComponent: function(){
this.editing = Ext.create('Ext.grid.plugin.CellEditing');
Ext.apply(this, {
iconCls: 'icon-grid',
plugins: [this.editing],
dockedItems: [{
xtype: 'toolbar',
items: [{
iconCls: 'icon-add',
text: 'Add',
scope: this,
handler: this.onAddClick
}, {
iconCls: 'icon-delete',
text: 'Delete',
disabled: true,
itemId: 'delete',
scope: this,
handler: this.onDeleteClick
}]
}],
columns: [{
text: 'label',
flex:2,
sortable: true,
dataIndex: 'label'
},{
header: 'fr',
flex: 3,
sortable: true,
dataIndex: 'fr',
renderer: this.onRenderCell,
field: {
type: 'textfield'
}
},{
header: 'es',
flex: 3,
sortable: true,
dataIndex: 'es',
renderer: this.onRenderCell,
field: {
type: 'textfield'
}
},{
header: 'us',
flex: 3,
sortable: true,
dataIndex: 'us',
renderer: this.onRenderCell,
field: {
type: 'textfield'
}
}
]
});
this.callParent();
this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
},
(...)
(snip useless code)
(...)
onRenderCell: function(value, metaData, record, rowIndex,
colIndex, store, view) {
metaData.css = 'ini-cell-pas-traduit';
return '<span style="color:red; font-weight:bold;">«'+
value+'»</span>';
}
});
In the metadata.css (ini-cell-pas-traduit) do this for background-color
background-color : red !important //or whichever color you've specified.
EDIT :
This is happening because the grid is configured with stripeRows : true. I dunno if this is done by default or you did it in the config but forgot to mention it here. When you use stripeRows it sets a background-color which can be overriden using the !important keyword.
Varun Achar is right about using !important, but since you are using Ext JS 4 you should also change
metaData.css = 'ini-cell-pas-traduit';
to
metaData.tdCls = 'ini-cell-pas-traduit';
The 'css' and 'attr' members of metaData have now been replaced with tdCls and tdAttr and the old ones will only work in Ext JS 4 if you also install the Ext 3 compatibility layer.
Can someone explain to me why this isnt working? No errors whatsoever.
Ext.onReady(function () {
//Ext.Msg.alert('Status', 'Changes saved successfully.');
Ext.define('Bond', {
extend: 'Ext.data.Model',
fields: ['CUSIP', 'DESCRIPTION', 'COUPONRATE', 'ASKPRICE']
});
var store = new Ext.data.Store({
model: 'Bond',
proxy: {
type: 'ajax',
url: 'http://localhost:3197/Home/GetSecondaryOfferings',
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
}
}
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'CUSIP', dataIndex: 'CUSIP' },
{ header: 'Description', dataIndex: 'DESCRIPTION', width: 100 },
{ header: 'COUPONRATE', dataIndex: 'COUPONRATE', width: 100 },
{ header: 'ASKPRICE', dataIndex: 'ASKPRICE', width: 100 }
],
renderTo: 'example-grid',
width: 1000,
autoHeight: true,
title: 'JSON SIMPLE 2'
}).render();
});
this is what my JSON object look like:
{"totalCount":3316,"items":[{"CUSIP":"989701AL1","DESCRIPTION":"ZIONS BANCORPORATIONSB NT 5.65000% 05/15/2014","COUPONRATE":" 5.650","ASKPRICE":" 104.450"}]}
The grid just doesnt populate, and I can see the JSON being returned to me from the server.
Thoughts?
The problem is the fact that you use a store with the alax/json type. Bacause you have a cross domain URL, the JSON.
Solution: Make sure the test files are hosted using HTTP from the same domain and all should be well:
var store = new Ext.data.Store({
model: 'Bond',
proxy: {
type: 'ajax',
url: 'SOData.json',
reader: {
type: 'json',
root: 'items',
totalProperty: 'totalCount'
}
}
});
try this way
var URLdata = window.location.protocol + "//" + window.location.host + "/" + "bigdata-dashboard" + "/conf/" +"survey.json" ;
var storedata = new Ext.data.Store({
fields: ['appeId','survId','location','surveyDate','surveyTime','inputUserId'],
proxy: {
type: 'rest',
url:URLdata,
reader: {
type: 'json',
root: 'items',
// totalProperty: 'totalCount'
}
}
});
storedata.load();
// create the grid
var grid = new Ext.grid.GridPanel({
store: storedata,
columns: [
{header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
{header: "survId", width: 60, dataIndex: 'survId', sortable: true},
{header: "location", width: 60, dataIndex: 'location', sortable: true},
{header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
{header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
{header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
],
renderTo:'example-grid',
width:470,
height:200
});
you need to change your service to return jsonp and change the store type to be jsonp, that will fix the issue,
Please let me know if you need more information