Develop Reference

Sencha: How to use data from one file to another

Im new at this sencha thingy and im trying to experiment a bit with it. I've been making some very simple tests and now i've reached the point where i want to pass the data from one file to another. To make it easier to understand im trying to get the data from the following text box to make a simple filter tool.
the textfield has been created in the following piece of code in the file Filters.js
Ext.define('Prj01Filtro.view.main.Filters', {
extend:'Ext.form.Panel',
xtype: 'Filters',
alias: 'form.formFilter',
requires: [
'Prj01Filtros.view.main.FilterController'
],
controller: 'controllerFilter',
items:[
{
margin: '0 0 10 0',
buttons: [
{
xtype: 'textfield',
fieldLabel: 'Filter',
name: 'textFieldSearch'
}, {
name: 'buttonSearch',
text: 'Buscar',
listeners: {
click: 'onClickFilter'
}
}, {
name: 'buttonRemoveFilter',
text: 'X',
listeners: {
click: 'onClickRemove'
}
}
]
}
]
The code of the buttons have been located in a file named FilterController.js
Ext.define('Prj01Filtros.view.main.FilterController',{
extend: 'Ext.app.ViewController',
alias: 'controller.controllerFilter',
onClickFilter: function() {
//Code to apply the filter
},
onClickRemove: function() {
//code to remove the filter
}
})
Finally the code of the table is located in a file named List.js
Ext.define('Prj01Filtros.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
plugins: 'gridfilters',
requires: [
'Prj01Filtros.store.Personnel'
],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name', align: 'left', filter: {
type: 'string'
}},
{ text: 'Email', dataIndex: 'email', flex: 1, align: 'left', filter: {
type: 'string'
}},
{ text: 'Phone', dataIndex: 'phone', flex: 1, align: 'left', filter: {
type: 'string'
}},
],
listeners: {
select: 'onItemSelected'
},
});
So my goal is to make a function in FilterController.js that can be called from Filters.js which sets the value for the filters applied in the columns of List.js but im kind of stuck on how to set the value property for the filter from the function that i have created. If someone knows how to do it i would appreciate the help. Thanks!
I've tried many things but since im new to sencha im pretty much sure that they were incorrect anyways.

I suggest to study View Models & Data Binding and ViewModel Internals sections of Ext JS documentation. These are among the most powerful features of Ext JS so it good to develop a deep understanding.
For you current question, you need to access the store behind your List view to manage the filters, not the list itself. Once you get the store, you can set / clear the filters with setFilters and clearFilter methods on the store:
store.setFilter([{
property: 'email',
value: '<search term here>',
operator: 'like'
}]);
store.clearFilter();
To easily access the store, define the store in the view model of a view that is above both List and Filters view. This is the important part because this way you can take advantage of inheriting the view model from the container parent. Let's say you have a panel which contains both List and Filters. Define the store in the view model:
stores: {
personnel: {
type: 'personnel'
}
}
Use bind config when assigning the store in your List:
Ext.define('Prj01Filtros.view.main.List', {
...
bind: {
store: '{personnel}'
}
...
});
After all this, you can access the store from the Filters view controller's methods:
onClickFilter: function() {
this.getViewModel().getStore('personnel').setFilters(...);
}
You need the get the value the user entered into the field. You can access it from the controller with querying the textfield component, but you can also do it with the view model.

Ext JS 6.5 Menu auto-hide

I am using Ext JS 6.5.3.57 . I have file Menu.js for view
Ext.define('Foo.view.menu.Menu', {
extend: 'Ext.Panel',
xtype: 'menu_foo',
requires: [
'Ext.menu.Menu'
],
autoSize: true,
bodyPadding: 20,
width: 230,
items: {
xtype: 'menu',
floated: false,
docked: 'left',
alwaysOnTop: true,
items: [{
text: 'System setup',
},{
text: 'Cash'
},{
text: 'regular item 3'
}]
}
})
File app.js
// File /Users/donhuvy/Desktop/vy_sencha/app.js
/*
* This file launches the application by asking Ext JS to create
* and launch() the Application class.
*/
Ext.application({
extend: 'Acc.Application',
name: 'Foo',
requires: [
// This will automatically load all classes in the Foo namespace
// so that application classes do not need to require each other.
'Foo.*'
],
// The name of the initial view to create.
//mainView: 'Foo.view.main.Main'
mainView: 'Foo.view.menu.Menu'
});
When I press on menu item, it hide automatically. How to avoid it hide after click on menu item?

There is hideOnClick config in Ext.menu.Item that is true by deafult
And autoHide config on Ext.menu.Menu that is true by default
If you set hideOnClick to false it won't hide it's owner menu
If you set autoHide to false it prevents the menu from auto-hiding when focus moves elsewhere
So just add following code to menu config
{
allowOtherMenus: true,
autoHide: false,
defaults:{
hideOnClick: false
}
}
Here is the Fiddle

