I have a filter specified in filters config of the store:
Ext.define('Record', {
extend: 'Ext.data.Model',
fields: [{
name: 'value',
type: 'number'
}]
});
Ext.create('Ext.data.Store', {
id: 'store',
model: 'Record',
filters: [
function(item) {
return item.get('value') > 2;
}
],
sorters: [{
property: 'value',
direction: 'DESC'
}],
data: [{
value: 2,
}, {
value: 1
}, {
value: 3
}]
});
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('store'),
tpl: new Ext.XTemplate(
'<tpl foreach=".">',
'<div class="record">{value}</div>',
'</tpl>'
),
itemSelector: '.record',
emptyText: 'No records',
renderTo: Ext.getBody()
});
It is only applied if I explicitly call filter() on the store. The filterOnLoad is not set and defaults to true, so the store must be filtered. How can I keep the store always filtered (whenever any CRU action is performed and after load)?
To accomplish this it's needed to add listeners to the store on adding and updating events:
listeners: {
add: function(store) {
store.filter();
},
update: function(store) {
store.filter();
}
},
Related
I am using ExtJs6.2 Modern toolkit.I have a situation where all my display labels are stored in DB and I need to use those to display on my form.
example
{
xtype: 'textfield',
readOnly: true,
scrollable: false,
label: ** showFromStore ** ,
labelAlign: 'top',
name: 'someName',
bind: '{SomeValue}'
},
What would be the best way to manage this display on the forms?
For binding all config of textfield or any other EXTJS component you can use bind config.
Example
Ext.create({
xtype: 'textfield',
bind: {
label: '{user.label}',
name: '{user.name}',
value: '{user.value}',
}
})
In this FIDDLE, I have created a demo using viewmodel, formpanel and textfield. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
//defining view model
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
data: {
users: null
},
stores: {
formstore: {
autoLoad: true,
fields: ['name', 'email', 'phone', 'namelabel', 'phonelabel', 'emaillabel'],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
rootProperty: ''
}
},
listeners: {
load: function (store, data, success) {
Ext.ComponentQuery.query('#myform')[0].getViewModel().set('users', data[0]);
}
}
}
}
});
//creating form
Ext.create({
xtype: 'formpanel',
itemId: 'myform',
title: 'Form example',
renderTo: Ext.getBody(),
fullscreen: true,
viewModel: {
type: 'myvm'
},
defaults: {
xtype: 'textfield',
readOnly: true
},
items: [{
bind: {
label: '{users.namelabel}',
value: '{users.name}'
}
}, {
bind: {
label: '{users.emaillabel}',
value: '{users.email}'
}
}, {
bind: {
label: '{users.phonelabel}',
value: '{users.phone}'
}
}]
});
}
});
JSON CODE
[{
"name": "Lisa Doshi",
"email": "lisa#simpsons.com",
"phone": "555-111-1224",
"namelabel": "Full Name",
"emaillabel": "Email Address",
"phonelabel": "Phone Number"
}]
I am not sure how to create a Fiddle to demonstrate this,but I will try to provide all details here
data returned from service is
[{"ID":"P1","Label":"Procedure"},{"ID":"P2","Label":"Process"},,
{"ID":"P3","Label":"Problem"}]
I am loading this data in a store
Ext.define('My.store.myLabels',
{
alias: 'store.Lang',
extend: 'Ext.data.Store',
config:
{
fields: ['ID', 'Label'],
pageSize: 10000,
proxy:
{
type: 'jsonp',
url: myserviceURL
}
}
});
Now how do I bind a single value from the store here
xtype: 'textfield',
readOnly: true,
scrollable: false,
labelAlign: 'top',
name: 'Process',
itemId: 'P1',
bind:{
value: '{somevalue}',
label: * how to bind the value of P1 here *,
}
I tried a formula: but with that I would have to write a formula for each UI element.
So my question is:
How to access a single item from the store to bind it here like:
store.data.items["0"].ID.P1
Or how to access the component
ID/itemId that triggered the view model formula so that I can do
displayLabel: {
get: function (get) {
var store = Ext.StoreMgr.get('myLabels');
//search the store based on item id of the component that
//triggered the formula
if (index > -1) {
return store.getAt(index).data.Label;
}
}
}
help me understand the tree filtering.
I have input ow
xtype: 'triggerfield',
listeners: {
change: function() {
console.log()
}
}
How can I filter the tree? I need to send a request to the server with a value from the field
You can use filterBy method to do simple or complex filtering on TreeStore:
var store = Ext.create('Ext.data.TreeStore', {
autoload: true,
root: {
expanded: true,
specialProp: 1,
children: [{
text: "detention",
leaf: true,
specialProp: 1
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true,
specialProp: 1
}, {
text: "algebra",
leaf: true,
specialProp: 2
}]
}, {
text: "buy lottery tickets",
leaf: true,
specialProp: 1
}]
}
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
items: [{
xtype: 'treepanel',
id: 'treePanelId',
store: store,
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'specialProp=1 Filter',
handler: function () {
var treePanel = Ext.getCmp('treePanelId');
treePanel.getStore().filterBy(function (item) {
if (item.get('root') === true) return true;
else if (item.get('specialProp') === 1) return true;
else return false;
});
}
}, {
xtype: 'button',
text: 'Clear filter',
handler: function () {
var treePanel = Ext.getCmp('treePanelId');
treePanel.getStore().clearFilter();
}
}]
}]
}]
}]
});
Example Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29si
EDIT:
For remote filtering you can do it like following:
var store = Ext.create('Ext.data.TreeStore', {
remoteFilter: true,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
},
root: {
expanded: true
}
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
items: [{
xtype: 'treepanel',
id: 'treePanelId',
store: store,
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'specialProp=1 Filter',
handler: function () {
var treePanel = Ext.getCmp('treePanelId');
treePanel.getStore().filter('specialProp', 1);
}
}, {
xtype: 'button',
text: 'Clear filter',
handler: function () {
var treePanel = Ext.getCmp('treePanelId');
treePanel.getStore().clearFilter();
}
}]
}]
}]
}]
});
Remote Sort Fiddle Example: https://fiddle.sencha.com/#view/editor&fiddle/29sq
Take a look at response of request, you can filter on server side with this. Also for ease of understanding I have put params in response to show how filters would be actually appear on http request which need to be processed.
Note: Make sure you send data response in following format:
{ status: 'success', children: [{...}, {...}, ....] }
If you are sending response in other format you will need to process it in store proxy.
The setup:
I have a grid with a roweditor plugin. On the toolbar I have a "add new" button to insert a new row.
The problem:
When I'm trying to add a new record my store.insert(0, rec), doesn't seems to add the record on the 0 index.
My view:
Ext.define("app.view.partners.Partners",{
extend: "Ext.grid.Panel",
alias: 'widget.partners',
requires: [
"Admin.view.partners.PartnersController",
"Admin.view.partners.PartnersModel"
],
height: 700,
controller: "partners",
viewModel: {
type: "partners"
},
bind: {
store: '{partners}'
},
title: "Partners List",
columns: [
{ header: 'id', dataIndex: 'id', hidden: true},
{ header: 'Partner', dataIndex: 'Partner', flex: 3,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
tbar: [{
text: 'Add record',
iconCls: 'fa fa-plus-square green',
handler: 'onAddClick'
}],
selType: 'rowmodel',
plugins: [{
ptype: 'rowediting',
clicksToMoveEditor: 1,
pluginId: 'partnersRowEditingPlugin',
autoCancel: false,
listeners: {
edit: 'onEditClick',
canceledit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
context.store.remove(context.record);
}
}
}
},{ptype: 'bufferedrenderer'},
{ptype: 'gridfilters'}
]
});
My viewmodel:
Ext.define('app.view.partners.PartnersModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.partners',
stores: {
partners:{
model: 'app.model.Partners',
storeId: 'partners',
autoLoad: true,
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy:{
type: 'ajax',
// load remote data using HTTP
url: 'read.php',
reader: {
type: 'json',
idProperty: 'id',
rootProperty: 'data',
totalProperty:'total'
}
}
}
}
});
and in the viewcontroller:
onAddClick: function(){
var rec = new app.view.partners.PartnersModel({});
//var rec = new new Admin.model.Partners({});
this.isNewRecord = true;
var store = this.getView().getStore();
store.insert(0, rec);
this.getView().getPlugin(controllerName + 'RowEditingPlugin').startEdit(0,0);
}
here is a console.log after store.insert(0,rec)
It appears that the store does the insert, but it is inserted last. I can see it added on the grid as the last record.
I don't know what I am doing wrong.
I am trying to test against a combobox value from inside dataview's tpl:
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
items: [
{
xtype: 'combo',
name: 'my_combo',
},
{
xtype: 'dataview',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="this.test()">pass</tpl>',
'</tpl>'
,
{
test: function(){
//doesn't work
return this.getView().down('[name=my_combo]').getValue() == 'ok';
}
}),
}
]
});
This doesn't work because this is referencing to the template itself and I can't figure out how to access the view from the inside.
It is not possible to access a view in XTemplate. To achieve this you can use ViewModel, here is the code for it.
And working sencha fiddle https://fiddle.sencha.com/#fiddle/175s
Update: I updated the code to use the DataView, DataView is little tricky, i overwritten the prepareData method to pass in extra information to the template and also updating the DataView whenever the combo value is changed. Here is the fiddle with updated changes https://fiddle.sencha.com/#fiddle/175s
Ext.define('MyApp.MyPanel', {
extend: 'Ext.Panel',
xtype: 'myForm',
defaults: {
padding: 10
},
viewModel: {
stores: {
employeeStore: {
fields: ['name'],
data: [{
name: 'John'
}, {
name: 'Tempel'
}, {
name: 'George'
}, {
name: 'Milinda'
}]
},
}
},
items: [
{
xtype: 'combobox',
fieldLabel: 'Name',
name: 'nameField',
queryMode: 'local',
displayField: 'name',
valueField: 'name',
reference: 'emp',
bind: {
store: '{employeeStore}',
value: '{name}'
}
},{
xtype: 'dataview',
itemId: 'empList',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="dataview-multisort-item">',
'<h3>{name}</h3>',
'<tpl if="passed">Selected</tpl>',
'</div>',
'</tpl>'
),
itemSelector: 'div.dataview-multisort-item',
bind: {
store: '{employeeStore}'
},
prepareData: function(data, index, record) {
var name = this.up().getViewModel().get('name');
var passed = record.get('name') == name;
return Ext.apply({passed: passed}, data);
}
}
],
initComponent: function() {
this.callParent(arguments);
var me = this;
// refresh the dataview when name is changed.
this.getViewModel().bind('{name}', function() {
var dataview = me.down('#empList');
dataview.refresh();
});
}
});
How to reset chained combobox in my example the extjs way?
Consider this two comboboxes:
{
xtype: 'combo',
bind:{
store: '{contacts}'
},
reference: 'contactsCombo',
displayField: 'name',
name: 'contact',
typeAhead: false,
editable: false,
fieldLabel: 'Contact',
emptyText: 'Select a contact...',
anchor: '95%',
listeners: {
change: 'onSelectChange'
},
},
{
xtype: 'combo',
name: 'phone',
reference: 'phonesCombo',
fieldLabel: 'Phone',
displayField: 'number',
valueField:'id',
hiddenName: 'id',
emptyText: 'Select a phone...',
bind: {
store: '{contactsCombo.selection.phoneNumbers}'
},
anchor: '95%'
}
And corresponding models defines:
Ext.define('AppsBoard.model.Contact', {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
});
Ext.define('AppsBoard.model.ViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.related',
stores: {
contacts: {
model: 'AppsBoard.model.Contact',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'contacts.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
}
});
Ext.define('AppsBoard.model.PhoneNumber', {
extend: 'Ext.data.Model',
fields: [
'id',
{
name: 'contact_id',
type: 'int',
reference: {
type: 'AppsBoard.model.Contact',
inverse: {
role: 'phoneNumbers'
}
}
},
'number'
],
proxy: {
type: 'MyProxy',
reader: {
type: 'json'
}
}
});
Ext.define('AppTest.store.MyProxy', {
extend: 'Ext.data.proxy.Proxy',
alias: 'proxy.MyProxy',
read: function (operation) {
var resultSet = {
1: [{
"id": 1,
"contact_id": 1,
"number": "6045551212"
},
{
"id": 2,
"contact_id": 1,
"number": "8009996541"
}],
2: [
{
"id": 3,
"contact_id": 2,
"number": "1232131233"
}
]
};
operation.setResultSet(this.getReader().read(resultSet[operation.getFilters()[0].getValue()]));
operation.setSuccessful(true);
},
erase: function (operation) {
console.log(operation);
}
});
My problem is when i switching my parent Combobox, it's associated child combobox shows valueField instead of displayField.
https://fiddle.sencha.com/#fiddle/vtg
you can see in your fiddle it's not use valueField but it's keep the value.
Since the store has been change the value is now not associated to anything in the new store, therefore you keep seen only the value.
you can clean the box by setting the forceSelection
{
xtype: 'combo',
name: 'phone',
reference: 'phonesCombo',
fieldLabel: 'Phone',
displayField: 'number',
valueField:'id',
hiddenName: 'id',
emptyText: 'Select a phone...',
forceSelection: true,
bind: {
store: '{contactsCombo.selection.phoneNumbers}'
},
anchor: '95%'
}
as long as you know there won't be a duplicates IDs