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)
Related
Binding checkbox selectionmodel in initComponent is not working as expected in grid component of extjs
What could be the problem in the code? attaching fiddle
https://fiddle.sencha.com/#view/editor&fiddle/2g8r
In order to bind a checkbox in grid, there is a built in plugin.How ever ,if you need to attach the selModel ONLY in the initComponent.Then define grid,attach selmodel and create instance of it. .Here is the updated fiddle https://fiddle.sencha.com/#view/editor&fiddle/2ghc
Ext.define('OuterGrid', {
extend: 'Ext.grid.Panel',
store: userStore,
storeId: 'mystore',
width: 400,
height: 500,
title: 'Sample Application',
columns: [{
text: 'Name',
dataIndex: 'name',
width: 100,
sortable: true
}, {
text: 'Email Address',
dataIndex: 'email',
width: 150,
}, {
text: 'Phone Number',
dataIndex: 'phone',
flex: 1,
}],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [{
xtype: 'checkcolumn',
text: 'Active',
dataIndex: 'id'
}],
});
this.callParent();
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('OuterGrid', {
renderTo: Ext.getBody(),
});
}
});
In the following example with cellediting I want to dynamically change the emptyfield textfield editor and clear the field.
However, if I select the first item in the combobox I get the textfield reference, but only once. If after I selecting another item in the combobox I can no longer get the textfield reference or change the emptyText.
Also I can not clear the textfield value when selecting one combobox item.
FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/2g3d
Ext.create('Ext.data.Store', {
storeId: 'mystore',
fields:[ 'type', 'description'],
});
var combostore = Ext.create('Ext.data.Store', {
fields:[ 'name'],
data:[
{'name' : 'Phone'},
{'name' : 'Mobile'},
{'name' : 'Email'}
]
});
Ext.create('Ext.data.Model', {
fields:[
{name:'type', type:'string'},
{name:'description', type:'string'}
]
});
Ext.create('Ext.form.Panel', {
title: 'Order Info',
width: 400,
bodyPadding: 10,
defaults: {
anchor: '100%',
padding: 5
},
items: [{
xtype: 'gridpanel',
selModel: 'rowmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
pluginId: 'celleditingId'
},
header:{
titlePosition: 0,
items:[{
xtype:'button',
text: 'Add row',
handler: function(btn){
var record = Ext.create('Ext.data.Model', {});
var grid = btn.up('grid'),
rowediting = grid.getPlugin('celleditingId');
grid.store.insert(0,{});
rowediting.startEdit(0, 0);
}
}]
},
title: 'Contact',
store: Ext.data.StoreManager.lookup('mystore'),
columns: [{
text: 'Type',
dataIndex: 'type',
editor:{
xtype: 'combobox',
name: 'type',
valueField: 'name',
displayField: 'name',
store: combostore,
queryMode: 'local',
markDirty:false,
listeners: {
select: function (combo, record, eOpts){
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].editor,
grid = combo.up('grid');
if (combo.value === 'Phone') {
Ext.apply(columnTextfieldEditor, {
emptyText: 'First text',
submitEmptyText: false
});
var row = grid.getSelectionModel().getSelection()[0];
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});
// columnTextfieldEditor.setValue('');
}else {
var row = grid.getSelectionModel().getSelection()[0];
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});
Ext.apply(columnTextfieldEditor, {
emptyText: 'Second text',
submitEmptyText: false
});
}
console.log(combo.value);
console.log(columnTextfieldEditor);
}
}
},
flex: 0.7
},{
text: 'Description',
dataIndex: 'description',
itemId: 'textfieldEd',
editor:{
xtype: 'textfield',
name: 'description'
},
flex: 1
}],
listeners:{
afterrender: function(grid){
var record = Ext.create('Ext.data.Model', {});
rowediting = grid.getPlugin('celleditingId');
grid.store.insert(0,{});
rowediting.startEdit(0, 0);
}
},
height: 200
}],
renderTo: Ext.getBody(),
});
Just change this:
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].editor
To This:
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].getEditor()
And Change the order of the second "apply":
Ext.apply(columnTextfieldEditor, {
emptyText: 'Second text',
submitEmptyText: false
});
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});
This is my popup with tabs.
I need to give a value from record to gridpanel in tab 2 in store to get attributes from server side by category_id. Searched answer in official documentation and didn't find.
Can help me somebody?
Ext.define('desk.view.CategoryPopup', {
extend: 'Ext.window.Window',
alias: 'widget.categorypopup',
title: 'Change Category',
layout: 'fit',
autoShow: true,
bdoyPadding: 10,
initComponent: function(){
this.items = [{
xtype: 'tabpanel',
items: [
{
xtype: 'form',
title: 'Add / Edit / Delete Category',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Parent Category'
},
{
xtype: 'textfield',
name: 'new',
fieldLabel: 'New Category'
},
{
xtype: 'textfield',
name: 'id',
fieldLabel: 'Category ID',
hidden: true
},
{
xtype: 'textfield',
name: 'parent',
fieldLabel: 'Parent ID',
hidden: true
}
],
bodyPadding: 10
},
{
xtype: 'gridpanel',
alias: 'widget.categoryattr',
title: 'Attributes',
height: 350,
buttons: [{'text': 'Add attribute', 'action' : 'add-attribute'}],
columns: [
{
name: 'Name',
dataIndex: 'name'
}
],
width: 300,
store: Ext.widget('categoryattributes')
}
]
}];
this.buttons = [
{
text: 'Update',
action: 'add'
},
{
text: 'Delete',
action: 'delete'
}
];
this.callParent(arguments);
}
})
This is function in controller
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
}
you need something like this:
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
Ext.Ajax.request({
url: '/api/category/'+ record.getId() +'/attributes', //example url insert your webservice
success: function(response){
var attributes = Ext.decode(response.responseText);
view.down('grid').getStore().loadData(attributes);
}
});
}
you will need a store with a model for your grid.
I want to implement grid bufferrenderer in my simple grid panel that shows a list of information using ExtJS 4.2.1. Without using the bufferrenderer plugin, it shows all the data, but when i used this plugin, my grid contains no data.
This is my grid without using the plugin
This is my grid using the plugin
The grid panel's code is:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
itemId: 'myPanel',
title: '',
requires: ['Ext.grid.plugin.BufferedRenderer'],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
autoRender: true,
autoShow: true,
itemId: 'gridPanel',
title: 'My Grid Panel',
store: 'MyJsonStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'firstName',
text: 'FirstName'
},
{
xtype: 'gridcolumn',
dataIndex: 'middleName',
text: 'MiddleName'
},
{
xtype: 'gridcolumn',
dataIndex: 'lastName',
text: 'LastName'
},
{
xtype: 'gridcolumn',
dataIndex: 'age',
text: 'Age'
},
{
xtype: 'gridcolumn',
dataIndex: 'country',
text: 'Country'
},
{
xtype: 'gridcolumn',
dataIndex: 'city',
text: 'City'
},
{
xtype: 'gridcolumn',
dataIndex: 'street',
text: 'Street'
},
{
xtype: 'gridcolumn',
dataIndex: 'mobile',
text: 'Mobile'
},
{
xtype: 'gridcolumn',
dataIndex: 'phone',
text: 'Phone'
},
{
xtype: 'gridcolumn',
dataIndex: 'zip',
text: 'Zip'
}
],
plugins: 'bufferedrenderer'
/*plugins: {
ptype: 'bufferedrenderer',
trailingBufferZone: 20,
leadingBufferZone: 25
}*/
}
]
});
me.callParent(arguments);
}
});
The Store's code is:
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.GridModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.GridModel',
storeId: 'MyJsonStore',
buffered: true,
clearOnPageLoad: false,
clearRemovedOnLoad: false,
leadingBufferZone: 25,
pageSize: 500,
purgePageCount: 10,
trailingBufferZone: 20,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
totalProperty: 'total_user'
}
}
}, cfg)]);
}
});
Can anyone help me with this? Thanks
Setting the height property in grid will fix this issue.
height: 300
Make sure that all panels up to the viewport have their layout set to “fit”. Also, region of the grid should be “center”.
I have not tested, but something like this should work:
var grid = Ext.create('MyApp.view.MyPanel', {
layout: 'fit',
region: 'center'
});
var viewport = Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
items: [
grid
]
});
I am using an ArrayStore and filling it up by adding model records.
This store is associated with a data grid.
Now the arraystore object is getting filled perfectly fine but the data is not coming up in the grid. In fact, on debugging, I found that the store of the grid (datagrid.store) also has the data, but still it does not display it on the screen!!
Following is my code.
Model:
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'attribute',
type: 'string'
},
{ name: 'attributeValue',
type: 'string'
}
]
});
Store:
var attrValueStore = Ext.create('Ext.data.ArrayStore', {
autoSync: true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});
Grid
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueGrid', {
//requires: ['Ext.ux.CheckColumn'],
autoRender: true,
extend: 'Ext.grid.Panel',
alias: ['widget.attributevaluegrid'],
id: 'SQLAttributeValueGrid',
store: attrValueStore,
columnLines: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
columns: [
{ /*Expression */
xtype: 'gridcolumn',
text: 'Attribute',
sortable: false,
menuDisabled: true,
flex: 0.225,
dataIndex: 'attribute'
},
{ /*Attribute Values*/
xtype: 'gridcolumn',
editor: 'textfield',
text: 'Values',
flex: 0.225,
dataIndex: 'attributeValue'
}
],
initComponent: function () {
this.callParent(arguments);
}
});
Modal Window displaying the grid
var attributeValueForm = Ext.create('Ext.window.Window', {
title:'Missing Attribute Values',
id: 'attributeValueForm',
height:500,
width:400,
modal:true,
renderTo: Ext.getBody(),
closeAction: 'hide',
items:[
{
xtype: 'attributevaluegrid',
border: false,
//height: 80,
region: 'center',
split: true
}
],
buttons: [
{
id: 'OKBtn',
itemId: 'OKBtn',
text: 'OK',
handler: function () {
Ext.getCmp('attributeValueForm').close();
}
},
{
text: 'Cancel',
handler: function () {
Ext.getCmp('attributeValueForm').close();
}
}
]
});
Now at the time of displaying the modal window, I checked the value of the store object as well as the store inside the grid object. Both are having the proper data.
But when the window opens, I am getting a blank grid
Maybe you need to load the store data... try with:
var attrValueStore = Ext.create('Ext.data.ArrayStore', {
autoSync: true,
autoLoad : true,
model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});