close extjs window after form submission - extjs

I have an extjs2 formpanel:
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
id: 'formPanel',
title: 'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 550,
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],
buttons: [{
text: 'Save',
handler: function(){
var form = Ext.getCmp('formPanel').getForm();
if(form.isValid())
form.submit({
waitMsg:'Loading...',
url: 'RepeatSession.jsp',
success: function(form,action) {
//we have to close the window here!!
},
failure: function(form,action){
Ext.MessageBox.alert('Erro',action.result.data.msg);
}
});
}
},{
text: 'Cancel'
}]
});
and a window:
win = new Ext.Window(
{
layout: 'fit',
width: 500,
height: 300,
modal: true,
closeAction: 'hide',
items: fsf
});
win.show();
As you can see, the form panel is inside the window as an item. I have to close the window after a successful form submission but I have no idea how to access the window object inside my success handler.
How can i hide the window after successful form submission?

Just save a reference to the window or one of its children before creating the form. For example you can use the button paremeter that the handler function gets passed:
handler: function(button, e){
[...]
success: function(form,action) {
button.up('.window').close();
},
Or, as you apparently already have the window in a variable (win), you can just use that to close the window:
win.close();
but that depends on the variable win being available inside the success function, which we cannot assume from the code you gave.

Related

How to make siesta able to click elements non visible

I'm using siesta to test a large scrolling page, and some of the elements are not visible unless you scroll down first. Siesta runner seems to assume that the elements that need to be clicked are visible, so when it tries to click those elements, it actually misses the target by far. How can I overcome this?
I have modified an existing testcase just to add a large panel that would push down the target elements.
Any help would be appreciated.
StartTest(function (t) {
var fp = Ext.create('Ext.FormPanel', {
title: 'Check/Radio Groups Example',
frame: true,
fieldDefaults: {
labelWidth: 110
},
width: 700,
height: 1700,
renderTo:Ext.getBody(),
bodyPadding: 10,
items: [
{
xtype: 'panel',
title: 'a LARGE panel',
height: 1500
},
{
xtype: 'fieldset',
title: 'Checkbox Groups (initially collapsed)',
layout: 'anchor',
defaults: {
anchor: '100%',
labelStyle: 'padding-left:4px;'
},
items: [{
xtype: 'checkboxgroup',
fieldLabel: 'Favorite browser',
// Put all controls in a single column with width 100%
columns: 1,
items: [
{id : 'cb-chrome', boxLabel: 'Chrome', name: 'cb-col-1'},
{id : 'cb-ff', boxLabel: 'Firefox', name: 'cb-col-2'},
{id : 'cb-safari', boxLabel: 'Safari', name: 'cb-col-3'}
]
},{
xtype: 'checkboxgroup',
fieldLabel: 'Random questions',
allowBlank: false,
msgTarget: 'side',
autoFitErrors: false,
anchor: '-18',
layout: 'column',
defaultType: 'container',
items: [{
columnWidth: .33,
items: [
{xtype: 'component', html: 'IE 6 is:', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'Awesome', name: 'cb-cust-1'},
{xtype: 'checkboxfield', boxLabel: 'Not so awesome', name: 'ie6-not-awesome'}
]
},{
columnWidth: .33,
items: [
{xtype: 'component', html: 'Chrome is', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'Fast', name: 'cb-cust-3'},
{xtype: 'checkboxfield', boxLabel: 'Not so fast', name: 'cb-cust-3'}
]
},{
columnWidth: .34,
items: [
{xtype: 'component', html: 'This demo is powered by', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'ActiveX', name: 'cb-cust-4'},
{xtype: 'checkboxfield', boxLabel: 'Ext JS', name: 'cb-cust-5'}
]
}]
}]
}]
});
// Making use of Ext.ComponentQuery
t.chain(
{ action : 'click', target : '>>[id="cb-chrome"]' },
{ action : 'click', target : '>>[name="ie6-not-awesome]' },
{ action : 'click', target : '>>[boxLabel="Fast"]' },
{ action : 'click', target : '>>[boxLabel="Ext JS"]' },
function() {
t.pass('All boxes could be clicked ok');
}
);
});
In your harness file you can configure this option:
autoScrollElementsIntoView : true,
Now Siesta should automatically scroll to that element for click.
Also you can set up size of the view-port window:
viewportHeight : 1200,
viewportWidth : 1200,
And if the scroll bar is directly in your app, you should be able to move with it using Siesta functions:
http://www.bryntum.com/docs/siesta/#!/api/Siesta.Test.Element-method-scrollVerticallyTo
Or using ExtJS functions:
http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Component-method-setScrollX

How to center form fields and toolbar buttons?

I am working in extjs4. I am geting stuck at a point where I want to format items in a panel at a center position properly. But I don't know how.
Actually I want to display all items at middle position not left side..also I want display submit button at center position but it get display at left side.. I am facing this problem...
here Is my some code :
Ext.define('Am.user.Registration', {
extend:'Ext.form.Panel',
//extend:'Ext.window.Window',
id:'registationId',
alias:'widget.Registration',
title:'Registration form',
resizable:false,
buttonAlign:'center',
closable:true,
titleAlign:'center',
//autoScroll:true,
draggable:false,
//shadow:true,
height:350,
width:800,
floating:true,
bodyPadding: 30,
//collapsible:true,
requires:[
'Balaee.view.sn.user.Captcha'
],
defaults:{
//align:'center'
defaultAlign:'t1-c'
},
//bodyStyle: 'align:center',
// Ext.require(['Ext.form.field.Date']);
items:[
{
xtype:'combo',
fieldLabel:'Language',
name:'language',
emptyText: 'Language',
store: ['Marathi','Hindi','English'],
queryMode: 'local',
editable:false
},
{
xtype: 'fieldcontainer',
fieldLabel: 'Name',
layout: 'hbox',
combineErrors: true,
defaults: {
hideLabel: true
},
items: [
{xtype: 'textfield', fieldLabel: 'First', name: 'firstName', emptyText: 'First name',width: 80, allowBlank: false,margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Middle', name: 'middleName',emptyText: 'Middle name', width: 80, allowBlank: true, margins: '0 5 0 0'},
{xtype: 'textfield', fieldLabel: 'Last', name: 'lastName', emptyText: 'Last name',width: 80, allowBlank: false,
validator: function(value) {
var password1 = this.previousSibling('[name=firstName]');
return (!(value === password1.getValue())) ? true : 'Dont give first name and last name same.'
}
}
]
},
{
xtype:'textfield',
fieldLabel:'Primary email',
name:'primaryEmail',
//anchor:'100%',
allowBlank:false,
emptyText: 'Email',
vtype:'email'
//labelAlign:'right',
},
---------------
--------------
],//End of items square
// buttons:[{
// xtype:'button',
// formBind: true,
// fieldLabel:'submitttttttt',
// action:'submitAction',
// text:'Submit',
// defaultAlign:'t1-c'
// }
// ],
bbar:
[
{
xtype:'button',
formBind: true,
fieldLabel:'submit',
action:'submitAction',
text:'Submit',
defaultAlign:'t1-c'
//flex:6,
},
],//End of buttons square
});// End of login class
You should apply an HBox layout (with pack: 'center') to your form and ditto for your toolbar.
You can see an example of how this is done for the form here. And for the toolbar:
var toolbar = new Ext.Toolbar({
dock: 'bottom',
layout:{
pack: 'center'
},
items: [{
xtype: 'button',
text: 'foobar',
handler: function(){
alert('ok');
}
}]
});

How add a onClick method to a TextField (ExtJS Framework)?

I would like to know how to add an onClick() method to a Ext.form.Text component.
If the component is a button, then all I have to do is to add this line:
handler: function() {alert("Hello!");}
But that line doesn´t work if the component is a textfield. Look at the example below:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
id: 'myButton',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Does not work!
}, {
xtype: 'button',
name: 'email',
fieldLabel: 'Email Address',
style: 'background-color: green',
textfieldStyle: 'background-color: green',
handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Works!
}]
});
Handler is a shortcut for the default action listener. For a button this is obviously click, but a text field doesn't have a default action. In addition, a text field does not actually fire a click event, but you can always add an event handler to the dom element:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
id: 'myButton',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
listeners: {
render: function() {
this.getEl().on('mousedown', function(e, t, eOpts) {
Ext.getCmp('myButton').setValue("TEXT")
});
}
}
}]
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
id: 'myButton',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
listeners: {
render: function( component ) {
component.getEl().on('click', function( event, el ) {
component.setValue("TEXT");
});
}
}
}, {
xtype: 'button',
name: 'email',
fieldLabel: 'Email Address',
style: 'background-color: green',
textfieldStyle: 'background-color: green',
handler: function() {Ext.getCmp('myButton').setValue("TEXT")} // Works!
}]
});

