Related
I'm trying to add a combobox to a floating (popup) form panel in ExtJS. But I'm getting a "Cannot set property 'component' of null" error and the window will not load.
I use the following code in a controller to create the window:
onTreeAddDocClick: function () {
var f = new Ext.form.Panel({
frame: false,
header: false,
floating: true,
closable: true,
items: [{
xtype: 'addDoc'
}]
});
f.show();
}
The code for the window itself is as follows:
Ext.define('OPENhrm.view.dossier.widget.popup.AddDoc', {
extend: 'Ext.form.Panel',
xtype: 'addDoc',
requires: [
'Ext.layout.container.VBox'
],
controller: "dossier-addDoc",
viewModel: {
type: "dossier-addDoc"
},
id: 'addDocForm',
frame: true,
title: 'Add document',
width: 400,
bodyPadding: '10 10 0',
layout: 'form',
closable: true,
defaults: {
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 50
},
items: [{
// item selector
xtype: 'filefield',
emptyText: 'Select Document',
fieldLabel: 'Document',
name: 'filePath',
id: 'filePath',
buttonText: 'upload document',
buttonConfig: {
icon : '/resources/images/icons/add.jpg'
}
}, {
xtype: 'combo',
fieldLabel: 'Test',
hiddenName: 'test',
store: new Ext.data.SimpleStore({
data: [
['Test1'],
['Test2']
],
id: 0,
fields: ['text']
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all',
editable: false
}],
// buttons
buttons: [{
text: 'Add',
handler: 'onAddDockClick'
}, {
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}]
});
If I remove the combobox, the window works just fine. If I place the combobox in a form somewhere else in my application (e.g. on a page with 2 panels; a searchfilter/form and a grid with search results), it works just fine. That other page however, is not a floating/popup window.
I got it to work by defining the whole page in the controller, but as I'm using a MVC structure, that doesn't seem like the way to go. Does anyone know how to get the combobox to work in a floating window, without putting the whole code for that window in the controller?
I have a form defined that I use to submit to a PHP script that will create an Excel Spreadsheet using PHPExcel.
Ext.define('Admin.view.main.LedgerParams',{
extend: 'Ext.window.Window',
xtype: 'ledgerparams',
title: 'Generate Account Ledger',
defaultFocus: '[name=period]',
layout: 'fit',
closable: false,
resizable: false,
modal : true,
standardSubmit: true,
items: [{
xtype: 'form',
layout: 'fit',
fieldDefaults: {labelWidth: 80,labelAlign: 'right'},
padding: 10,
items: [{
xtype: 'fieldset',
padding: 10,
title: '<b>Account Ledger Parameters</b>',
defaultType: 'numberfield',
defaults: {enforceMaxLength: true},
items:[{
name: 'period',
flex : 1,
fieldLabel: 'Fiscal Period',
selectOnFocus: true,
value: new Date().getFullYear(),
minValue: 1980
}]
}]
}],
buttons:[{
text: 'Generate',
handler: 'onClick_btnLedgerPrint'
},{
text: 'Cancel',
handler: function(){this.up('window').destroy();}
}]
});
The onClick_BtnLedgerPrint method in the main controller calls the form submit:
onClick_btnLedgerPrint: function(btn){
btn.up('window').down('form').submit({
url: 'app/data/Reports.php',
params: {action:'print',reportname:'generate_ledger'}
});
}
however it appears that a JSON response is required by the form from the server instead of initiating the download. Is the standardSubmit broken in ExtJS5? Any help would be appreciated!
JavaScript cannot initiate the download, same as Ext JS. Only browser does this.
var formValues = btn.up('window').down('form').getForm().getValues();
var params = { action: 'print', reportname: 'generate_ledger' };
var requestParams = Ext.merge(formValues, params);
var url = 'app/data/Reports.php?' + Ext.Object.toQueryString(requestParams);
document.location = url;
Or you can try to use method with iframe described here
I have several tabs on toolbar each of them having seperate handler , i have called seperate function of each handler . The code is as below
Ext.define('myco.view.User', {
extend: 'Ext.Container',
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'User'
},
{
docked: 'top',
xtype: 'toolbar',
items: [{
text: 'My Profile',
handler: function() {
var panel = Ext.getCmp('User'),
tpl = new Ext.XTemplate([
'<div class="demo-weather">',
'<tpl for=".">',
'<div class="day">',
'<div class="date">{username}</div>',
'<tpl for="weatherIconUrl">',
'<img src="{value}">',
'</tpl>',
'<span class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></span>',
'</div>',
'</tpl>',
'</div>'
]);
panel.getParent().setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
Ext.Ajax.request({
url: 'http://localhost:8000/api/myapp/user/',
method:'GET',
callbackKey: 'callback',
defaultHeaders : 'application/json',
params: {
//key: '23f6a0ab24185952101705',
//q: '94301', // Palo Alto
format: 'json',
//num_of_days: 5
},
success : function(response, opt) {
dataarray = Ext.decode(response.responseText);
weather=dataarray.objects;
panel.updateHtml(tpl.applyTemplate(weather))
panel.getParent().unmask();
},
failure : function(response, opt) {
Ext.Msg.alert('Failed', response.responseText);
panel.getParent().unmask();
}
});
}
},
{
text:'login',
handler: function() {
var main = new Ext.Panel({
title: 'My first panel', //panel's title
fullscreen: true,
//the element where the panel is going to be inserted
//html: 'Nothing important just dummy text' //panel's content
items:[
{
xtype: 'fieldset',
title: 'Login',
items: [
{
xtype: 'textfield',
label: 'Username',
name: 'username',
id : 'username'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password',
id : 'password'
}
]
},
{
xtype: 'button',
text: 'Send',
ui: 'confirm',
handler: function() {}
}
]
});
panel.add(main);
alert('test');
}
}
]
}]
}
});
Now when i click on the tab , previous panel will not be cleared and data will get overlapped there ..... like when i click My profile profile is listed there , after that when i click login profile+ login both will be loaded one overlapping another ...
You should use Ext.tab.Panel for this, define your profile and login panels as items of a parent TabPanel, the switching will be handled by ExtJS. You can use the activate event of a Panel to add custom logic to execute when your tabs get activated.
i have a form panel and a tree panel
the form is used to add new users, the tree is used to show the list of users
what i want is to right click a node in my tree ,click edit (already can do that) then i have my data in the add form panel and be able to modify there and update my user
so basically use the same form for adding and updating
this is how im trying to do up to know
but its not working at all
i added a model to my tree,i used loadRecord(rec), but i dont know how to bind my tree data with the form fields!
tried adding displayfield with same name from my tree model!!
my tree model and store:
Ext.define('TreeModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'text' },
{ name: 'id' }
]
});
window.ATreeStore = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel',
root: Ext.decode(objt.TreeToJson()),
proxy: {
type: 'ajax'
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}, {
property: 'text',
direction: 'ASC'
}]
});
my tree menu:
var myContextMenu = new Ext.menu.Menu({
items: [{
text: 'Edit',
handler: function () {
Ext.getCmp('addaform').getForm().loadRecord(rec);
}
}
}]
my form:
Ext.define("Ext.app.Adduser", {
extend: "Ext.form.Panel",
title: 'Add user',
id : 'addform',
closable: true,
collapsible: true,
animCollapse: true,
draggable: true,
resizable: true,
margin: '5 5 5 5',
height: 400,
frame: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
anchor: '100%'
},
items: [{
layout: 'column',
border: false,
items: [{
padding: '5',
columnWidth: .5,
border: false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: ' Name',
name: 'name',
allowBlank: false,
displayfield:'id',//
anchor: '95%'
}]
}, {
padding: '5',
columnWidth: .5,
border: false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'First name',
name: 'fname',
allowBlank: false,
anchor: '95%'
}, {
xtype: 'textarea',
fieldLabel: 'Profile',
name: 'prof',
anchor: '95%'
}]
}],
buttons: [{
text: 'Save',
handler: function () {
this.up('form').getForm().submit
({
url: 'AddData.ashx',
params: { action: 'add' },
success: function (form, action)
{
Ext.MessageBox.show({ title: 'Success !',
msg: 'User added successfully<br />',
icon: Ext.MessageBox.INFO,
buttons: Ext.MessageBox.OK
}) }
}) }]
thank you
If your TreePanel uses a TreeStore which in turn has a Ext.data.Model, then when you right click on a node (say nodeA), you should be just able to do form.loadRecord(nodeA), the API for loadRecord is here
If it's still not clear, I think this blog post could help, it talks about loading a grid record into a form. I know it's not ExtJS 4, but the key functions are the same.
Ok, let me show this with a super simple example, hope it will help.
First we create the form that we want to display stuff in, note that the renderTo property is bound to a div inside my HTML, so you might need to change that. Also note that the name property of the textarea and textfield, they are the key for the loadRecord to work, they have to match the fields defined in the model later.
var form = Ext.create('Ext.form.Panel',{
renderTo : 'form-div',
items : [{
xtype : 'textarea',
fieldLabel : 'label 1',
name : 'name'
},{
xtype : 'textfield',
fieldLabel : 'label 2',
name : 'age'
}]
});
Next, we create the tree to display our data, we start by creating a simple model :
Ext.define('Person',{
extend : 'Ext.data.Model',
fields : [{
name : 'name',
type : 'string'
},{
name : 'age',
type : 'int'
}]
});
Then we create a TreeStore that uses that model and initialize it with some inline data:
var store = Ext.create('Ext.data.TreeStore',{
model : 'Person',
root : {
expanded : true,
children : [{
name : 'John',
age : 10,
leaf : true
},{
name : 'Joe',
age : 100,
leaf : true
}]
}
});
Then we create the tree to display the data in the store. (Note that the nodes will show up as "undefined" because we are not using the default "text" property of a Node)
var tree = Ext.create('Ext.tree.Panel',{
height : 300,
width : 300,
store : store,
rootVisible : false,
renderTo : 'tree-div',
listeners : {
itemclick : function(view, record){
form.loadRecord(record);
}
}
});
Now, you should see a tree with two nodes both displayed as "undefined" on your page, as well as a Form with a textarea and a textfield. If you click on a node inside the tree, the form will display the name and age of the selected node.
i have 6 different filters on a single list and i want to render the app on mobile screen
to save the toolbar space I want to combine all that filters.
the problem is, when I combine these filters in a single form panel these filters dose not work
can you please guide me on how to combine them, should I combine these filters in overlay panel rather than formPanel
following is the code for filters.js
kiva.views.LoanFilter = Ext.extend(Ext.form.FormPanel, {
ui: 'green',
cls: 'x-toolbar-dark',
baseCls: 'x-toolbar',
initComponent: function() {
this.addEvents('filter');
this.enableBubble('filter');
var form;
var showForm = function(btn, event) {
form = new Ext.form.FormPanel(formBase);
form.showBy(btn);
form.show();
};
Ext.apply(this, {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
layout: {
type: 'hbox',
align: 'center'
},
items: [
{
xtype: 'button',
iconCls:'info',
title:'info',
iconMask:true,
ui:'plain',
},{
xtype: 'spacer'
},/*{
xtype: 'selectfield',
name: 'search',
prependText: 'Search:',
options: [
{text: 'Location', value: 'location'},
{text: 'Theme', value: 'theme'},
]
},*/{
xtype: 'searchfield',
name: 'q',
placeholder: 'Search',
value: 'Destination or ID',
listeners : {
change: this.onFieldChange,
keyup: function(field, e) {
var key = e.browserEvent.keyCode;
// blur field when user presses enter/search which will trigger a change if necessary.
if (key === 13) {
field.blur();
}
},
scope : this
}
},{
xtype: 'selectfield',
name : 'sort_by',
prependText: 'sort_by:',
ui:'button',
cls:'sortbox',
options: [
{text: 'Sort By', value: ''},
{text: 'Newest', value: 'modified'},
{text: 'Sleeps', value: 'sleep_max'},
{text: 'Sleeps Desc', value: 'sleep_max DESC'},
{text: 'Bedrooms', value: 'bedroom'},
{text: 'Bedrooms Desc', value: 'bedroom DESC'},
// {text: 'Rates', value: 'rates'},
]
},{
xtype: 'button',
text: 'Filters',
handler: showForm
}
]
});
kiva.views.LoanFilter.superclass.initComponent.apply(this, arguments);
//for filters form
var formBase = {
scroll: 'vertical',
//url :
standardSubmit : true,
items: [{
xtype: 'fieldset',
title: 'Filters',
instructions: 'Please enter the information above.',
defaults: {
//required: true,
labelAlign: 'left',
labelWidth: '30%'
},
items: [
{
xtype: 'spinnerfield',
name : 'sleep_max',
label: 'Sleeps',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'bedroom',
label: 'Bedrooms',
minValue: 0,
maxValue:10
},{
xtype: 'spinnerfield',
name : 'rates',
label: 'Rates',
minValue: 50,
maxValue:5000,
incrementValue: 100,
cycle: false
},/*{
xtype: 'datepickerfield',
name : 'checkIn',
label: 'Check In',
destroyPickerOnHide: true,
},{
xtype: 'datepickerfield',
name : 'checkOut',
label: 'Check Out',
destroyPickerOnHide: true,
},*/{
xtype: 'selectfield',
name : 'themes',
label: 'Themes',
options: [
{text: 'Themes', value: ''},
{text: 'Skiing', value: 'skiing'},
{text: 'Golf', value: 'golf'},
{text: 'Beaches', value: 'beaches'},
{text: 'Adventure', value: 'adventure'},
{text: 'Family', value: 'family'},
{text: 'Fishing', value: 'fishing'},
{text: 'Boating', value: 'boating'},
{text: 'Historic', value: 'historic'},
{text: 'Biking', value: 'biking'},
]
},/*{
xtype: 'hiddenfield',
name : 'secret',
value: 'false'
},*/]
}],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));
console.log(form);
console.log(result);
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
form.hide();
// Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Cancel',
handler: function() {
form.hide();
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Apply',
ui: 'confirm',
handler: function() {
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});
}
}
]
}
]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: false,
hideOnMaskTap: false,
height: 300,
width: 420,
});
}
},
/**
* This is called whenever any of the fields in the form are changed. It simply collects all of the
* values of the fields and fires the custom 'filter' event.
*/
onFieldChange : function(comp, value) {
//console.log(comp); console.log(value);
this.fireEvent('filter', this.getValues(), this);
}
});
Ext.reg('loanFilter', kiva.views.LoanFilter);
Its not clear what do you mean under "filters doesn't work".
Form with filter is not showing, then probably you need to set floating: true for the form as it is a panel and need to be floated if you want to show popup. http://docs.sencha.com/touch/1-1/#!/api/Ext.lib.Component-cfg-floating
Your form is not a part of LoanFilter form (why it is a form?), so method onFieldChange will not be triggered while you changing fields inside form. You need to move event listener to formBase
var formBase = {
defaults: {
listeners: {
change: this.onFieldChange,
scope: this
}
},
...