How to create a filter in the grid headers?
I found this snippet: https://stackoverflow.com/a/22015160/5775332 and updated to compatibility with 6th version:
Ext.define('Fiddle.view.SearchTrigger', {
extend: 'Ext.form.field.Text',
alias: 'widget.searchtrigger',
requires: [
'Ext.form.trigger.Trigger'
],
defaultListenerScope: true,
triggers: {
search: {
handler: function(field, trigger, e) {
this.setFilter(this.up().dataIndex, this.getValue());
},
cls: 'x-form-search-trigger'
},
clear: {
handler: function(field, trigger, e) {
this.setValue('');
if(!this.autoSearch) this.setFilter(this.up().dataIndex, '');
},
cls: 'x-form-clear-trigger'
}
},
listeners: {
render: 'onTextfieldRender',
change: 'onTextfieldChange'
},
onTextfieldRender: function(component, eOpts) {
var me = this;
me.ownerCt.on('resize', function(){
me.setWidth(this.getEl().getWidth());
});
},
onTextfieldChange: function(field, newValue, oldValue, eOpts) {
if(this.autoSearch) this.setFilter(this.up().dataIndex, this.getValue());
},
setFilter: function(filterId, value) {
var store = this.up('grid').getStore();
if(value){
store.removeFilter(filterId, false);
var filter = {id: filterId, property: filterId, value: value};
if(this.anyMatch) filter.anyMatch = this.anyMatch;
if(this.caseSensitive) filter.caseSensitive = this.caseSensitive;
if(this.exactMatch) filter.exactMatch = this.exactMatch;
if(this.operator) filter.operator = this.operator;
console.log(this.anyMatch, filter);
store.addFilter(filter);
} else {
store.filters.removeAtKey(filterId);
store.reload();
}
}
});
The most difficult place - creation items with widget in column.
I cant reproduce it in Sencha Fiddle. How to do it?
First login to Sencha Fiddle using the Sencha Forum credentials. After this, copy-paste your code and save it. The updated url that you get after saving will be sharable. Please refer here for docs on Sencha Fiddle.
Fixed code: https://fiddle.sencha.com/#view/editor&fiddle/2820
Related
I'm new in extJS and i've been working in an app for some time.
My problem is that I have an app with an MVC architecture and as I instatiate the controller I declare de stores. But when I run this app in the browser, for some reason the controller is trying to get the store from my controller folder.
I have other controllers runing in my app and all of them looks for the store in the stores folder.
Does anyone have a clue about this issue?
Thanks
Ext.define('SGE.controller.staticData.AbstractController', {
extend: 'Ext.app.Controller',
requires: [
'SGE.util.Util'
],
stores: [
'Actors',
'staticData.Categories',
'staticData.Cities',
'staticData.Countries',
'staticData.Languages'
],
views: [
'staticData.AbstractGrid',
'staticData.Actors',
'staticData.Categories',
'staticData.Cities',
'staticData.Countries',
'staticData.Languages'
],
init: function(application) {
this.control({
"staticdatagrid": {
render: this.render,
edit: this.onEdit
},
"staticdatagrid button[itemId=add]": {
click: this.onButtonClickAdd
},
"staticdatagrid button[itemId=save]": {
click: this.onButtonClickSave
},
"staticdatagrid button[itemId=cancel]": {
click: this.onButtonClickCancel
},
"staticdatagrid button[itemId=clearFilter]": {
click: this.onButtonClickClearFilter
},
"staticdatagrid actioncolumn": {
itemclick: this.handleActionColumn
},
"citiesgrid button[itemId=clearGrouping]": {
toggle: this.onButtonToggleClearGrouping
}
});
this.listen({
store: {
'#staticDataAbstract': {
write: this.onStoreSync
}
}
});
if (!Ext.getStore('countries')) {
Ext.create('SGE.store.staticData.Countries');
}
if (!Ext.getStore('languages')) {
Ext.create('SGE.store.staticData.Languages').load();
}
if (!Ext.getStore('actors')) {
Ext.create('SGE.store.staticData.Actors');
}
if (!Ext.getStore('categories')) {
Ext.create('SGE.store.staticData.Categories');
}
},
onStoreSync: function(store, operation, options){
Packt.util.Alert.msg('Success!', 'Your changes have been saved.');
console.log(store);
console.log(operation);
console.log(options);
},
render: function(component, options) {
component.getStore().load();
if (component.xtype === 'citiesgrid' && component.features.length > 0){
if (component.features[0].ftype === 'grouping'){
component.down('toolbar#topToolbar').add([
{
xtype: 'tbseparator'
},
{
xtype: 'button',
itemId: 'clearGrouping',
text: 'Group by Country: ON',
iconCls: 'grouping',
enableToggle: true,
pressed: true
}
]);
}
}
},
onEdit: function(editor, context, options) {
context.record.set('last_update', new Date());
},
onButtonClickAdd: function (button, e, options) {
var grid = button.up('staticdatagrid'),
store = grid.getStore(),
modelName = store.getProxy().getModel().modelName,
cellEditing = grid.getPlugin('cellplugin');
store.insert(0, Ext.create(modelName, {
last_update: new Date()
}));
cellEditing.startEditByPosition({row: 0, column: 1});
},
onButtonClickSave: function (button, e, options) {
button.up('staticdatagrid').getStore().sync();
},
onButtonClickCancel: function (button, e, options) {
button.up('staticdatagrid').getStore().reload();
},
onButtonClickClearFilter: function (button, e, options) {
button.up('staticdatagrid').filters.clearFilters();
},
handleActionColumn: function(column, action, view, rowIndex, colIndex, item, e) {
var store = view.up('staticdatagrid').getStore(),
rec = store.getAt(rowIndex);
if (action == 'delete'){
store.remove(rec);
Ext.Msg.alert('Delete', 'Save the changes to persist the removed record.');
}
},
onButtonToggleClearGrouping: function (button, pressed, options) {
var store = button.up('citiesgrid').getStore();
if (pressed){
button.setText('Group by Country: ON');
store.group('country_id');
} else {
button.setText('Group by Country: OFF');
store.clearGrouping();
}
}
});
Browser response
enter image description here
An ExtJs Controller pulls in the specified store files before rendering its UI. Assuming that you have not created any store files (assumption form your init function where you created the store if they do not exist), it first searches the store files to load them into the memory.
Another possible problem may be the store has a different namespace than that of the application, you will need to specify the full class name as well as define a path in the Loader's paths config or setPath method.
Refer doc ExtJs Controller's Stores.
I have a store in ViewModel like:
Ext.define('MyApp.page.PageModel', {
extend: 'Ext.app.ViewModel',
//...
stores: {
Posts: {
model: //...
}
}
});
And a grid like:
Ext.define('MyApp.page.MainView', {
extend: 'Ext.panel.Panel',
//...
initComponent: function () {
var me = this;
//...
me.items = [
{
xtype: 'grid',
bind: {
store: '{Posts}'
},
columns: [ /* ... */ ],
viewConfig: {
getRowClass: function (record) {
//...
}
}
}
];
me.callParent(arguments);
}
});
How can I change grid view AFTER store load (in my case)?
I tried to use mon and addManagedListener methods in grid events (beforerender and viewready) and I tried to use on and addListener methods to store inside those grid events, but this solution is not working.
Does someone have any ideas?
I'm using override for Ext.view.AbstractView, just to clear emptyEl and viewEl before store load event
store.on('beforeload', function() {
me.clearEmptyEl();
me.clearViewEl();
});
Here is my complete override
Ext.define('Ext.overrides.view.AbstractView', {
override: 'Ext.view.AbstractView',
onBindStore: function(store, initial, propName) {
var me = this;
me.setMaskBind(store);
// After the oldStore (.store) has been unbound/bound,
// do the same for the old data source (.dataSource).
if (!initial && propName === 'store') {
// Block any refresh, since this means we're binding the store, which will kick off
// a refresh.
me.preventRefresh = true;
// Ensure we have the this.store reference set correctly.
me.store = store;
me.bindStore(store, false, 'dataSource');
me.preventRefresh = false;
}
store.on('beforeload', function() {
me.clearEmptyEl();
me.clearViewEl();
});
}
});
In ExtJS 6, a function setEmptyText is available on the grid that will do this for you:
initComponent: function () {
var me = this;
//...
me.callParent(arguments);
me.getStore().on('load', function() {
me.setEmptyText(...);
})
}
In ExtJS 5, you have to do on your own:
me.getStore().on('load', function() {
var emptyText = 'Test empty text';
me.getView().emptyText = '<div class="' + me.emptyCls + '">' + emptyText + '</div>';
me.getView().refresh();
})
Relevant fiddle, will load its store 3 seconds after rendering.
Until now, I have been querying the data stores using Rally App SDK, however, this time I have to update a story using the js sdk. I tried looking up for examples for some sample code that demonstrates how the App SDK can be used to update/add values in Rally. I have been doing CRUD operations using Ruby Rally API but never really did it with the app sdk.
Can anyone provide some sample code or any link to where I could check it out?
Thanks
See this help document on updating and creating reocrds. Below are examples - one updates a story, the other creates a story. There is not much going on in terms of UI: please enable DevTools console to see console.log output.
Here is an example of updating a Defect Collection on a User Story:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
console.log("launch");
Rally.data.ModelFactory.getModel({
type: 'User Story',
success: this._onModelRetrieved,
scope: this
});
},
_onModelRetrieved: function(model) {
console.log("_onModelRetrieved");
this.model = model;
this._readRecord(model);
},
_readRecord: function(model) {
var id = 13888228557;
console.log("_readRecord");
this.model.load(id, {
fetch: ['Name', 'Defects'],
callback: this._onRecordRead,
scope: this
});
},
_onRecordRead: function(record, operation) {
console.log('name...', record.get('Name'));
console.log('defects...', record.get('Defects'));
if(operation.wasSuccessful()) {
//load store first by passing additional config to getCollection method
var defectStore = record.getCollection('Defects', {
autoLoad: true,
listeners: { load: function() {
//once loaded now do the add and sync
defectStore.add({'_ref':'/defect/13303315495'});
defectStore.sync({
callback: function() {
console.log('success');
}
});
}}
});
}
},
});
Here is an example of creating a user story, setting a project and scheduling for an iteration:
Ext.define('CustomApp', {
extend: 'Rally.app.TimeboxScopedApp',
componentCls: 'app',
scopeType: 'iteration',
comboboxConfig: {
fieldLabel: 'Select an Iteration:',
labelWidth: 100,
width: 300
},
addContent: function() {
this._getIteration();
},
onScopeChange: function() {
this._getIteration();
},
_getIteration: function() {
var iteration = this.getContext().getTimeboxScope().record.get('_ref');
console.log('iteration',iteration);
if (!this.down('#b2')) {
var that = this;
var cb = Ext.create('Ext.Container', {
items: [
{
xtype : 'rallybutton',
text : 'create',
id: 'b2',
handler: function() {
that._getModel(iteration);
}
}
]
});
this.add(cb);
}
},
_getModel: function(iteration){
var that = this;
Rally.data.ModelFactory.getModel({
type: 'UserStory',
context: {
workspace: '/workspace/12352608129'
},
success: function(model) { //success on model retrieved
that._model = model;
var story = Ext.create(model, {
Name: 'story 777',
Description: 'created via appsdk2'
});
story.save({
callback: function(result, operation) {
if(operation.wasSuccessful()) {
console.log("_ref",result.get('_ref'), ' ', result.get('Name'));
that._record = result;
that._readAndUpdate(iteration);
}
else{
console.log("?");
}
}
});
}
});
},
_readAndUpdate:function(iteration){
var id = this._record.get('ObjectID');
console.log('OID', id);
this._model.load(id,{
fetch: ['Name', 'FormattedID', 'ScheduleState', 'Iteration'],
callback: function(record, operation){
console.log('ScheduleState prior to update:', record.get('ScheduleState'));
console.log('Iteration prior to update:', record.get('Iteration'));
record.set('ScheduleState','In-Progress');
record.set('Iteration', iteration);
record.set('Project', '/project/12352608219')
record.save({
callback: function(record, operation) {
if(operation.wasSuccessful()) {
console.log('ScheduleState after update..', record.get('ScheduleState'));
console.log('Iteration after update..', record.get('Iteration'));
}
else{
console.log("?");
}
}
});
}
})
}
});
In ExtJs, there are many options to filter a grid. There are two nice examples in the documentation, like referenced in this question.
Remote filtering
Local filtering
However, having the filter hidden in the default dropdown menu of Ext.ux.grid.FiltersFeature looks really awkward for me. A good ergonomic choice would to create search fields in the column headers, like #Ctacus shows in his question.
How can this be achieved ?
After quite much research through the sparse documentation, and thanks to great questions and answers in SO, I came up with a simple class, that adds this functionality and and allows for configurations.
It looks like this:
You add this field in your grid like this:
Ext.define('Sandbox.view.OwnersGrid', {
extend: 'Ext.grid.Panel',
requires: ['Sandbox.view.SearchTrigger'],
alias: 'widget.ownersGrid',
store: 'Owners',
columns: [{
dataIndex: 'id',
width: 50,
text: 'ID'
}, {
dataIndex: 'name',
text: 'Name',
items:[{
xtype: 'searchtrigger',
autoSearch: true
}]
},
The following configs are possible, and work like described in the doc for Ext.util.Filter:
anyMatch
caseSensitive
exactMatch
operator
additionnaly you can use autoSearch. If true, the filter searches as you type, if false or not set, one has to click on the search icon to apply the filter.
ExtJs 5 / 6 Source:
Ext.define('Sandbox.view.SearchTrigger', {
extend: 'Ext.form.field.Text',
alias: 'widget.searchtrigger',
triggers:{
search: {
cls: 'x-form-search-trigger',
handler: function() {
this.setFilter(this.up().dataIndex, this.getValue())
}
},
clear: {
cls: 'x-form-clear-trigger',
handler: function() {
this.setValue('')
if(!this.autoSearch) this.setFilter(this.up().dataIndex, '')
}
}
},
setFilter: function(filterId, value){
var store = this.up('grid').getStore();
if(value){
store.removeFilter(filterId, false)
var filter = {id: filterId, property: filterId, value: value};
if(this.anyMatch) filter.anyMatch = this.anyMatch
if(this.caseSensitive) filter.caseSensitive = this.caseSensitive
if(this.exactMatch) filter.exactMatch = this.exactMatch
if(this.operator) filter.operator = this.operator
console.log(this.anyMatch, filter)
store.addFilter(filter)
} else {
store.filters.removeAtKey(filterId)
store.reload()
}
},
listeners: {
render: function(){
var me = this;
me.ownerCt.on('resize', function(){
me.setWidth(this.getEl().getWidth())
})
},
change: function() {
if(this.autoSearch) this.setFilter(this.up().dataIndex, this.getValue())
}
}
})
For ExtJs 6.2.0, the following bug and its workaround is relevant to this, else the column cannot be flexed.
ExtJs 4 Source:
Ext.define('Sandbox.view.SearchTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.searchtrigger',
triggerCls: 'x-form-clear-trigger',
trigger2Cls: 'x-form-search-trigger',
onTriggerClick: function() {
this.setValue('')
this.setFilter(this.up().dataIndex, '')
},
onTrigger2Click: function() {
this.setFilter(this.up().dataIndex, this.getValue())
},
setFilter: function(filterId, value){
var store = this.up('grid').getStore();
if(value){
store.removeFilter(filterId, false)
var filter = {id: filterId, property: filterId, value: value};
if(this.anyMatch) filter.anyMatch = this.anyMatch
if(this.caseSensitive) filter.caseSensitive = this.caseSensitive
if(this.exactMatch) filter.exactMatch = this.exactMatch
if(this.operator) filter.operator = this.operator
console.log(this.anyMatch, filter)
store.addFilter(filter)
} else {
store.filters.removeAtKey(filterId)
store.reload()
}
},
listeners: {
render: function(){
var me = this;
me.ownerCt.on('resize', function(){
me.setWidth(this.getEl().getWidth())
})
},
change: function() {
if(this.autoSearch) this.setFilter(this.up().dataIndex, this.getValue())
}
}
})
I am new to extjs.I want to associate a store on selecting a menu item from Ext.menu.Menu. I am using extjs 4.1.0. I searched on the net even went through sencha doc but I couldn't find any way to achieve this.
Is there some way to achieve it?
Thanks in advance.
I'm using a menu with a store in a project. Here's an example:
Ext.define("Ext.ux.menu.DynamicMenu", {
extend: "Ext.menu.Menu",
alias: 'widget.dynamicmenu',
loaded: false,
loadMsg: 'Loading...',
store: undefined,
icon: '',
constructor: function (config) {
var me = this;
Ext.apply(me, config);
me.callParent();
},
initComponent: function () {
var me = this;
me.callParent(arguments);
me.on('show', me.onMenuLoad, me);
listeners = {
scope: me,
load: me.onLoad,
beforeload: me.onBeforeLoad
};
me.mon(me.store, listeners);
},
onMenuLoad: function () { var me = this; if (!me.store.loaded) me.store.load(); },
onBeforeLoad: function (store) { this.updateMenuItems(false); },
onLoad: function (store, records) { this.updateMenuItems(true, records); },
updateMenuItems: function (loadedState, records) {
var me = this;
me.removeAll();
if (loadedState) {
me.setLoading(false, false);
Ext.Array.each(records, function (record, index, array) {
me.add({
text: record.get('DisplayName'),
data: record,
icon: me.icon
});
});
me.store.loaded = true;
}
else {
me.add({ width: 75, height: 40 });
me.setLoading(me.loadMsg, false);
}
me.loaded = loadedState;
}
});
I found this one on the sencha forums if IIRC, but can't find the link anymore. I made some tweaks for icons etc, ...
On the Ext.Array.each(records, ....
You'll need to define your own logic, It's depending on your model. My model has a DisplayName which I use to show as text. I also stock my record in a data property I made in the menu item. You're completely free there.
Good luck!