We Keep Coding

How to trigger a function in a specific node on treelist in Sencha Extjs? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am a newbie to Sencha ExtJS. I want to add a tab when the user clicks on the University node. what should I use? I search a lot on the internet but could not find the answer which exactly addresses my issue.
items: [{
region: 'west',
width: 200,
reference: 'treelistContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
itemId:'addNewTab',
border: true,
scrollable: 'y',
bufferedRenderer: false,
animate: true,
rootVisible: false,
items: [{
xtype: 'treelist',
reference: 'treelist',
itemId:'childpanel',
store: {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
},
},
}],

As I saw you are in Modern Toolkit. So you need first to find the right listener for treelist, documentation
listeners: {
selectionchange : function(tree, rec) {
if (rec.data.text === 'University')
{
//Call the tab from here
}
}
},
Your code updated:
items: [{
region: 'west',
width: 200,
reference: 'treelistContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
itemId:'addNewTab',
border: true,
scrollable: 'y',
bufferedRenderer: false,
animate: true,
rootVisible: false,
items: [{
xtype: 'treelist',
reference: 'treelist',
itemId:'childpanel',
listeners: {
selectionchange : function(tree, rec) {
if (rec.data.text === 'University')
{
//Call the tab from here
}
}
},
store: {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
},},}],

You can listen to the itemclick event on the tree and check that text of clicked record is University i.e record.text, Like this:
listeners:{
itemclick:function(me, record, item, index, e, eOpts){
if(record.data.text==='University'){
// your adding tab functionality comes here
}
}
}
Sample Code:
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
iconCls: 'x-fa fa-inbox',
leaf: true
}]
}, {
text: 'Users',
iconCls: 'x-fa fa-user',
children: [{
text: 'Tagged',
iconCls: 'x-fa fa-tag',
leaf: true
}, {
text: 'Inactive',
iconCls: 'x-fa fa-trash',
leaf: true
}]
}, {
text: 'Groups',
iconCls: 'x-fa fa-group',
leaf: true
}, {
text: 'Settings',
iconCls: 'x-fa fa-wrench',
children: [{
name:'haseeb',
text: 'University',
iconCls: 'x-fa fa-university',
leaf: true,
itemId: 'bar2',
// cls='mycls'
}]
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
store: store,
width: 200,
rootVisible: false,
renderTo: Ext.getBody(),
listeners:{
itemclick:function(me, record, item, index, e, eOpts){
if(record.data.text==='University')
alert('University is clicked');
}
}
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/ext-all-debug.js"></script><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-neptune/build/ext-theme-neptune-debug.js"></script>

ExtJs keys form.Panel

keys config working on Ext.window.Window but it dose not effect on Ext.form.Panel.
i have tried many method，but still did not work. How can i resolve this?
Ext.define('Settings.view.security.service.List', {
extend: 'Ext.form.Panel',
xtype: 'service',
requires: [
'Settings.controller.Service',
],
viewModel: { type: 'service' },
title: l.cp.service.self,
controller: 'service',
trackResetOnLoad:true,
frame: false,
padding: YsCfg.listPadding,
fieldDefaults: {
labelWidth: 180,
labelAlign: 'left',
maxLength: 63,
msgTarget: 'side',
},
//fieldDefaults: YsCfg.fieldDefaults,
border: false,
scrollable: true,
items:[{
...
}],
bbar: {
itemId: 'bbar',
defaults: {minWidth: YsCfg.btnMinWidth},
items: ['->', {
text: l.cp.common.save,
ui: 'ys-theme',
handler: 'handlerSave'
}, {
text: l.cp.common.cancel,
ui: 'ys-theme',
handler: 'handlerCancel'
}, '->']
},
keys: {
key: Ext.event.Event.ENTER,
fn: function(obj){
var controller = Ext.getCmp('control-panel').down('service').getController();
if(controller){
controller.handlerSave();
}
},
scope: this
},
listeners: {
show: 'showOpt',
boxready: 'readyOpt',
},
});

Extjs Treestore child nodes not loading

I could see the child nodes loading in the first one and strangely enough not in the second one ?
Any thoughts
Fiddle here
https://fiddle.sencha.com/#view/editor&fiddle/1lss
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ComplexTree', {
extend: 'Ext.data.TreeStore',
alias: 'store.complextree',
storeId: 'ComplexTree',
root: {
expanded: true,
children: [{
text: 'test',
leaf: true
}, {
text: 'test2',
expanded: true,
children: [{
text: 'test21',
leaf: true
}, {
text: 'test22',
leaf: true
}]
}, {
text: 'test3',
leaf: true
}]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Complex Tree',
width: 200,
height: 200,
store: Ext.create('ComplexTree'),
rootVisible: false,
renderTo: Ext.getBody()
});
Ext.create('Ext.tree.Panel', {
title: 'Complex Tree',
width: 200,
height: 200,
store: Ext.create('ComplexTree'),
rootVisible: false,
renderTo: Ext.getBody()
});
}
});