ExtJS4 Reload grid Panel in button handler

I'm working with ExtJS4 and trying to build a search feature using a form. I've got the form displayed and a user enters one of 4 criteria and clicks Search, the grid is then built and shows the results from a JSON call.
What I'm trying to achieve is to allow the user to be able to enter different search criteria and click Search again and have the grid updated to show the new results. In my first attempt the grid is rendered for each click of Search and in my second attempt it simply pushes the results of the search into the grid without removing the previous entries.
Here's my current setup:
Ext.define('job',{
extend:'Ext.data.Model',
fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})
Ext.onReady(function(){
var formPanel = Ext.widget('form', {
renderTo: 'search',
frame: true,
width: 350,
bodyPadding: 5,
bodyBorder: false,
title: 'Search',
defaults: {
anchor: '100%'
},
{
xtype: 'combo',
name: 'jobyear',
fieldLabel: 'Job Year',
store:
new Ext.data.SimpleStore({
fields: ['year'],
data: [
['2008'],['2009'],['2010'],['2011'],['2012']
] //end of data
}),
displayField: 'year',
typeAhead: true,
emptyText: 'Select a year'
}], //end of items
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'component',
id: 'formErrorState',
baseCls: 'form-error-state',
flex: 1
}, {
xtype: 'button',
formBind: true,
id: 'search',
disabled: true,
text: 'Search',
width: 140,
height: 35,
handler: function() {
var columns = [
{xtype: 'rownumberer',sortable: true},
{text: 'School Name', sortable:true,dataIndex:'account_name'},
{text: 'Acct Number', sortable:true,dataIndex:'account_number'},
{text: 'Job Number',sortable:true,dataIndex:'job_number'},
{text: 'Version',sortable:true,dataIndex:'version'},
{text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
{text: 'Program', sortable:true,dataIndex:'program'},
{text: 'Job Type', sortable:true,dataIndex:'type'}
]; // end columns
var userGrid = new Ext.grid.Panel({
id: 'FOO',
multiSelect:true,
store: store,
columns: columns,
stripeRows: true,
title: 'Results',
renderTo: Ext.get('results'),
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
})
var form = this.up('form').getForm();
var store = new Ext.data.Store({
model: 'job',
pageSize: 10,
autoLoad: true,
remoteSort:true,
proxy: {
actionMethods: {
read: 'POST'
},
type: 'ajax',
fields: ['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
url: '/search?'+ form.getValues(true),
reader:{
type: 'json',
root: 'results',
totalProperty: 'totalCount'},
}, //end proxy
sorters:[{
property:'version',
direction:'ASC'
}]
}).on('load', function(){
userGrid.reconfigure(this); // ???
});
} // end button handler
}] //end items
}] // end dockeditems
});
});
I've tried refreshing the grid and calling load() but I don't think I've hit yet on the right combination. I'd like the grid contents to be replaced with those from the latest ajax call to /search.
You should not create a new panel and a store on each search button click, so move it out of the button handler. If you just call load({params:{search:'whatever'}}) on the store of the grid when user pushes search button you will get the new data populated in your grid automatically. You don't need to reconfigure the grid or do anything else. Essentially the grid is bound to the store and when the store data changes the view behind the grid will automatically refresh.
I got this solved by following some of DmitryB's advice. I inherited this code and after some massaging I got it working as intended. Below is my final solution. In the handler function on the button you need to be sure and update the URL of the proxy defined in the store so that when you call store.load() it's correct.
Ext.require([
'Ext.form.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.dd.*'
//'extjs.SlidingPager'
]);
/*Setup Data Model*/
Ext.define('job',{
extend:'Ext.data.Model',
fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})
Ext.onReady(function(){
var formPanel = new Ext.widget('form', {
renderTo: 'search',
frame: true,
width: 350,
bodyPadding: 5,
bodyBorder: false,
title: 'Search',
defaults: {
anchor: '100%'
},
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'none'
},
items: [{
xtype: 'textfield',
name: 'jobnumber',
fieldLabel: 'Job Number',
allowBlank: true,
minLength: 7,
maxLength: 7
}, {
xtype: 'textfield',
name: 'accountnumber',
fieldLabel: 'Account Number',
allowBlank: true,
minLength: 6,
maxLength: 7
}, {
xtype: 'textfield',
name: 'customername',
fieldLabel: 'Customer Name',
allowBlank: true,
}, {
xtype: 'combo',
name: 'jobyear',
fieldLabel: 'Job Year',
store:
new Ext.data.SimpleStore({
fields: ['year'],
data: [
['2008'],['2009'],['2010'],['2011'],['2012']
] //end of data
}),
displayField: 'year',
typeAhead: true,
emptyText: 'Select a year'
}], //end of items
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'button',
formBind: true,
id: 'search',
disabled: true,
text: 'Search',
width: 140,
height: 35,
handler: function() {
store.proxy.url = '/search?' + formPanel.getForm().getValues(true)
store.load();
} // end button handler
}] //end items
}] // end dockeditems
});
var store = new Ext.data.Store({
model:'job',
pageSize:10,
autoLoad: false,
remoteSort:true,
proxy:{
type:'ajax',
fields:['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
url: '',
reader:{
totalProperty:'totalCount',
type: 'json',
root: 'results'
},
actionMethods: 'POST'
},
sorters:[{
property:'version',
direction:'ASC'
}]
});
var columns = [
{xtype: 'rownumberer',sortable: true},
{text: 'School Name', sortable:true,dataIndex:'account_name'},
{text: 'Acct Number', sortable:true,dataIndex:'account_number'},
{text: 'Job Number',sortable:true,dataIndex:'job_number'},
{text: 'Version',sortable:true,dataIndex:'version'},
{text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
{text: 'Program', sortable:true,dataIndex:'program'},
{text: 'Job Type', sortable:true,dataIndex:'type'}
]; // end columns
var userGrid = new Ext.grid.Panel({
id: 'userGrid',
multiSelect: false,
store: store,
columns: columns,
stripeRows: true,
title: 'Results',
renderTo: 'results',
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
})
});

EXTJS : TreePanel click for set item change

Hi everybody
I'm a beggining with extjs and I have issue with change / set a item to a layout when i click on one of my node .
Here my contentPanel :
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: layoutExamples // HERE I WANT TO CHANGE DYNAMIC
};
My "listener" on my treenode :
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
//Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel'); <== It's work.
Ext.getCmp('content-panel').setActive(formPanel); // HERE I TRY TO CHANGE ITEM ON CLICK AND SET FORMPANEL
});
My item for test :
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field',
value: 'Text field value'
}, {
xtype: 'textfield',
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
xtype: 'filefield',
name: 'file1',
fieldLabel: 'File upload'
}, {
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
} }]
});
So, my objective is to change item of my content panel when i click on a node.. !
Thanks a lot for your helps buddies !
try that and tell me in the comments:
var formPanel = Ext.create('Ext.form.Panel',
{
'id': 'form-panel-1', // or what you want to give
// and all the properties you already defined
}
);
And in your event, based on http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card-method-setActiveItem :
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').getLayout().setActiveItem(Ext.getCmp('form-panel-1'));
}
});
By the way, in the code you provided, there is an error in the listener, it misses a } for closing the if!

Resources