use of onCellWidgetCreated in Dojo Gridx (to add button to cell)

I try to add a button to the last column of my Gridx, however, the button is not shown and above the other table data the grid just says "loading...".
Cell Widget is required and declared, widgetInCell is set and onCellWidgetCreated function added. When replacing the onCellWidgetCreated function with alert, an alert message for each row is shown and the "loading..." disappears. My feeling is that the onCellWidgetCreated function is wrong?
My code looks like the following and when comparing it against some examples on the Gridx website I cannot find the problem.
require([
"gridx/Grid",
"gridx/core/model/cache/Sync",
"dojo/store/Memory",
"dojo/domReady!",
"gridx/modules/CellWidget",
"dijit/form/Button"
], function(Grid, Cache, Memory,Button,CellWidget,domConstruct){
var store = new Memory({
idProperty:"CategoryID",
data: jsondata
});
var grid = new Grid({
id:"gridId",
store: store,
cacheClass: Cache,
structure: [
{
id: "0",
field: "CategoryID",
name: "Kategorie (ID)",
width: "100px"
},
{
id: "1",
field: "CategoryName",
name: "Kategoriename"
},
{
id: "2",
field: "Attributes",
name: "Attribute"
},
{
id: "3",
field: "Actions",
name: "Aktion",
widgetsInCell: true,
onCellWidgetCreated: function(cellWidget, column){
var btn = new Button({
label: "Click me!"
});
btn.placeAt(cellWidget.domNode);
}
}
],
modules: [
CellWidget
]
});
grid.placeAt("aGrid");
grid.startup();
}
);

I came across anotheer problem with VirtualVScrolling and found out that this was due to a defective gridx css file which contained a custom layout.
When using the standard css file, "onCellWidgetCreated" worked for me as well.

How to highlight a node In extJs 4.1 tree panel

I have a ExtJs 4.1 tree panel. The tree is having multiple nodes. Now I allow user to perform contains search on tree node. So if I run the search on word ASP.NET, the search should highlight all the nodes who's text contains key word ASP.NET
How Can I do this?
Thank you

You need to search for children from the TreePanel's root node, then use RegEx to test the value of the Node vs your search text.
Working Example
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Javascript", leaf: true },
{ text: "ASP.net", leaf: true },
{ text: "Also ASP.net", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
multiSelect: true,
renderTo: Ext.getBody(),
dockedItems: [{
xtype: 'toolbar',
dock : 'bottom',
items : [{
text: 'Search for ASP.net',
handler: function(){
var me = this,
panel = me.up('panel'),
rn = panel.getRootNode(),
regex = new RegExp("ASP.net");
rn.findChildBy(function(child){
var text = child.data.text;
if(regex.test(text) === true){
panel.getSelectionModel().select(child, true);
}
});
}
}]
}]
});
Working jsFiddle : http://jsfiddle.net/tdaXs/
TIP: Take note of the second parameter in the .select() method of the TreePanel's selectionModel. This is the optional keepExisting parameter, which must be set to true when manually selecting nodes. See the docs: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.selection.Model-method-select
Hope this helps!

ExtJS: How to dynamically add child nodes to treepanel

How can you add a child node to an existing TreePanel programmatically using JavaScript?
I have a TreePanel that displays the active layers of a map (using GeoExt):
treeConfig = new OpenLayers.Format.JSON().write([{
nodeType: "gx_baselayercontainer",
text: "Base layers",
expanded: true
}, {
nodeType: "gx_overlaylayercontainer",
text: "Overlays",
expanded: true,
loader: {
baseAttrs: {
radioGroup: "foo",
uiProvider: "use_radio"
}
}
}], true);
treePanel = new Ext.tree.TreePanel({
id: 'mainpanel',
border: true,
region: "west",
title: "Map layers",
width: 200,
split: true,
collapsible: true,
margins: '0 0 5 5',
collapseMode: "mini",
autoScroll: true,
loader: new Ext.tree.TreeLoader({
applyLoader: false,
uiProviders: {
"use_radio": LayerNodeUI
}
}),
root: {
nodeType: "async",
children: Ext.decode(treeConfig)
},
listeners: {
"radiochange": function(node){
alert(node.layer.name + " is now the the active layer.");
}
},
rootVisible: false,
lines: false
});
The user should be able to add an overlay layer by pressing a button, however I cannot seem to find any examples on how to accomplish this.
Any ideas?

Grab the parent node by getNodeById or getRootNode and add the child node with appendChild.

See the example at:
http://dev.geoext.org/geoext/trunk/geoext/examples/layercontainer.html
Is your layers property of the treePanel defined?
treePanel.layers.add(layer);

here is the sample code for dynamically append child to tree panel
Ext.getCmp('treeid').getRootNode().appendChild(response from database);