I want to create a tree panel and add an event to it when expand node, but code seems not work for me. I've already searched google for hours but no luck. Could anyone take a look and tell me why?
Here is my code:
Ext.onReady(function () {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention",
leaf: true
}, {
text: "homework",
expanded: false,
children: [{
text: "book report",
leaf: true
}, {
text: "alegrbra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners: {
afteritemexpand: function ( node, index, item, eOpts ){
alert('HAHA');
}
}
});
});
Thanks in advance!
You used the wrong event. You need to use afteritemexpand event.
afteritemexpand: function ( node, index, item, eOpts ){
alert('HAHA');
}
Here's a fiddle:
http://jsfiddle.net/johanhaest/RDC9W/1/
Related
I am trying to display my JSON in a propertygrid where I have nested level of JSON structure. As per to the property grid documentation the only types supported are boolean, string, date, number. So am only able to see the flatten level information and not the nested object.
Wanted to know if there is any configuration in propertygrid which will allow me to display and edit the nested information ? or any other component available which will be helpful instead of propertygrid
Below is the sample config and fiddle:
Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,
renderTo: Ext.getBody(),
source: {
"allowBlank": "My Object",
"minValue": 1,
"maxValue": 10,
"itemDetails": {
"name": "name 1",
"type": "Object"
},
"Description": "A test object"
},
sourceConfig: {
allowBlank: {
displayName: 'Required'
}
}
});
You can use editable column tree:
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "allowBlank",
value: "My Object",
leaf: true
}, {
text: "minValue",
value: "1",
leaf: true
}, {
text: "maxValue",
value: 10,
leaf: true
}, {
text: "itemDetails",
value: "",
expanded: true,
children: [{
text: "name",
value: "name 1",
leaf: true
}, {
text: "type",
value: "Object",
leaf: true
}]
}, {
text: "Description",
value: "A test object",
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
height: 200,
store: store,
rootVisible: false,
plugins: {
cellediting: {
clicksToEdit: 2,
listeners: {
beforeedit: function (editor, context, eOpts) {
if (!context.record.isLeaf()) {
return false;
}
var column = context.column;
switch (typeof context.record.get('value')) {
case "string":
column.setEditor({
xtype: 'textfield'
});
return;
case "number":
column.setEditor({
xtype: 'numberfield'
});
return;
//...
//...
default:
column.setEditor({
xtype: 'textfield'
});
return;
}
},
}
}
},
columns: [{
xtype: 'treecolumn',
text: 'Headers',
dataIndex: 'text'
}, {
text: 'Value',
dataIndex: 'value',
editor: {
xtype: 'textfield'
}
}],
renderTo: Ext.getBody()
});
I have treepanel. I want to fire an event on click of only child element.
In my itemclick event it is firing all the time when I click. I want only to fire only when the last child is clicked.
Eg.: It should fire "Manage Application Child" not on the "Manage Application"
var root = {
expanded: true,
children: [{
text: "Configure Application",
expanded: true,
children: [{
text: "Manage Application",
children: [{
text: "Manage Application Child",
leaf: true
}]
}, {
text: "Scenario",
leaf: true
}]
}, {
text: "User Configuration",
expanded: true,
children: []
}, {
text: "Test Configuration",
//leaf: true,
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}]
};
{
xtype: 'treepanel',
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
title: 'Configuration',
width: 200,
height: 400,
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
root: root
}),
listeners: {
itemclick: function (s, r) {
alert(r.data.text);
}
}
}
If i understand correctly, you just have to check if the node is "leaf":
itemclick: function (s, r) {
if (r.data.leaf){ //or r.data.children == null
alert(r.data.text);
}
}
I created FIDDLE i think it will help you what you want
I want to search for specific node in an ExtJs tree. The current code that I have allows node to be searched only at the first level. Please check this fiddle
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: false,
children: [{
text: '1.1 foo',
leaf: false,
children: [{
text: "1.1.1 asp.net mvc",
expanded: true
}, {
text: "1.1.2 java",
expanded: true
}, {
text: "1.1.3 extjs",
expanded: true
}]
}, {
text: '1.2 bar',
leaf: true
}]
}, {
text: "ASP.net future",
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 450,
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) {
console.warn("selecting child", child);
panel.getSelectionModel().select(child, true);
}
});
}
}]
}]
});
What I want:
Ability to search across all the levels in the tree
once a node is found, I want to expand it.
How can I achieve this?
Thank you
You can use this :
var c = rn.findChild("text","Also ASP.net",true);
c.expand();
true indicates a deep search.Please have a look at findChild.
Please check out the fiddle
This is what I was looking for : http://jsfiddle.net/tdaXs/17/
Thank you Devendra for suggesting Deep Search option.
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: false,
children: [{
text: '1.1 foo',
leaf: false,
children: [{
text: "1.1.1 ASP.net mvc",
leaf: true,
expanded: true
}, {
text: "1.1.2 java",
leaf: true,
expanded: true
}, {
text: "1.1.3 extjs",
leaf: true,
expanded: true
}]
}, {
text: '1.2 bar',
leaf: true
}]
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 450,
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");
//var c = rn.findChild("text", " asp.net", true);
rn.findChildBy(function (child) {
var text = child.data.text;
if (regex.test(text) === true) {
console.warn("selecting child", child);
panel.getSelectionModel().select(child, true);
}
});
}
}]
}]
});
I have a window with a checkboxGroup in it. I would like whatever selections are made in the checkboxGroup to be saved when my "apply" button on the window is pressed. So far I have
xtype: 'checkboxgroup',
stateful: true,
stateID: 'checks',
getState: function() {
return {
items: this.items
};
},
stateEvents: ['close'],
columns: 2,
vertical: false,
items: [...]
I'm pretty sure my stateEvents are wrong, what would I use to indicate that I want the state to be saved when the parent window is closed?
I have this line in my app.js file's launch function, right before I create the top viewport
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Thank you!
apparently the state of the checkbox group does not include the values of the checkboxes http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.CheckboxGroup-method-getState
i had to go via a session variable and the parent window events ..
var configPopup;
var configForm = Ext.create('Ext.form.Panel', {
id: 'form-config',
name: 'form-config',
frame: true,
layout: 'anchor',
items: [
{
border:0,
anchor: "100%",
xtype: 'checkboxgroup',
fieldLabel: 'Include options',
labelWidth: 100,
id: 'opt_relation',
labelStyle: 'margin-left:10px;',
items: [
{
boxLabel: 'relation 1',
name: 'opt_relation',
inputValue: 'rel1',
checked: true
},
{
boxLabel: 'relation 2',
name: 'opt_relation',
inputValue: 'rel2',
checked: true
},
{
boxLabel: 'relation 3',
name: 'opt_relation',
inputValue: 'rel3',
checked: true
}
]
}
],
buttons: [
{
text: 'Close',
handler: function() {
configPopup.hide();
}
}]
});
configPopup = new Ext.Window({
id:'configPopup',
title: 'Chart configuration',
layout : 'fit',
width : 390,
closeAction :'hide',
plain : true,
listeners: {
show: function() {
var v = Ext.state.Manager.get("optRelation");
if (v) {
Ext.getCmp('opt_relation').setValue(v);
}
},
hide: function() {
var v = Ext.getCmp('opt_relation').getValue();
Ext.state.Manager.set("optRelation",v);
}
},
items : [
configForm
]
});
I'm trying to learn how to use Sencha Touch to build web apps. I've been following the tutorial Here and I am a bit stuck. Below have created one controller, two views and a model (All other code is copy & paste from the tutorial). The first view, Index works great. However if I try to access the second, it brings up a blank page, none of the toolbar buttons work and it doesn't fire the alert.
If I do comment out the line this.application.viewport.setActiveItem(this.editGyms);, the alert will fire, but obviously, it doesn't render the page.
I've looked at a couple other tutorials, and they seem to also be using the setActiveItem member to switch views.. Am I missing something, or do I have to somehow deactivate the first view to activate the second or something?
HomeController.js
Ext.regController('Home', {
//Index
index: function()
{
if ( ! this.indexView)
{
this.indexView = this.render({
xtype: 'HomeIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
editGyms: function()
{
if ( ! this.editGyms)
{
this.editGyms = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGyms);
Ext.Msg.alert('Test', "Edit's index action was called!");
},
});
views/home/HomeIndexView.js
App.views.wodList = new Ext.List({
id: 'WODList',
store: 'WODStore',
disableSelection: true,
fullscreen: true,
itemTpl: '<div class="list-item-title"><b>{title}</b></div>' + '<div class="list-item-narrative">{wod}</div>'
});
App.views.HomeIndex = Ext.extend(Ext.Panel, {
items: [App.views.wodList]
});
Ext.reg('HomeIndex', App.views.HomeIndex);
views/home/EditGymStore.js
App.views.EditGymStore = Ext.extend(Ext.Panel, {
html: 'Edit Gyms Displayed Here',
});
Ext.reg('EditGymStore', App.views.EditGymStore);
models/appModel.js
Ext.regModel('WOD', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'wod', type: 'string' },
{ name: 'url', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
Ext.regStore('WODStore', {
model: 'WOD',
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'wod-app-localstore'
},
// REMOVE AFTER TESTING!!
data: [
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc1</br><br/>' },
{ id: 1, date: new Date(), title: '110806 - Title1', wod: '<br/><br/>Desc2</br><br/>' }
]
});
viewport.js with toolbar
App.views.viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
scroll: 'vertical',
styleHtmlContent: true,
style: 'background: #d8e2ef',
dockedItems: [
{
xtype: 'toolbar',
title: 'The Daily WOD',
buttonAlign: 'right',
items: [
{
id: 'loginButton',
text: 'Login',
ui: 'action',
handler: function() {
Ext.Msg.alert('Login', "This will allow you to Login!");
}
},
{
xtype: 'spacer'
},
{
xtype: 'button',
iconMask: true,
iconCls: 'refresh',
ui: 'action',
handler: function() {
Ext.Msg.alert('Refresh', "Refresh!");
}
}]
},
],
});
Thanks for the help!!
In HomeController.js your action function (editGyms) is the same name as the variable you're using for your view (this.editGyms) so when it tries to setActiveItem(this.editGyms) its actually passing the controllers action function rather than the results of this.render({...})
Either change the name of the controller action or change the name of the variable you use to hold the view.. like
editGyms: function() {
if ( ! this.editGymView) {
this.editGymView = this.render({
xtype: 'EditGymStore',
});
}
this.application.viewport.setActiveItem(this.editGymView);
Ext.Msg.alert('Test', "Edit's index action was called!");
}
I am colleagues with the guy that wrote the tutorial you are referring to. You should add a comment on that post because I described your problem to him and he said that he knows the solution.
You can just add a link to this page so that you won't need to describe everything again.
Also he will (very) soon publish the 3rd part of that tutorial that will cover some similar things.