Because they are sharing the data set (object references). Modify your store like so:
Ext.define('ComplexTree', {
extend: 'Ext.data.TreeStore',
alias: 'store.complextree',
constructor: function (config) {
config = config || {};
config.root = {
expanded: true,
children: [{
text: 'test',
leaf: true
}, {
text: 'test2',
expanded: true,
children: [{
text: 'test21',
leaf: true
}, {
text: 'test22',
leaf: true
}]
}, {
text: 'test3',
leaf: true
}]
};
this.callParent([config]);
}
});

Button tap in sencha Controller file is not working

Main view file
Ext.define('DemoApp1.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Email',
'Ext.field.Password',
'Ext.field.DatePicker',
'Ext.TitleBar',
'Ext.Button'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'container',
title: 'Login',
autoDestroy: false,
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
iconCls: 'user',
items: [
// login user
{
xtype: 'fieldset',
id: 'login-user-field-set',
width: 500,
title: 'Login Here!',
items: [
{
xtype: 'emailfield',
label: 'Email',
name: 'user'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password'
}
]
},
{
xtype: 'button',
id: 'login-button',
text: 'Login',
ui: 'confirm',
width: 150
}
]
},
{
autoDestroy: false,
xtype: 'container',
title: 'Register',
layout: 'vbox',
scrollable: true,
iconCls: 'add',
items: [
{
xtype: 'titlebar',
title: 'Register New User',
docked: 'top'
},
{
// register new user
xtype: 'fieldset',
id: 'reg-items-field-set',
items: [
{
xtype: 'textfield',
label: 'Email',
allowBlank: false,
name: 'reg_user'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'reg_password'
},
{
xtype: 'passwordfield',
label: 'Confirm Password',
name: 'reg_cpassword'
},
{
xtype: 'textfield',
label: 'User Name',
name: 'reg_user_name'
},
{
xtype: 'datepickerfield',
picker: {
yearFrom: 1975,
yearTo: 2005
},
label: 'DOB',
name: 'reg_dob'
},
{
xtype: 'selectfield',
label: 'Gender',
name: 'reg_gender',
options: [
{text: 'Male', value: 'male'},
{text: 'Female', value: 'female'}
]
}
]
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [
{
xtype: 'button',
id: 'register-button',
text: 'Register',
ui: 'confirm',
width: 200
},
{
xtype: 'spacer',
width: 50
},
{
xtype: 'button',
id: 'reset-button',
text: 'Reset',
ui: 'decline',
width: 200
}
]
}
]
}
]
}
});
Controller file
Ext.define('DemoApp1.controller.MainController', {
extend: 'Ext.app.Controller',
requires: [
'Ext.form.FieldSet',
'Ext.Button'
],
config: {
refs: {
loginButton: '#login-button',
regFieldSet: '#reg-items-field-set',
regNewUserButton: '#register-button',
regFormResetButton: '#reset-button',
loginUserFieldSet: '#login-user-field-set'
},
control: {
loginButton: {
tap: 'loginButtonTapped'
},
regFormResetButton: {
tap: 'regFormResetButtonTapped'
},
regNewUserButton: {
tap: 'regNewUserButtonTapped'
}
},
loginButtonTapped: function(self, e) {
console.log('loginButtonTapped');
},
regFormResetButtonTapped: function(self, e) {
console.log('regFormResetButtonTapped');
},
regNewUserButtonTapped: function(self, e) {
console.log('regNewUserButtonTapped');
}
}
});
on click on any button it logging the below
Uncaught TypeError: Cannot read property 'apply' of undefined
what wrong in it???
thanks in advance...

Your methods should not go in the config block. loginButtonTapped, regFormResetButtonTapped and regNewUserButtonTapped. They should come out one level into the class definition, because they are class methods, not configurations.

EXTJS 4.2 Adding new entries to store/grid

