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?
Related
How should I customize to change how many rows of the columnmodel table gets displayed in my web app before the table scrolls
new Ext.Panel({
items : [{
xtype : 'panel',
id : 'abc',
height : 250,
autoScroll : false,
frame : false,
items : [{
xtype : 'editorgrid',
id : 'abc-grid',
store : abc.Store,
cm : abc.Col,
sm : new Ext.grid.RowSelectionModel(),
height : 100,
frame : false,
clicksToEdit : 2,
stripeRows : true,
view: gridView,
viewConfig : {
headersDisabled : true
},
listeners : {
}
}]
}]
});
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();
Problem
Hello the inconvenient is that when I load my application the handler is automatically executing, this is the code of the grid:
Ext.define('masterDataGrid', {
extend : 'Ext.grid.Panel',
windowItems : null,
addWin : null,
initComponent : function() {
var me = this;
Ext.applyIf(me, {
tbar : [{
text : 'Add',
handler :me.onAdd,
scope : me
}, '-', {
text : 'Delete',
handler : me.onDelete,
scope : me
}, '-']
});
me.callParent(arguments);
},
getAddWindow : function() {
if (!this.addWin) {
this.addWin = new windowPop({
buttons : [{
text : 'i_OK',
handler : this.winOk()
}, {
text : 'i_Cancel',
handler : this.winCancel()
}]
});
this.addWin.add(this.windowItems);
}
return this.addWin;
},
onAdd : function() {
var addWindow = this.getAddWindow();
addWindow.show();
},
});
And I'm calling this mastergrid form another class that extends from it, this is the code:
Ext.define('confEmailEmail', {
extend : 'masterDataGrid',
initComponent : function() {
var me = this;
me.columns = [{
id : 'code',
header : 'code',
dataIndex : 'code',
width : 220
}, {
header : 'description',
dataIndex : 'description',
width : 130
}, {
header : 'multiply',
dataIndex : 'multiply',
width : 70,
align : 'right'
}, {
header : 'cyrcletime',
dataIndex : 'cycletime',
width : 95
}];
me.windowItems = [{
xtype : 'combobox',
id : 'cb_input',
fieldLabel : 'i_Input',
margin : '5 0 0 5',
style : 'font-weight:bold',
labelWidth : 120
}, {
xtype : 'checkbox',
id : 'chk_invert',
fieldLabel : 'i_Invert',
margin : '5 0 0 5',
style : 'font-weight:bold',
labelWidth : 120
}, {
xtype : 'combobox',
id : 'cb_activeBy',
fieldLabel : 'i_Active by',
margin : '5 0 0 5',
style : 'font-weight:bold',
labelWidth : 120
}];
me.callParent(arguments);
}
});
it supposed to open the window to add a new row when I click on the add button but it is showing every time I execute the whole application.
Thanks for any help.
I got it, it is because onAdd is a method for Ext.grid.Panel, then when it is trying to load the application it access to my method onAdd because he thinks that I had overwrote the method onAdd of Ext.grid.Panel.
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
});