We Keep Coding

ExtJS: textfield allowBlank with conditions

I have a panel with some textfield and fieldcontainer like this:
Ext.apply(this, {
items: [{
padding: '0 10 5 10',
xtype: 'textfield',
name: 'data',
id: 'data',
alType: 'data',
labelWidth: 130,
fieldLabel: i18n.get('label.data'),
allowBlank: false,
enforceMaxLength: true,
maxLength: 8,
minLength: 1,
allowDecimals: false,
allowExponential: false,
invalidText: i18n.get('error.bad.data'),
maskRe: /[0-9]/
}, {
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
items: [{
padding: '0 10 5 10',
width: 285,
xtype: 'datefield',
name: 'date',
id: 'date',
alType: 'date',
format: 'd/m/Y',
labelWidth: 130,
fieldLabel: i18n.get('label.date'),
allowBlank: false
}, {
xtype: 'timefield',
padding: '0 10 5 15',
width: 230,
name: 'hour',
id: 'hour',
labelWidth: 80,
fieldLabel: i18n.get('label.hour'),
minValue: '00:00',
maxValue: '23:00',
format: 'H:i',
increment: 60,
anchor: '100%',
allowBlank: false
}]
}]
});
this.callParent(arguments);
And I would like to add a condition for allowBlank :
By default all allowBlank are false
if there is a data => allowBlank for date and hour is true
if there are a date and a hour => allowBlank for data is true
How can I do this please ?
Sorry for my bad English.
Thank you

its very simple:
get data in config or init method:
allowBlank:(data.rec.hour)?'true':'false';
this will surely work.
if you want to use it in listeners like change or focus then,
onChangeCheckbox:function(cmp, newValue, oldvalue){ //it is recomended to use allowBlank in listners instead.
var me=this,
form=cmp.up('form'),
field=form.down('#foldername'),
field.allowBlank=!newValue;
//(please set condition accordingly Above.)
},

You can do it like below:-
field.allowBlank = YOUR_DATA.allowBlank; // data => allowBlank
field.validateValue(field.getValue());
Hope this help.

Try this
var yourField = Ext.getCmp('comboBoxID');
if(your_condition == true){
Ext.apply(yourField,{allowBlank:true});
}else {
Ext.apply(yourField,{allowBlank:false});
}

You can achieve this by using the ViewModel.
If you are using a standard MVC (Model View Controller), I will assume that you already know how to use a controller.
In your controller, the moment that you set your data:
Controller code snippet :
me.getViewModel().set('isThereData', data)
me.getViewModel().set('isThereDate', dateAndHour)
Note: It's not necessary to initiate this variables on your ViewModel.
In your View Code snippet:
{
xtype: 'textfield',
fieldLabel: 'data',
bind: {
allowBlank: '{isThereDate}'
}
}, {
xtype: 'textfield',
fieldLabel: 'Date and Hour',
bind: {
allowBlank: '{isThereData}'
}
}
Thru binding, the values you set on your ViewModel will be synchronized with the values on your View.
Extjs automatically translates '{isThereData}' true if it is not empty.

You can use a function like below.
function setAllowBlank(field, allowBlank) {
if (field.allowBlank != allowBlank) {
Ext.apply(field, { allowBlank });
}
}
Usage:
var field = Ext.getCmp('date');
setAllowBlank(field, true);

How to hide choose file button in extJs

We're using an old version of extJS (2.3.0) I'm experiencing some headache with choose file button / Here is my code
var uploadBtn = new Ext.Panel({
tbar : [
{text: 'Upload CSV file', id: 'upload-btnn', handler: uploadHandler} // tbbutton is the default xtype if not specified
]
});
var fileField = new Ext.ux.form.FileUploadField({
fieldLabel: 'File name',
id: 'form-file',
emptyText: 'Select a Document',
name: 'file',
hideButton: true
//buttonText: 'Оберіть файл'
});
var fileUploader = new Ext.FormPanel({
id:'upload-form',
fileUpload: true,
header: false,
hidden: true,
labelWidth: 75,
frame:true,
bodyStyle:'padding:5px 5px 0',
autoWidth: true,
//defaultType: 'textfield',
items: [
fileField
],
buttons: [{
text:'upload',
handler: submitIt
},{
text: 'cancel',
handler: function(){
fileUploader.getForm().reset();
fileUploader.hide();
//$('upload-btnn').show();
//uploadBtn.show();
}
}],
border:false,
scope: this
});
function submitIt(){
fileUploader.getForm().isValid();
fileUploader.getForm().submit({
url: 'links_generation/file_upload',
clientValidation: false,
waitMsg: 'Uploading your Document...',
success: function(fp, o){
//msg('Success', 'Processed file "'+o.result.file+'" on the server');
fileUploader.getForm().reset();
//fileUploadWin.hide();
},
failure: function(a,b) {
fileUploader.getForm().reset();
//fileUploadWin.hide();
}
});
}
function uploadHandler(){
this.hide();
fileUploader.show();
}
It appears two button. I need to influence a choose file button (to style it properly) or to hide Browse button at least. Would be grateful for any advise

I don't see you are using customized 'filefield', so its is better to use it as a self initialized item.
Try this
items: [
{
xtype:'filefield', //change the xtype as per doc
fieldLabel: 'File name',
id: 'form-file',
emptyText: 'Select a Document',
name: 'file',
hideButton: true
}
]