I am having trouble adding new entries to a store / grid in ExtJS 4.2. The create action runs on the server and returns a generated id for the new record. I can start on edit on the row that does not show up in the grid. The error I get after syncing is: Uncaught TypeError: Cannot read property 'parentNode' of null.
projectStore.js:
var projectStore = Ext.create('Ext.data.Store', {
model: 'ProjectModel',
storeId: 'projectStore',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
create: webPath+'server.php?action=createProjectStore',
read: webPath+'server.php?action=readProjectsStore',
update: webPath+'server.php?action=updateProjectStore',
destroy: webPath+'server.php?action=destroyProjectStore'
},
extraParams: {
token: userDetails.token,
userName: userDetails.UserName
},
reader: {
type: 'json',
successProperty: 'success',
idProperty: "ProjectID",
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true,
allowSingle: false
},
listeners: {
exception: function(proxy, response, operation){
// Ext.MessageBox.show({
// title: 'REMOTE EXCEPTION',
// msg: operation.getError(),
// icon: Ext.MessageBox.ERROR,
// buttons: Ext.Msg.OK
// });
operation.records[0].reject();
}
},
onUpdateRecords: function(records, operation, success) {
console.log(records);
}
}
});
projectModel.js:
Ext.define('ProjectModel', {
extend: 'Ext.data.Model',
idProperty: 'ProjectID',
fields: [ {
name: 'ProjectID',
type: 'int'
}, 'AccountName', 'AccountID', 'ProjectName', 'Deleted']
});
userProfileProjects.js
Ext.require([
'Ext.grid.Panel',
'Ext.form.*',
'Ext.window.Window',
'Ext.data.*'
]);
$(document).data('mcal.userAccountFixPopupOpen', false);
$(document).data('mcal.newProjectRecord', false);
var userProfileProjectRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});
Ext.define('User.Project.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.userProjectsGrid',
initComponent: function(){
this.editing = userProfileProjectRowEditing;
this.onRemoveProject = function(grid, rowIndex, colIndex) {
grid.getStore().removeAt(rowIndex);
}
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
items: ['->',
{
text: 'Add Project',
handler : function() {
userProfileProjectRowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('ProjectModel', {
ProjectName: 'New Project'
});
projectStore.insert(0, r);
$(document).data('mcal.newProjectRecord', true);
userProfileProjectRowEditing.startEdit(0, 0);
}
},
{
iconCls: 'icon-refresh',
text: 'Refresh',
scope: this,
handler: this.onRefresh
}]
}],
columns: [
{
text: 'Account',
width: 115,
sortable: true,
hidden: false,
dataIndex: 'AccountID',
renderer: function(value){
var accountID = userAccountTimeLimitedStore.getAt(userAccountTimeLimitedStore.find('key', value));
return accountID.get('AccountName');
},
editor: {
xtype: 'combobox',
valueField: 'key',
displayField: 'AccountName',
triggerAction: 'all',
queryMode: 'local',
store: userAccountTimeLimitedStore
},
flex: 1
},
{
text: 'Project',
width: 115,
sortable: true,
dataIndex: 'ProjectName',
field: {
type: 'textfield'
},
flex: 1,
hidden: false
},
{
xtype:'actioncolumn',
text: 'Delete',
width:45,
align: 'center',
editRenderer: function(){ return ''},
items: [{
icon: webPath+'/images/remove.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: this.onRemoveProject
}]
}
],
selType: 'rowmodel',
plugins: [this.editing]
});
this.callParent();
},
onRefresh: function(){
this.store.reload();
}
});
function initUserProjectGrid(){
window.main = Ext.create('Ext.container.Container', {
padding: '0 0 0 0',
width: 380,
height: 200,
renderTo: Ext.get('userProjectGridDiv'),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
itemId: 'userProfileProjectGrid',
xtype: 'userProjectsGrid',
title: 'Projects',
flex: 1,
store: 'projectStore'
}]
});
// main.getComponent('userProfileProjectGrid').editing.editor.form.findField('AccountName').disable();
var localEdit = main.getComponent('userProfileProjectGrid').editing;
localEdit.on('beforeedit', function(editor, context, eOpts){
if($(document).data('mcal.newProjectRecord') != true){
localEdit.editor.form.findField('AccountID').disable();
}else{
localEdit.editor.form.findField('AccountID').enable();
}
});
localEdit.on('afteredit', function(){
$(document).data('mcal.newProjectRecord', false);
});
}