Related
My issue is that in change event of FTPSettingHost, markInvalid is not marking the field invalid : what I mean by invalid, the field is highlighted with red zigzag.
I'm getting empty fields each time the field is change(change event) and mark them invalid.
Is it possible to make a validator for that? and how? When a validator is called?
Here is the panel :
Ext.define("Backend.project.FtpPanel", {
xtype : "ftpPanel",
extend : "Ext.form.Panel",
border : 0,
id : 'ftpForm',
layout : 'anchor',
defaults : {
labelStyle : "font-weight: font-size: 11px",
fieldStyle : "font-size: 12px;",
anchor : "100%",
labelWidth : 180
},
initComponent : function () {
var me = this;
var ftpFields = [{
id : 'FTPSettingsHost',
label : LocalizationUtils.getMessage("FTPHost")
}, {
id : 'FTPSettingsPath',
label : LocalizationUtils.getMessage("FTPPath")
}, {
id : 'FTPSettingsUsername',
label : LocalizationUtils.getMessage("FTPUsername")
}, {
id : 'FTPSettingsPassword',
label : LocalizationUtils.getMessage("FTPPassword")
}
];
this.FTPSettingsHost = new Ext.form.field.Text({
fieldLabel : LocalizationUtils.getMessage("FTPHost"),
anchor : "100%",
id : "FTPSettingsHost",
name : "FTPSettingsHost",
xtype : 'textfield',
allowOnlyWhitespace : false,
//validator : FormUtils.getAllFieldsNonEmptyValidator("FTPSettingsPath", ftpFields)
listeners : {
change : {
fn : function (cmp) {
// Get empty fields
var fields = FormUtils.getEmptyFields(me);
var labels = [];
for (var i = 0; i < fields.length; i++) {
//console.log(fields[i]);
labels[i] = fields[i].getFieldLabel();
}
var message = LocalizationUtils.getMessage("AllTheseFieldsRequired", [labels.join(", ")]);
for (var i = 0; i < fields.length; i++) {
fields[i].clearInvalid();
fields[i].markInvalid(message);
}
}
}
}
});
this.FTPSettingsPath = new Ext.form.field.Text({
fieldLabel : LocalizationUtils.getMessage("FTPPath"),
anchor : "100%",
id : "FTPSettingsPath",
name : "FTPSettingsPath",
xtype : 'textfield',
allowOnlyWhitespace : false,
});
this.FTPSettingsUsername = new Ext.form.field.Text({
fieldLabel : LocalizationUtils.getMessage("FTPUsername"),
anchor : "100%",
id : "FTPSettingsUsername",
name : "FTPSettingsUsername",
xtype : 'textfield',
allowOnlyWhitespace : false,
});
this.FTPSettingsPassword = new Ext.form.field.Text({
fieldLabel : LocalizationUtils.getMessage("FTPPassword"),
anchor : "100%",
id : "FTPSettingsPassword",
name : "FTPSettingsPassword",
xtype : 'textfield',
allowOnlyWhitespace : false,
});
Ext.apply(this, {
items : [me.FTPSettingsHost, me.FTPSettingsPath, me.FTPSettingsUsername, me.FTPSettingsPassword]
});
this.callParent(this);
}
})
Thank you all for the help !
I looked through your fiddle and here is my version: http://jsfiddle.net/Jandalf/UehL7/22/
Ext.define("Backend.project.FtpPanel", {
xtype: "ftpPanel",
extend: "Ext.form.Panel",
border: 1,
id: 'ftpForm',
height: 200,
width: 500,
renderTo: Ext.getBody(),
layout: 'anchor',
bodyPadding: 10,
fieldDefaults: {
allowBlank: false,
labelStyle: "font-weight: bold; font-size: 11px",
fieldStyle: "font-size: 12px;",
anchor: "100%",
labelWidth: 180
},
items: [{
fieldLabel: "FTPHost",
id: "FTPSettingsHost",
name: "FTPSettingsHost",
xtype: 'textfield'
},{
fieldLabel: "FTPPath",
id: "FTPSettingsPath",
name: "FTPSettingsPath",
xtype: 'textfield'
},{
fieldLabel: "FTPUsername",
id: "FTPSettingsUsername",
name: "FTPSettingsUsername",
xtype: 'textfield'
},{
fieldLabel: "FTPPassword",
id: "FTPSettingsPassword",
name: "FTPSettingsPassword",
xtype: 'textfield'
}]
});
Is this what you want or do you really need to mark all fields invalid at once?
Using ExtJS 4.2.2
I have a grid, and when I right click the grid and select Modify from my context menu, a Window with a form is created, and on render, I get the grid selected row record and use the form loadRecord to load the record.
Firebug shows the record was loaded into the form fields, but in the rendered form the fields are enpty.
Any ideas?
Here is some code that illustrates the issue.
If you put a breakpoint at the line with var test = 'test'; you will see the data is loaded into the form's textfields, but then continue past the break point and see the textfields do not reflect the data.
Ext.onReady(function() {
Ext.define('com.myCompany.MyGridModel', {
extend : 'Ext.data.Model',
fields : [{
name : 'name',
type : 'string'
}, {
name : 'address',
type : 'string'
}, {
name : 'type',
type : 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'com.myCompany.MyGridModel',
proxy: {
type: 'ajax',
url: 'centers.json',
reader: {
type: 'json',
root: 'centers'
}
}
});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
layout: 'fit',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
name: 'name'
}, {
text: 'IP Address',
dataIndex: 'address',
name: 'address'
}, {
text: 'Type',
dataIndex: 'type',
name: 'type'
}],
renderTo: Ext.getBody(),
listeners: {
itemcontextmenu : function(view, record, item, index, event){
var selectedItem = record;
event.preventDefault();
new Ext.menu.Menu({
items: [{
text : 'Modify',
handler : function(widget, event) {
Ext.create('Ext.window.Window', {
height : 380,
width : 540,
resizable : false,
closable: true,
modal: true,
layout :{
type : 'fit'
},
items : [{
xtype : 'form',
frame : true,
height : 250,
itemId : 'centerContentForm',
width : 400,
bodyPadding : 10,
items : [{
xtype : 'textfield',
itemId : 'txtName',
height : 30,
width : 401,
fieldLabel : 'Name',
name: 'name',
allowBlank : false
},{
xtype : 'textfield',
itemId : 'txtIPAddress',
height : 30,
width : 401,
fieldLabel : 'Address',
name: 'address',
allowBlank : false,
},{
xtype : 'textfield',
itemId : 'txtType',
height : 30,
width : 401,
fieldLabel : 'Type',
name: 'type',
allowBlank : false
}]
}],
listeners: {
render: function(win) {
win.down('form').loadRecord(selectedItem);
var test = 'test';
}
}
}).show();
} // end of right-click handler
}]
}).showAt(event.getXY());
}
}
});
grid.getView().refresh();
});
Instead of render event handler you should use afterrender event handler.
So your window listeners config should be:
listeners: {
afterrender: function(win) {
win.down('form').loadRecord(selectedItem);
}
}
I am using ExtJS 3.4 and I want to use fileupload in my application. My code and fileupload field screen shot are shown below. There is a problem about showing fileupload field, I couldn't solve this error. Anyone can help?
var uploadFormPanel = new Ext.FormPanel({
fileUpload : true,
autoHeight : true,
height : 200,
bodyStyle : 'padding: 10px 10px 0 10px;',
labelWidth : 50,
defaults : {
anchor : '95%',
allowBlank : false,
msgTarget : 'side'
},
items: [
{
xtype : 'combo',
fields : ['id','name'],
name : 'fuelCompany',
store : comboStore,
valueField : 'id',
displayField : 'name',
submitValue : true,
typeAhead : true,
triggerAction : 'all',
selectOnFocus : true,
allowBlank : false,
mode : 'remote',
anchor : '95%'
},{
xtype : 'fileuploadfield',
id : 'form-file',
name : 'file',
buttonText : 'select file',
buttonCfg : {
iconCls : 'upload-icon'
}
}
]
});
It's a little tricky, but I think I figured out how to get the button showing the text:
//...
{
xtype : 'fileuploadfield',
id : 'form-file',
name : 'file',
buttonCfg : {
text : 'select file'
}
}
//...
You need to place the button text in the buttonCfg for the button to size correctly. The only drawback is that you can't add an iconCls to the button if you want it to automatically resize. As an alternative, you could use a little workaround:
//...
{
xtype : 'fileuploadfield',
id : 'form-file',
name : 'file',
buttonCfg : {
// The text cfg takes html too
text : '<div class="upload-icon"' +
' style="width: 15px; height: 15px; display: inline-block;' +
' margin: 0 5px;"></div>' +
'select file'
}
}
//...
It can not reach css file, I put css style in jsp file where my javascript code defined my problem solved.
I am new to ext js. And my requirement is OnClick of a button, it calls a js function which pops up a window.Within this window I have a formPanel and a grid embedded in it. In the window items properties, if I add grid, the window is not showing. If I keep only form variable, then the window is displayed.
items : [filterPIDForm,pidGrid] is not working whereas
items: [filterPIDForm] is working fine.
Below is the code snippet
<script type="text/javascript">
jQuery(document).ready(function(){
// eCube search
jQuery('#eCubeSearch').click(function(){
pidSearch();
});
});
function pidSearch()
{
var filterPIDForm = new Ext.form.FormPanel({
title : 'Job Filters',
floatable : false,
id : 'filterForm',
tabTip : 'woot',
labelAlign :'top',
region :'west',
collapsible : true,
bodyStyle : 'padding: 5px; background-color: #DFE8F6',
border : false,
// style : 'border-top: 1px solid #99BBE8;',
width : 220,
items : [
{
xtype : 'combo',
width : 200,
id :'emailCombo',
fieldLabel :'Filter by Owner',
valueField :'emailValue',
displayField :'emailDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
},
{
xtype : 'combo',
width : 200,
id :'statusCombo',
fieldLabel :'Filter by Status',
valueField :'statusValue',
displayField :'statusDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
//value :'ALL'
},
{
xtype : 'textfield',
fieldLabel : 'PID/Description Search',
width : 200,
id :'searchText'
}
],
buttons: [
{
text : 'Clear Filter(s)',
id : 'clear'
},
{
text : 'Apply Filter(s)',
id : 'apply'
}
]
});
var pidGrid = new Ext.grid.GridPanel({
title : 'Job List',
id : 'pidList',
columns: [
//new Ext.grid.RowNumberer(),
{
header : 'PID',
width : 70,
dataIndex : 'pid',
sortable : true
},
{
header : 'Description',
id : 'description',
dataIndex : 'description',
sortable : true
}
]
});
var win = new Ext.Window({
modal:true,
title: 'PID Search',
layout:'absolute',
id: 'eCubeSearchWin',
width:1000,
height:400,
resizable: false,
plain: false,
resizable: false,
border: true,
closeAction :'close',
items : [filterPIDForm,pidGrid],
//items : [filterPIDForm],
buttons : [
{
text : 'OK',
id : 'test'
},
{
text : 'Close',
handler : function(){
Ext.getCmp('eCubeSearchWin').close();
}
}
]
});
win.show();
}
</script>
try setting layout in window
var win = new Ext.Window({
renderTo : Ext.getBody(),
width : 500,
height : 500,
layout : 'border',
items : [{
items : filterPIDForm
,layout :'fit'
,region : 'north'
,height : 300
},{
items : pidGrid
,layout :'fit'
,region :'center'
}]
}).show();
I have this code. If i click on button my form parameters are inserting into database. How i can do it?? what i should write there?
And if i click on reset form, my window closing. Please help! Thank you!
var AddQuestion = new Ext.Button({
method : 'POST',
url : '/questions/create',
tooltip : 'Add Question',
icon : '/images/icons/silk/add.png',
iconCls : 'add',
style : 'margin-right: 60px;float:right;',
handler : function() {
new Ext.Window({
title : 'Add Question',
width : 700,
height : 800,
bodyStyle : 'padding: 10px',
layout : 'form',
modal : true,
closable : true,
resizable : false,
draggable : false,
autowidth : true,
items :[
{
fieldLabel : 'Question',
name : 'question[text]',
xtype : 'htmleditor',
enableFont : false,
enableFormat : false,
enableFontSize : false,
enableLists : false,
enableAlignments: false,
enableFont : false,
enableColors : false,
height : 160,
width : 560
},
{
name :'form_type',
fieldLabel :'Form Type',
xtype :'combo',
triggerAction :'all',
mode :'local',
editable : false,
allowBlank : false,
emptyText :'You should Choose any...',
store :new Ext.data.SimpleStore({
fields :['mode', 'name'],
data :[
['1', 'TextArea Question'],
['2', 'Scale Question'],
['3', 'TextArea + Scale Question']
]
}),
displayField :'name',
valueField :'mode',
hiddenName :'form_type'
},
{
xtype : 'itemselector',
name : 'selected_respondents',
imagePath : '../ux/images/',
bodyStyle : 'background:#DFE8F6',
multiselects: [{
legend : 'All Respondents',
width : 270,
height : 350,
store : st,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
},{
legend : 'Selected Respondents',
width : 270,
height : 350,
store : st2,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
}]
},
{
fieldLabel :'To do',
xtype : 'button',
text : 'Refresh respondents ↑',
height : 30,
icon : '/images/icons/silk/arrow_refresh_small.png',
width : 180,
handler: function(){
if((who_is_admin == '1') || (who_is_admin == '0')){
if (st2.getCount() == 0){
st.reload();
}else
{
Ext.Msg.show({
title : 'Message for You',
msg : "You should left <i>'Selected Respondents'</i> field empty to <b>refresh</b> some changes!",
modal : true,
Height : 200,
closable : true,
resizable : false,
draggable : false,
Width : 300,
buttons : Ext.Msg.OK
});
}
}
}
},
{
xtype : 'checkbox',
boxLabel : 'Make Question Active',
inputValue : '1',
name : 'is_active',
hiddenName : 'is_active',
checked : true
},
],
buttons: [{
text: 'Reset Form',
handler: function(){
}
},{
text: 'Submit Form',
handler: function(){
}
}
}] // button end
}).show(); //show window
}
});
You can do this by sending AJAX request as soon as user clicks on button.
For eg in your case handler for 'Submit Form' button should look like
Ext.Ajax.request({
url:'assertion.htm', // url of page where you want to send it
method: 'POST',
params: {
selectedSource:source.getValue() //Right hand side whatever value you want to send
},
scope:this
});