My App works fine, if the TreeView "TreeCreateMenu" is not embed. Since it is embed, the app stocks at the Browser-Web-Console at the Point from the extjs-directory "Trigger.js". But no error is displayed!
Here are my files:
The Viewport:
Ext.define('App.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'App.view.Settings',
'App.view.Footer',
'App.view.TreeMenu',
'App.view.tree.TreeCreateMenu',
],
layout: 'border',
items: [
{
region: 'north',
border: false,
margin: '0 0 1 0',
split: true,
items: [{xtype: 'settings'}]
}, {
region: 'west',
collapsible: true,
title: 'Menu',
width: 250,
layout: 'vbox',
items: [
{
xtype: 'treemenu',
height: 600,
minSize: 600,
maxSize: 600,
layout: 'fit',
flex: 1
},
{
title: 'Create',
layout: 'fit',
border: '1 0 0 0',
width: 250,
height: 100,
items: [{xtype: 'treecreatemenu'}]
}
]
// could use a TreePanel or AccordionLayout for navigational items
}, {
region: 'south',
layout: 'fit',
height: 20,
items: [{xtype: 'footertoolbar'}]
}, {
region: 'center',
id:'region_center',
layout: 'fit',
border: '1 0 0 0',
items: []
}
],
initComponent: function() {
this.callParent();
}
});
The Controller of TreeCreateMenu
Ext.define('App.controller.tree.TreeCreateMenu', {
extend: 'Ext.app.Controller',
views: ['tree.TreeCreateMenu'],
models: ['tree.TreeCreateMenu'],
stores: ['tree.TreeCreateMenu'],
onLaunch: function() {},
refs: [{
selector: 'tree',
ref: 'treecreatemenu'
}],
init: function() {
this.control({
'treecreatemenu': {
itemclick: function(view, node, rec, item, index, e ) {}
}
});
}
});
The model:
Ext.define('App.model.tree.TreeCreateMenu', {
extend: 'Ext.data.Model',
displayField: 'text',
fields: [
{name: 'text', type: 'string', leaf:false},
{name: 'value', type: 'string', leaf:false},
]
});
The store: (Response is correct, because i displayed it at the TreeMenu.js in the Viwport)
Ext.define('App.store.tree.TreeCreateMenu', {
extend: 'Ext.data.TreeStore',
requires: 'App.model.tree.TreeCreateMenu',
model: 'App.model.tree.TreeCreateMenu',
AutoLoad: false,
nodeParam: 'value',
proxy: {
type: 'ajax',
url: 'bin/app/ajax.php',
extraParams: {
action:'getTreeCreateMenu'
},
reader: {
type: 'json',
root: 'children'
},
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
}
}
});
And my View:
Ext.define('App.view.tree.TreeCreateMenu', {
extend: 'Ext.tree.Panel',
alias: 'widget.treecreatemenu',
//store: 'tree.TreeCreateMenu',
rootVisible: false,
bodyStyle: 'border:none;',
padding:'5,0,0,0'
});
So nothing special...but it doesn't work and I have absolutely no idea! Someone can help me with this please? THANKS!!
Related
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',
},
});
I can´t load the store data when the view is loaded.
This is my store:
(strEstadosMtoOrganismos.js)
Ext.define('TelicitaApp.store.filtros.strEstadosMtoOrganismos', {
extend: 'Ext.data.Store',
model: 'TelicitaApp.model.filtros.mdlEstadosMtoOrganismos',
autoLoad: false,
proxy: {
type: 'ajax',
api: {read: './data/php/filtros/Tmc_EstadosMtoOrganismos.php?despliegue='+TelicitaApp.Settings.despliegue},
reader: {
type: 'json',
root: 'data',
totalProperty: 'total',
successProperty: 'success'
}
}
});
This is my view:
(viewGridMtoOrganismos.js)
Ext.define('TelicitaApp.view.mantenimientos.organismos.viewGridMtoOrganismos', {
extend: 'Ext.grid.Panel',
alias: 'widget.viewGridMtoOrganismos',
requires: [
],
initComponent: function() {
var toolbar1 = {
xtype : 'toolbar',
dock : 'top',
items: [
{
iconCls:'limpiar-icon', text:'Limpiar', handler: function() {},
},
'->',
{
iconCls:'refresh', text:'Recargar', handler: function() {},
}
]
};
var toolbar2 = {
xtype: 'toolbar',
dock: 'top',
items: [
{text:'<span style="color:#C85E00;">Estado</span>'},
{
xtype: 'combo',
value: 'Todos',
queryMode: 'remote',
triggerAction: 'all',
editable: false,
displayField: 'label',
valueField: 'value',
store: 'filtros.strEstadosMtoOrganismos'
}
]
}
Ext.apply(this, {
frame: true,
bodyPadding: '5 5 0',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
forceFit: true,
height: 300,
stripeRows: true,
loadMask: true,
tbar: {
xtype: 'container',
layout: 'anchor',
defaults: {anchor: '0'},
defaultType: 'toolbar',
items: [
toolbar1,toolbar2
]
},
columns: [
{header:'<span style="color:blue;">Id</span>', xtype: 'numbercolumn',format:'0', width:35, sortable: true},
]
});
this.callParent(arguments);
}
});
This is my controller:
(ctrlMtoOrganismos.js)
Ext.define('TelicitaApp.controller.ctrlMtoOrganismos', {
extend: 'Ext.app.Controller',
models:[
'mantenimientos.organismos.mdlMtoOrganismos',
'filtros.mdlEstadosMtoOrganismos'
],
stores:[
'mantenimientos.organismos.strMtoOrganismos',
'filtros.strEstadosMtoOrganismos'
],
views: [
'mantenimientos.organismos.viewModuloMtoOrganismos'
],
refs: [
],
init: function() {
this.control({
});
},
onLaunch: function() {
},
});
If I set the autoload property in the store to true,it load the data when the app launch.But I want to load the data when the view is loaded.
Once the view is loaded,if i expand the combo it launch the php file taht fills the combo,but I want it to load the data automatically after the view is loaded,not when you expand the combo.
Replace
this.callParent(arguments);
}
with
this.callParent(arguments);
this.down('combo').getStore().load();
}
and you're good to go.
I have a form that has comboboxes, tagfields, date pickers, etc., and a grid. Each of these elements has a different store. The user is going to make selections from the comboboxes, etc,. and enter values into the grid. Then the values from the grid and other form elements are all sent on a POST to the server. I know how to POST the data from the comboboxes, tagfields, and date pickers. However, I don't know how to send the data in the grid with the form. Here is the form view:
Ext.define('ExtTestApp.view.main.List', {
extend: 'Ext.form.Panel',
xtype: 'cell-editing',
frame: true,
autoScroll: true,
title: 'Record Event',
bodyPadding: 5,
requires: [
'Ext.selection.CellModel',
'ExtTestApp.store.Personnel'
],
layout: 'column',
initComponent: function(){
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
//width: 550,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
msgTarget: 'side'
},
items: [{
xtype: 'fieldset',
//width: 400,
title: 'Event Information',
//height: 460,
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Event',
layout: 'hbox',
defaults: {
hideLabel: 'true'
},
items: [{
xtype: 'combobox',
name: 'eventTypeId',
width: 300,
//flex: 1,
store: {
type: 'events'
},
valueField: 'eventTypeId',
// Template for the dropdown menu.
// Note the use of the "x-list-plain" and "x-boundlist-item" class,
// this is required to make the items selectable.
allowBlank: false
}
]
},
{
xtype: 'container',
layout: 'hbox',
margin: '0 0 5 0',
items: [
{
xtype: 'datefield',
fieldLabel: 'Date',
format: 'Y-m-d',
name: 'startDate',
//msgTarget: 'under', //location of error message, default is tooltip
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
emptyText: 'Start',
allowBlank: false
},
{
xtype: 'datefield',
format: 'Y-m-d',
name: 'endDate',
//msgTarget: 'under', //location of error message
invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
//flex: 1,
margin: '0 0 0 6',
emptyText: 'End',
allowBlank: false
}
]
}]
},
{
xtype: 'fieldset',
//height: 460,
title: 'Platform Information',
//defaultType: 'textfield',
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Platform',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'combobox',
name: 'platformId',
store: {
type: 'platforms'
},
valueField: 'platformId',
allowBlank: false
}
]
}
]
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
fieldLabel: 'Software Type(s)',
//combineErrors: true,
defaults: {
hideLabel: 'true'
},
items: [
{
xtype: 'tagfield',
width: 400,
//height: 50,
fieldLabel: 'Software Type(s)',
name: 'softwareTypeIds',
store: {
type: 'softwareTypes'
},
labelTpl: '{softwareName} - {manufacturer}',
valueField: 'softwareTypeId',
allowBlank: false
}
]
},
{
xtype: 'gridpanel',
layout: 'anchor',
defaults: {
anchor: '100%'
},
width: 1300,
//columnWidth: 0.78,
//title: 'Metrics',
plugins: [this.cellEditing],
title: 'Personnel',
store: {
type: 'personnel'
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone', flex: 1 }
]
}
],
buttons: [
{
text: 'Save Event',
handler: function() {
var form = this.up('form'); // get the form panel
// if (form.isValid()) { // make sure the form contains valid data before submitting
Ext.Ajax.request({
url: 'api/events/create',
method:'POST',
headers: { 'Content-Type': 'application/json' },
params : Ext.JSON.encode(form.getValues()),
success: function(form, action) {
Ext.Msg.alert('Success', action.result);
},
failure: function(form, action) {
//console.log(form.getForm().getValues());
Ext.Msg.alert('Submission failed', 'Please make sure you selected an item for each required field.', action.result);
}
});
// } else { // display error alert if the data is invalid
// Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
// }
}
}
]
});
this.callParent();
}
});
var grid = Ext.ComponentQuery.query('grid')[0];
Here is the store for the grid:
Ext.define('ExtTestApp.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
fields: [
'name', 'email', 'phone'
],
data: { items: [
{ name: 'Jean Luc', email: "jeanluc.picard#enterprise.com", phone: "555-111-1111" },
{ name: 'Worf', email: "worf.moghsson#enterprise.com", phone: "555-222-2222" },
{ name: 'Deanna', email: "deanna.troi#enterprise.com", phone: "555-333-3333" },
{ name: 'Data', email: "mr.data#enterprise.com", phone: "555-444-4444" }
]},
autoLoad: true,
proxy: {
type: 'memory',
api: {
update: 'api/update'
},
reader: {
type: 'json',
rootProperty: 'items'
},
writer: {
type: 'json',
writeAllFields: true,
rootProperty: 'items'
}
}
});
Ideally, you would need to create a custom "grid field" so that the grid data is picked up on form submit like any other field.
You can also use this workaround: in the "Save Event" button handler, dig out the grid store and fish data out of it:
var gridData = [];
form.down('gridpanel').store.each(function(r) {
gridData.push(r.getData());
});
Then get the rest of the form data and put the grid data into it:
var formData = form.getValues();
formData.gridData = gridData;
Finally, include it all in your AJAX call:
params: Ext.JSON.encode(formData)
I have a popup window with a combobox and a few buttons. The idea is to make a selection in the combobox and then either save the selection to a store or cancel. I have done this before and never had any problems, but with this code I get Uncaught TypeError: Cannot call method 'apply' of undefined whenever I try to interact with the combo. It seems to me like ExtJS is trying to run code meant for the store on the combobox.
I load the popup window with Ext.create('Account.Window.Reuse');
The definitions:
Ext.define('SimpleAccount', {
extend: 'Ext.data.Model',
idProperty: 'AccountID',
fields: [ {
name: 'AccountID',
type: 'int',
useNull: true
}, 'Name']
});
var userAccountReuseStore = Ext.create('Ext.data.Store', {
model: 'SimpleAccount',
storeId: 'userAccountReuseStore',
data: [{"AccountID":"1", "Name":"FirstAccount"},
{"AccountID":"2", "Name":"SecondAccount"},
{"AccountID":"3", "Name":"ThirdAccount"}]
});
Ext.define('Account.Reuse.ComboBox', {
extend: 'Ext.form.ComboBox',
alias: 'widget.accountReuseComboBox',
initComponent: function(){
Ext.apply(this, {
fieldLabel: 'Account',
displayField: 'Name',
valueField: 'AccountID',
queryMode: 'local'
})
}
});
Ext.define('Account.Reuse.Fieldset', {
extend: 'Ext.form.FieldSet',
alias: 'widget.accountReuseFieldset',
initComponent: function(){
Ext.apply(this, {
items: [
{
xtype: 'label',
cls: 'text-important',
margin: '0 0 10 0',
style: 'display: block',
text: 'Only attach an account you have permission to use. After attaching the account you will not be able to use, remove, or edit it until approved by SCSAM'
},
{
xtype: 'accountReuseComboBox',
store: userAccountReuseStore
}
]
});
this.callParent();
}
});
Ext.define('Account.Reuse.Details', {
extend: 'Ext.form.Panel',
alias: 'widget.accountReuseDetails',
initComponent: function(){
Ext.apply(this, {
plain: true,
border: 0,
bodyPadding: 5,
fieldDefaults: {
labelWidth: 55,
anchor: '100%'
},
layout: {
type: 'vbox',
align: 'stretch',
flex: 1
},
items: [
{
xtype: 'accountReuseFieldset',
defaults: {
labelWidth: 89,
anchor: '100%',
layout: {
type: 'vbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 0},
align: 'stretch'
}
},
title: 'Details',
collapsible: false
}]
});
this.callParent();
}
});
Ext.define('Account.Window.Reuse', {
extend: 'Ext.window.Window',
alias: 'widget.accountWindowReuse',
initComponent: function(){
Ext.apply(this, {
title: 'Account Details',
width: 400,
autoShow: true,
modal: true,
layout: {
type: 'fit',
align: 'stretch' // Child items are stretched to full width
},
items: [{
xtype: 'accountReuseDetails',
id: 'attachAccountReuseForm'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'Attach',
id: 'saveButton',
handler: function(){
var rec = this.up('accountWindowReuse').down('accountReuseDetails').getValues();
var store = Ext.getStore('userAccountReuseAttachStore');
store.add(rec);
this.up('window').close();
}
},{
minWidth: 80,
text: 'Cancel',
handler: function(){
this.up('window').close();
}
}]
}]
});
this.callParent();
}
});
It looks like you forget call parent in your Account.Reuse.ComboBox initComponent function so combobox is not initialized properly.
Your Account.Reuse.ComboBox initComponent function should look like this:
initComponent: function(){
Ext.apply(this, {
fieldLabel: 'Account',
displayField: 'Name',
valueField: 'AccountID',
queryMode: 'local'
});
this.callParent();
}
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);
});
}