Can I render a Ext.FormPanel to a new Ext.window? - extjs

I want to popup a window to interact with people who want to upload a file to server. I want to render a file input form in the new window, but I can't make it run by doing follows:
var win = new Ext.Window();
var fp = new Ext.FormPanel({
renderTo: win,//I just guess that I can render this to the window I created...
fileUpload: true,
width: 500,
frame: true,
title: 'File Upload Form',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Name'
},{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'photo-path',
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
}
}],
buttons: [{
text: 'Save',
handler: function(){
if(fp.getForm().isValid()){
fp.getForm().submit({
url: 'file-upload.php',
waitMsg: 'Uploading your photo...',
success: function(fp, o){
msg('Success', 'Processed file "'+o.result.file+'" on the server');
}
});
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
win.show();

As per the Ext JS documentation about the renderTo() method:
"Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items."
So what you need to do is:
Create the formPanel without the renderTo option
Create your window and specify the formPanel as an item of the window.
var win = new Ext.Window({
//You can specify other properties like height, width etc here as well
items: [fp]
});
You can refer to a working fiddle on this link:
http://jsfiddle.net/prashant_11235/2tgAQ/

Related

Window is not closing properly second time

I want to open a new window on click of button. On cclick on button window is opening and closing fine but second time it is not closing properly.
Here is my code
var formPanel = new Ext.FormPanel({
height: 125,
autoScroll: true,
id: 'formpanel',
defaultType: 'field',
frame: true,
title: 'CheckOut from SVN',
items: [{
fieldLabel: 'SVN Path'
}],
buttons: [{
text: 'Submit',
minWidth: 75,
handler: function() {
var urlTemp = './Export?' + '&' + fp.getForm().getValues(true);
formPanel.getForm().submit({
url: urlTemp,
method: 'Post',
success: successFn1,
timeout: 18000000,
failure: otherFn
});
}
}, {
text: 'Reset',
minWidth: 75,
handler: function() {
formPanel.getForm().reset();
}
}]
});
function buildWindow() {
var win = new Ext.Window({
id: 'newWindow',
layout: 'fit',
width: 300,
height: 200,
closeAction: 'hide',
plain: true,
stateful: false,
items: [formPanel]
});
win.show();
}
var extSVN = new Ext.Button({
text: 'Checkout from SVN',
minWidth: 75,
handler: function() {
buildWindow();
}
});
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
items: [extSVN]
});
you are using closeAction: 'hide' on your window which mean that when you close it it will not be destroyed but hidden.
The problem is that when you reopen the window you create a new one so your formPanel ends up in 2 different windows which causes the error.
You can :
remove the closeAction: 'hide', but your formPanel will also be
destroy when you close the window, so you'll have to recreate
another too
or keep the closeAction: 'hide' and only create the
windows one time
You have provided id to your form and window. And inside window you have set config closeAction: 'hide' that means whenever your press close button window is hiding.
And on again on-click of Checkout from SVN button you creating a same window and form with same id's so instead of creating of new window you can use previous window and show again.
In this FIDDLE, I have created a demo using your code and put some modifications.
CODE SNIPPET
Ext.onReady(function () {
var formPanel = new Ext.FormPanel({
height: 125,
autoScroll: true,
id: 'formpanel',
defaultType: 'field',
frame: true,
title: 'CheckOut from SVN',
items: [{
fieldLabel: 'SVN Path'
}],
buttons: [{
text: 'Submit',
minWidth: 75,
handler: function () {
var urlTemp = './Export?' + '&' + fp.getForm().getValues(true);
formPanel.getForm().submit({
url: urlTemp,
method: 'Post',
success: successFn1,
timeout: 18000000,
failure: otherFn
});
}
}, {
text: 'Reset',
minWidth: 75,
handler: function () {
formPanel.getForm().reset();
}
}]
});
function buildWindow(btn) {
if (!btn.win) {
btn.win = new Ext.Window({
layout: 'fit',
id: 'newWindow',
modal: true,
width: 300,
height: 200,
closeAction: 'hide',
plain: true,
stateful: false,
items: [formPanel]
});
}
btn.win.show();
}
var extSVN = new Ext.Button({
text: 'Checkout from SVN',
minWidth: 75,
handler: buildWindow
});
new Ext.Panel({
title: 'SVN Chekcout',
renderTo: Ext.getBody(),
width: 200,
height: 130,
items: [extSVN],
renderTo: Ext.getBody()
});
});

How to solve multiple occuring text fields in ext js3?

I have a tab panel.I open a tab and a grid is shown. Then i double click a row and a window is opened. In this window i have a panel and in this panel i have 4 textfields.
Then i close window, and double click another row, window is opened and fields that in panel shown correctly like below.
label label label label
|_______| |______| |______| |______|
When i close tab and opened it again and click row to open window, window is opened but in my panel's items shown three times. I mean it looks like below :
label label label label
label label label label
label label label label
And every click rows it is increasing...
My window is ;
var win = new Ext.Window({
width: 680,
height: 250,
title: 'Details',
layout: 'border',
modal: true,
closeAction:'hide',
items: [top,grid]
});
and my panel (name is top)
var top = new Ext.FormPanel({
labelAlign: 'top',
region : 'north',
frame:true,
bodyStyle:'padding:5px 5px 0',
width: 680,
height:75,
items: [{
layout:'column',
items:[{
columnWidth:.25,
layout: 'form',
items: [{
xtype:'textfield',
id : 'date',
fieldLabel: '<font color="red" style="margin-left: 25px" ><b>date</b></font>',
labelSeparator: '',
style: 'text-align: center;',
width:120
}]
},{
columnWidth:.25,
layout: 'form',
items: [{
id : 'xxx',
xtype:'textfield',
fieldLabel: '<font color="red"style="margin-left: 25px" ><b>xxxx</b></font>',
labelSeparator: '',
style: 'text-align: center;',
width:120
}]
},{
columnWidth:.25,
layout: 'form',
items: [{
id : 'cost',
xtype:'textfield',
fieldLabel: '<font color="red"style="margin-left: 4px" ><b>cost</b></font>',
labelSeparator: '',
style: 'text-align: right;',
width:120
}]
},{
columnWidth:.25,
layout: 'form',
items: [{
id : 'price',
xtype:'textfield',
fieldLabel: '<font color="red"style="margin-left: 15px" ><b>price</b></font>',
labelSeparator: '',
style: 'text-align: right;',
width:120
}]
}]
}]
});
I try to change window's closeAction config 'hide' to 'destroy', but this time i can not open window second time if i don't close the tab.
How can i fix this problem.
Thank you very much.
var grid = new Ext.grid.GridPanel({
stripeRows: true,
frame: false,
border:false,
autoScroll: true,
loadMask: {msg : 'loading...'},
trackMouseOver:false,
store: store,
bbar: paging,
region:'center',
cm: cm,
sm: sm,
viewConfig: {enableRowBody:true,emptyText: 'empty...'},
listeners: {
celldblclick: function(){
showDetail();
}
}
});
and showDetail function is ;
var showDetail = function(){
store.baseParams = {
Id : sm.getSelected().data['ID']
};
store.load();
win.show();
var d =sm.getSelected().data['date'];
Ext.getCmp("xxx").setValue(sm.getSelected().data['xxx']);
Ext.getCmp("date").setValue(d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear());
Ext.getCmp("cost").setValue((sm.getSelected().data['cost']));
Ext.getCmp("price").setValue((sm.getSelected().data['price']));
};
You need to create the window on every call and destroy when close
function createWindow(){
return new Ext.Window({
width: 680,
height: 250,
title: 'Details',
layout: 'border',
modal: true,
closeAction:'destroy',
items: [top,grid]
});
}
And then call the createWindow
var showDetail = function(){
store.baseParams = {
Id : sm.getSelected().data['ID']
};
store.load();
var win = createWindow();
win.show();
var d =sm.getSelected().data['date'];
Ext.getCmp("xxx").setValue(sm.getSelected().data['xxx']);
Ext.getCmp("date").setValue(d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear());
Ext.getCmp("cost").setValue((sm.getSelected().data['cost']));
Ext.getCmp("price").setValue((sm.getSelected().data['price']));
};

how set selected row in checkbox grid panel extjs depends textfield value

i have a grid panel and i want checked the row same as the value of text field.
anyone can help me.?
this is my code:
var check = new Ext.selection.CheckboxModel({
checkOnly : true,
listeners: {
change: function(checkbox, value) {
}
}
});
Ext.create('Ext.form.Panel', {
renderTo: "example-grid",
bodyStyle: 'padding: 5px 5px 0 5px;',
items: [
{
xtype: 'textfield',
fieldLabel: 'Group Fields ',
value:'a',
readOnly: true,
inputId: 'group'
}]
});
var grid1 = Ext.create('Ext.grid.Panel', {
title: 'Group Fields',
id:'gridPanel',
selModel: check,
store: Ext.data.StoreManager.lookup('tes'),
columns: [{
text: 'Field',
dataIndex: 'field',
flex: 1
}],
viewConfig: {
markDirty: false
},
height: 200,
width: 200
});
my fiddle example:
http://jsfiddle.net/y0uzha/f73kx37e/1/
Looks like you just need one-way binding so I would suggest to apply a selectionchange listener to the selectionModel to set the value of the groupField. See grid1#listeners#viewready. Note: I added an id to the form panel so that you can get a handle on it.
Generally speaking you should not use the id propery on child components, so they can be reusable. It would be better practice to use a viewport or a global parent container that has an id. Also, it would be best practice to use a controller to wire all this business logic together. Enjoy!
var check = new Ext.selection.CheckboxModel({
checkOnly: true
});
Ext.create('Ext.form.Panel', {
id: 'formPanel',
renderTo: "example-grid",
bodyStyle: 'padding: 5px 5px 0 5px;',
items: [{
itemId: 'groupField',
xtype: 'textfield',
fieldLabel: 'Group Fields ',
readOnly: true,
inputId: 'group'
}]
});
var grid1 = Ext.create('Ext.grid.Panel', {
title: 'Group Fields',
id: 'gridPanel',
selModel: check,
store: Ext.data.StoreManager.lookup('tes'),
columns: [{
text: 'Field',
dataIndex: 'field',
flex: 1
}],
viewConfig: {
markDirty: false
},
listeners: {
viewready: function() {
var selModel = this.getSelectionModel();
//Bind the groupField's value to the selected records
selModel.on('selectionchange', function(selModel, selections, eOpts) {
var groupField = Ext.getCmp('formPanel').queryById('groupField'),
groupValues = Ext.pluck(Ext.pluck(selections, 'data'), 'field');
groupField.setValue(Ext.Array.sort(groupValues).toString());
});
//Initially selects the first item in the grid
selModel.selectRange(0, 0);
}
},
height: 200,
width: 200
});

Calling UserDefined Functions in ExtJs

I am new to ExtJs,i have designed an entry form as follows,
var HouseForm = new Ext.FormPanel({
renderTo: "HouseCreation",
frame: true,
url: url+'/lochweb/loch/house/persist',
title: 'Create House',
bodyStyle: 'padding:5px',
width: 500,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'TaxId',
name: 'taxId',
allowBlank:true
}
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [HouseForm]
});
win.show();
});
I need to validate the user inputs manually,so i need to call my function to validate the user inputs.how to define and call a function and also is there any other layout other than fit?
Thanks
You can simply write your functions/methods in same .js file and call them as usual i.e. () . It will work.
About layouts, there many varieties of layouts available in ExtJS. Here is the link which shows example and minimal code of all the layouts possible in ExtJS.

close extjs window after form submission

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.

Resources