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.
Related
I have a form panel..in which I am trying to add an image...the image block appears but the image is not getting loaded..resizing the image block works fine..Here is my code which I am calling from a html file.. Can someone help me with this??
Ext.application({
name : 'hello',
launch : function() {
Ext.create('Ext.form.Panel', {
title : 'Create Catalog',
defaultType : 'textfield',
items : [ {
fieldLabel : 'Name',
name : 'name',
anchor : '100%',
allowBlank : false
},{
xtype : 'imagefield',
fieldLabel : 'Image Here',
src : 'i1.jpg',
width : 50,
height : 25
}
],
renderTo : Ext.getBody()
});
}
});
It works now...xtype should be image.
{
xtype: 'image',
fieldLabel: 'Image Here',
src: 'i2.png',
width: 50,
height: 50
}
Have a form where I have two group boxes with two combo boxes each. The first group box is for a deposit payment and the second is for the final payment. The first combo box in each group box is to make the payment a request and the second is to make the payment mandatory. But you cannot make the deposit payment and required payments both set to mandatory.
Therefore, I have been trying to use VTypes to check and compare the two required combo boxes and put out a message if they are both set to YES. I'm unable to get the contents of the other combo box using field,up('form').down('#' + field.pmtField); (where pmtField is defined in the item.)
Here is the code:
(Ext.myapplication extends Ext.grid.Panel)
var form=new Ext.myapplication(
{
layout : {type: 'vbox', align: 'stretch'},
border : false,
items:
[
{
xtype: 'fieldset',
title: 'Deposit Requirements',
items:
[
{
xtype : 'fieldcontainer',
layout:{type: 'hbox'},
border: 0,
items:
[
{
xtype : 'combobox',
name : 'deposit_request_flag',
labelAlign : 'top',
inputWidth : 30,
fieldLabel : 'Requested',
labelStyle : 'font-weight:bold',
valueField : 'deposit_request_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
},
{
xtype : 'combobox',
name : 'deposit_required_flag',
labelAlign : 'top',
inputWidth : 30,
fieldLabel : 'Required',
labelStyle : 'font-weight:bold',
valueField : 'deposit_required_flag',
editable : false,
vtype : 'depositFlagCheck',
pmtField : 'payment_required_flag',
value : 'f',
store : [['t','YES'],['f','NO']]
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Payment Requirements',
items:
[
{
xtype : 'fieldcontainer',
layout:{type: 'hbox'},
border: 0,
items:
[
{
xtype : 'combobox',
name : 'payment_request_flag',
labelAlign : 'top',
fieldLabel : 'Requested',
labelStyle : 'font-weight:bold',
valueField : 'payment_request_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
},
{
xtype : 'combobox',
name : 'payment_required_flag',
labelAlign : 'top',
fieldLabel : 'Required',
labelStyle : 'font-weight:bold',
valueField : 'payment_required_flag',
vtype : 'paymentFlagCheck',
depField : 'deposit_required_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
}
]
}
]
}
]
});
Here is the definition of my VTypes:
Ext.QuickTips.init();
Ext.apply(Ext.form.field.VTypes, {
depositFlagCheck : function(val, field) {
var paymentFlag = field.up('form').up('form').down('#' + field.pmtField);
if (val == 'YES') {
if (paymentFlag.getValue() == 't') {
return false;
}
}
return true;
},
depositFlagCheckText : 'You cannot require both dep and full payment amount.',
paymentFlagCheck : function(val, field) {
var depositFlag = field.up('form').down('#' + field.depField);
if (val == 'YES') {
if (depositFlag.getValue() == 't') {
return false;
}
}
return true;
},
paymentFlagCheckText : 'Still cannot do it!'
});
Try following and let me know the result. Here, I added an id both component then try to get component value by getValue() method.
(Ext.myapplication extends Ext.grid.Panel)
var form=new Ext.myapplication(
{
layout : {type: 'vbox', align: 'stretch'},
border : false,
items:
[
{
xtype: 'fieldset',
title: 'Deposit Requirements',
items:
[
{
xtype : 'fieldcontainer',
layout:{type: 'hbox'},
border: 0,
items:
[
{
xtype : 'combobox',
name : 'deposit_request_flag',
labelAlign : 'top',
inputWidth : 30,
fieldLabel : 'Requested',
labelStyle : 'font-weight:bold',
valueField : 'deposit_request_flag',
editable : false,
value : 'f',
id : 'deposit_request_flag',
store : [['t','YES'],['f','NO']]
},
{
xtype : 'combobox',
name : 'deposit_required_flag',
labelAlign : 'top',
inputWidth : 30,
fieldLabel : 'Required',
labelStyle : 'font-weight:bold',
valueField : 'deposit_required_flag',
editable : false,
vtype : 'depositFlagCheck',
pmtField : 'payment_required_flag',
value : 'f',
id : 'deposit_required_flag',
store : [['t','YES'],['f','NO']]
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Payment Requirements',
items:
[
{
xtype : 'fieldcontainer',
layout:{type: 'hbox'},
border: 0,
items:
[
{
xtype : 'combobox',
name : 'payment_request_flag',
labelAlign : 'top',
fieldLabel : 'Requested',
labelStyle : 'font-weight:bold',
valueField : 'payment_request_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
},
{
xtype : 'combobox',
name : 'payment_required_flag',
labelAlign : 'top',
fieldLabel : 'Required',
labelStyle : 'font-weight:bold',
valueField : 'payment_required_flag',
vtype : 'paymentFlagCheck',
depField : 'deposit_required_flag',
editable : false,
value : 'f',
store : [['t','YES'],['f','NO']]
}
]
}
]
}
]
});
Ext.QuickTips.init();
Ext.apply(Ext.form.field.VTypes, {
var depVal = Ext.getCmp('deposit_request_flag').getValue(),
payVal = Ext.getCmp('deposit_required_flag').getValue();
depositFlagCheck : function() {
if (depVal == 'YES' && payVal == 't') {
return false;
}
return true;
}
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();
On clicking an 'add' button my program opens a window but when a closes that window and again click on 'add' button window doesn't show up. Here is my code to show window-
var AddURLWindow = new Ext.Window ({
title : 'XXXX',
width : 550,
border : 'false',
height : 160,
id : 'win',
name : 'win',
bodyStyle : 'background-color:#fff;padding: 5px',
autoScroll : true,
items: [
urlContainer
],
buttonAlign : 'right', // buttons aligned to the right
buttons :[{
text : 'Add URL'
//handler : saveRules
},{
text : 'Cancel',
handler : closeWindow
}] // buttons of the form
});
Code for urlContainer is-
var urlContainer = {
xtype : 'fieldset',
flex : 1,
border : false,
hideBorders : false,
autoHeight : true,
labelWidth : 70,
height : 42,
defaultType : 'field',
defaults : {
anchor : '100%',
allowBlank : false,
border : 'false'
},
items : [
nameTextField
]
};
Code for nameTextField is-
var nameTextField = new Ext.form.TextField({
border : false,
fieldLabel : 'Name',
name : 'first',
// id : 'id-name',
emptyText : 'Entesr URL',
anchor : '100%',
width : '400',
allowBlank : false
});
Any help?
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
});