I am trying to use this following code in my application to retain the current state of my application even after it is refreshed.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
But after executing above code, It's not working for me.
Kindly suggest any way to do this as, I am new to ExtJs
Thanks.
You need to define this in the Launch function of your application or init of controller. Its critical to use expires when using state provider.
init : function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires : new Date(Ext.Date.now() + (1000*60*60*24*90)) // 90 days
}));
}
Then based on what components state you are trying to save set its stateful property to true, alternatively giving it a stateId.
Below is example to save state of grid:
Ext.define('MyApp.view.Users', {
extend: 'Ext.grid.Panel',
alias: 'widget.users_grid',
title: 'Users',
stateful:true,
stateId:'users_grid_stid',
store:{
data:[
{
first_name:'Joe',
last_name:'Blogs'
}
]
},
columns: {
items: [
{
xtype: 'gridcolumn',
dataIndex: 'first_name',
text: 'First Name',
width: 200
},
{
xtype: 'gridcolumn',
dataIndex: 'last_name',
text: 'Last Name',
width: 200
}
]
}
});
You can test this by modifying the width of one of the columns on this grid and then that column will be hold the modified width when you next load the page, even after browser restart.
Check F12 Console -> Application Cookies for saved component states.
Related
I am developing my first EXT js mvc application. I have a problem adding events listeners to my grid panel from controller class.
My question is why i am getting below error while adding event handlers through 'on' method using below code
Error:
Uncaught TypeError:
gridPanel.on is not a function
at constructor.init
Relevant Code:
var gridPanel = Ext.ComponentQuery.query('userlist');
gridPanel.on('itemdblclick', this.editUser, gridPanel);
I am able to add handlers through a different method though but i am trying to figure out what is wrong with adding through 'on' method on grid panel reference. Any help is appreciated.
Thanks
Here is my complete controller class
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: ['user.List'],
init: function() {
var gridPanel = Ext.ComponentQuery.query('userlist');
gridPanel.on('itemdblclick', this.editUser, gridPanel);
},
editUser: function() {
console.log('User edit has begun..');
}
}, function() {
});
And my grid panel class:
Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
id: 'usergrid',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed#sencha.com'},
{name: 'Tommy', email: 'tommy#sencha.com'}
]
};
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
],
this.callParent(arguments);
}
});
Ext.ComponentQuery.query('userlist') returns an array of found components - so you need to select the first item in the array to actually get your component:
Ext.ComponentQuery.query('userlist')[0]
The Ext.first('userlist') shorthand makes this simpler. (As #sceborati mentioned in the comments)
When you use component query you are querying by its xtype*
You have also specified an id in your component, which is OK if you will only have one instance on a page, (as soon as you have more than one - you should not use ids)
You can find components much quicker using Ext.getCmp('componentid') so Ext.getCmp('userlist') would also work for you.
All that being said, to make better use of ExtJs MVC capabilities, you could switch to using a ViewController, and then you don't need to do any lookups for your components at all:
Ext.define('AM.controller.Users', {
extend: 'Ext.app.ViewController',
alias: 'controller.userlist',
editUser: function () {
console.log('User edit has begun..');
}
});
Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
xtype: 'userlist',
title: 'All Users',
id: 'usergrid',
controller: 'userlist',
store: {
fields: ['name', 'email'],
data: [{
name: 'Ed',
email: 'ed#sencha.com'
}, {
name: 'Tommy',
email: 'tommy#sencha.com'
}]
},
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}],
listeners:{
itemdblclick:'editUser'
}
});
Notice the alias config added to controller, and the corresponding controller config on the view.
This means you can specify listeners just by providing the method name on the controller.
listeners:{
itemdblclick:'editUser'
}
You may also notice I have moved your column and store configuration out of the initComponent method - your use of initComponent would work, but this method is much cleaner.
I have created a fiddle to demonstrate this updated code:
https://fiddle.sencha.com/#view/editor&fiddle/1qvu
You also seem to be passing an extra function as a third argument when defining your controller - you should remove this.
* you have used alias:'widget.userlist' which is the same as xtype:'userlist'
The query method on Ext.ComponentQuery returns an array of components. So you would need to provide an index, like:
var gridPanel = Ext.ComponentQuery.query('userlist')[0];
Can u help me with rest store, please. I want my store become REST, I saw some samples where HttpProxy was used and tried to do the same, but it dosn't work.
As i noticed in samples store was always created like: var store = Ext.create...
If problem in this, then i don't know where to invoke Ext.create, and previously I always used storeId in grid and it worked well.
P.S. why grid couldn't be created without store data just with blank fields?
Here is my 'TestStore' code:
Ext.define('MVC.store.Notes', {
extend : 'Ext.data.Store',
requires : [
'MVC.model.Note'
],
storeId : 'TestStore',
model : 'MVC.model.Note',
autoLoad: true,
proxy: {
type: 'rest',
url: 'rest/notes',
reader: {
type: 'json',
rootProperty: 'data'
},
writer: {
type: 'json'
}
}
});
And Grid:
Ext.define('MVC.view.NotesGrid', {
extend: 'Ext.grid.Panel',
xtype: 'notesGrid',
title: 'Note-list',
// store: 'Notes',
store: 'TestStore',
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Creation Date',
xtype: 'datecolumn',
format: 'd-m-Y',
dataIndex: 'createDate',
flex: 1
},{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'd-m-Y',
dataIndex: 'modifiedDate',
flex:1
}, {
text: 'Text',
dataIndex: 'noteText',
flex: 3
}
]
});
Not answering the main question, only your side question:
When you Ext.define() a store, you define the class.
When you Ext.create() a store, you define the instance.
The class won't be able to hold any data, only an instance can.
If you add your store's class name to the stores array in your application definition in the main Application.js file, you tell your application to create one global store instance of that class.
From a store class with a fixed store Id, you can only create one instance per application; from a store class without a fixed storeId, you can create multiple instances (e.g. one per grid).
i have a grid panel (store and models are associated with it) where i am displaying all the data in row wise manner.The column of grid panel consist of action column where if person clicks, it opens a new form in tab style and user fills the data and it got saved in db. i want is, how the store should be refreshed every few second so that this data should also be displayed in the grid panel automatically. How should I do it?
There are a number of ways you could handle this, personally I would just reload the store when the form has closed to reload any updates rather than just reloading constantly.
The code below shows how you could use a TaskRunner in ExtJs to reload the store every x seconds, You could also add a setTimeout in the load event of the store so that every time the store loads you schedule it to load again in x seconds.
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'characters'
}
},
listeners: {
load: function() {
console.log(this);
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
var runner = new Ext.util.TaskRunner(),
task = runner.start({
run: function() {
store.reload();
},
interval: 3000
});
// IMPORTANT: Dont forget to call stop at a logical point.
runner.stop();
}
});
There is also a fiddle containing this code that you can play around with.
If I had to go with the SetTimeout or TaskRunner options for this I would likely initialize them in the render event of the parent panel/container and listen for the beforeDestroy event to stop them running.
I have a grid in my ExtJS 4.2.1 application that has an editable column with combo editor.
I need to render the column with the value from the DisplayField of the combo but the comboStore.getCount() = 0
Here is my grid:
Ext.define('App.employee.Grid', {
extend: 'Ext.grid.Panel',
requires: ['Ext.grid.plugin.CellEditing'],
alias: 'widget.employee.grid',
config: {
LocationId: 0
},
initComponent: function() {
var me = this,
store = me.buildStore(),
comboStore = Ext.create('App.store.catalog.Location', { autoLoad: true });
me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function(editor, e) {
}
}
});
me.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.applyIf(me, {
plugins: [me.rowEditing],
columns: [{
xtype: 'rownumberer',
text: '#',
width: 50,
sortable: false,
align: 'center'
//locked: true
},{
text: 'Number',
dataIndex: 'EmployeeNumber',
align: 'center',
width: 90
}, {
text: 'Name',
dataIndex: 'EmployeeName',
flex: 1
}, {
text: 'Location',
dataIndex: 'LocationId',
width: 140,
renderer: function(value) {
// HERE!!!
// me.comboStore.getCount() = 0 so I never get a record
var record = me.comboStore.findRecord('LocationId', value);
return record.get('Description');
},
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
store: comboStore,
displayField: 'Description',
valueField: 'LocationId',
queryMode: 'local',
listConfig: {
width: 250,
// Custom rendering template for each item
getInnerTpl: function() {
return '<b>{Code}</b><br/>(<span style="font-size:0.8em;">{Description}</span>)';
}
}
}
}],
store: store,
});
me.callParent(arguments);
}
});
The problem is in the renderer function because the comboStore is always empty. The strange thing is that in my view If I click to edit the row and open the combo the combo has values.
[UPDATE]
What I think is that my comboStore has a delay when loading so the renderer is fired before the comboStore gets loaded. I figure this out because if I debug in chrome and I wait a few seconds, then it works... but don't know how to force to wait until comboStore is loaded.
Any clue on how to solve this? Appreciate any help.
A couple of solutions:
Ensure that the combo store is loaded before the grid store. This can be done by loading the combo first and from load event of its store trigger the grid store load. The disadvantage is that it adds unnecessary delay so this method impairs the user experience.
Load all needed stores in one request. It requires a bit of coding but it saves server roundtrip so it's a very valuable approach. Store loadData method is used to actually load store with the received data. You would, of course, first call it on combo, then on the grid.
The best method that I use almost exclusively is to turn the whole thing upside down and link display field to the store, not value field. Server must return both display and value fields in the grid store and a little piece of code that updates both fields in the grid store after editing is complete is required. This method is demonstrated here: Remote Combo in ExtJS Grid
I am using a Grid to display data on a modal window.
It has two columns, 1. Label 2. TextField
The problem I am facing is whenever I enter anything in the textfield and lose focus from that textfield (by pressing TAB or clicking somewhere else), the grid clears itself completely and I get a blank grid!
I know this has something to do with the autoSync property of the Store associated with the grid.
So I set it to false autoSync: false.
After doing this the data gets retained and works fine.
BUT when I close this modal window and re-open it with the same store data, I get a blank 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, //tried setting it to false but got error as mentioned above
model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});
GRID
Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueGrid', {
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
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();
}
}
]
});
Please help. This is making me go mad!!
It would be helpful if you could provide details on how you create the Window itself, as it may be part of the problem.
One cause of this can be that you are hiding the window instead of closing it and then creating a new instance when you re-open. This will cause your DOM to have two windows instances and may not sync the data correctly in the second instance.
Some more details on how you create the actual window would help shed some light on whether this is the case.
I would probably want to jail myself after writing this.
The real issue was that I had created a similar grid for a different modal window and since I had copied the code I missed out on changing the ID of the new grid.
Both grids had the same IDs.
Changed it now and it is working fine now.
Thanks for your help!