Try this ..
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Upload a file',
emptyText: 'Click here to browse files...',
labelWidth: 100,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: '',
buttonConfig: {
cls: 'browseBtnCls'
}
}]
and add following class in css
.browseBtnCls {padding: 0px !important;background-color: transparent !important; border-color: transparent; width: 0px}
Check this working fiddle.

Reload a ComboBox store on trigger click Extjs 3.4

I'm a beginner on js and ExtJS 3.4, I'm trying to use Ext.form.ComboBoxin a Ext.window to show the list of js objects (layers).
The problem is when I create the window the first time and I click on the combobox trigger I get my layers list correctly, but when I remove or add a layer and I click again on the trigger the store don't update and I find the same list.
Can you please help me to find a solution to this problem, for example when I click on the trigger it will update and load the new list store ?
Any suggestion is welcome.
CODE SNIPPET
// The "ImageField" is an item witch is called on the return of the methode "createWindow" ...
createWindow: function() {
ImageField = new Ext.form.ComboBox(Ext.apply({
name: "Image_ref",
fieldLabel: "Image Input (Required)",
emptyText: "Select your Image",
xtype: 'combo',
forceSelection: true,
editable: true,
allowBlank: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text',
labelWidth: 300
width: 250,
id: 'myCombo',
hideLabel: false,
lazyRender: false,
lazyInit: false,
mode: 'local',
triggerAction: 'all',
store: new Ext.data.SimpleStore({
autoLoad: true,
autoDestroy: true,
fields: ['text', 'value'],
data: layer_liste_WCS // is a liste of js objects
}),
listeners: {
beforequery: function(qe) {
// console.log(qe);
qe.cancel = true;
addComboxFieldItemsWCS(); // Run this methode to get "layer_liste_WCS" witch is liste of data
var actionComboBox = Ext.getCmp('myCombo');
.
.
.
.
.
.
// I don't know how to do to reload the store after runing the methode "addComboxFieldItemsWCS"
}
}
}, base));
return new Ext.Window({
closable: true,
resizable: false,
shadow: false,
closeAction: 'hide',
region: "center", //"north","south","east","west"
width: 480,
height: 190,
iconCls: 'wind_icon',
plain: true,
layout: 'border',
buttonAlign: 'right',
layout: 'fit',
listeners: {
show: function() {
this.el.setStyle('left', '');
this.el.setStyle('top', '');
}
},
items: [{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
width: 50,
height: 20,
items: [{ // we will declare 3 tabs
title: 'Datas Inputs',
closable: false,
iconCls: 'input_icon',
active: true,
items: [{
xtype: 'form',
autoWidth: true,
labelWidth: 185,
bodyStyle: "padding:10px;",
items: [
ImageField,
]
}]
}]
}],
});
},

I'm late for the answer but I take a chance.
Do you have an ajax call in addComboxFieldItemsWCS?
Put this code on your callback if you can:
Ext.getCmp('myCombo').getStore().loadData(layer_liste_WCS, false);
For your information, The false parameter is to replace existing data.
Hope this help.

ExtJs filefield dissappears after first use

I'm trying to use the ExtJs filefield control to upload a file.
I use it as follows:
xtype: 'container',
margin: '15 0 0 25',
layout: 'vbox',
defaults: {
width: 400
},
items: [{
xtype: 'filefield',
itemId: 'fileChooser',
fieldLabel: 'CSV file',
labelWidth: 50,
buttonText: 'Select CSV file...'
}]
But, after I use it to choose a file (which I manage to do correctly), The fieldfile dissappears!
Did someone have the same problem?

Please try it in this way
{
xtype: 'form',
type: 'fileUploadForm',
items: [{
xtype: 'filefield',
cls:'upload-btn',
height:40,
type:'uploadButton',
name: 'file',
buttonText:'Upload New Version',
listeners: {
scope: this,
change: this.handleIconChange
}
}]
}

Reset does not work a form in Sencha Touch

All I want to do is when I click the reset button on my form it resets all fields. And I have tried everything but it does not seem to work. Here is the class that has the button in it:
App.views.HomeIndex = Ext.extend(Ext.form.FormPanel,{
floating: true,
scroll: 'vertical',
itemId: 'jobSearch',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [{
xtype: 'textfield',
itemId: 'keywords',
label: 'Keywords',
labelAlign: 'top',
labelWidth: '100%',
name: 'keywords'
},{
xtype: 'textfield',
label: 'Job Title',
itemId: 'jtitle',
labelAlign: 'top',
labelWidth: '100%',
name: 'jtitle'
},{
.... //more xtypes here
,
dockedItems: [{
xtype: 'toolbar',
itemId: 'toolbar',
dock: 'bottom',
height: '36',
items: [
{ xtype: 'button', text: 'Reset',itemId: 'resetBtn',
},
{ xtype: 'spacer'},
{ xtype: 'button', text: 'Submit',itemId:'submitBtn',ui: 'action',
}
]
}]
In my App.js I have the code to handle the reset method:
//this is one way I thought of doing it. But obviously it does not work. I have tried googling all over but couldnt find a solution.
this.homeView.query('#resetBtn')[0].setHandler(function(){
var form = this.el.up('.x-panel');
//form.down('.x-input-text[name=keywords]').setValue(' ');
form.query('#jobSearch').getComponent('keywords').reset();
});
});
Ext.reg('HomeIndex', App.views.HomeIndex);

Your form's ID is "jobSearch", the name is "keyboards". You're trying to combine both.
Try:
form.query('#jobSearch').reset();
or:
document.forms['keywords'].reset();

Try this. It's a bit more ExtJS like.
var form = Ext.ComponentQuery.query('#jobSearch .form')[0];
form.reset();