This is one Panel and initially its items will be empty.
var resultArray = [];
this.mainContainer = new Ext.Panel({
border : true,
layout : 'column',
border : 1,
collapsible : true,
title : 'Flaged Questions',
items : [resultArray]
});
return this.mainContainer;
and later in this container i am adding the items in the form of container. Container consist of textfields. and Now on button click i want to get the values of textfields.
this.CenterContainer = new Ext.Container({
layout : 'floating-form',
flex : 1,
border : true,
bodyStyle : 'background:#F2F2F2;',
style : 'padding-top:7px',
items : [ {
xtype : 'textfield',
labelWidth : 45,
fieldLabel : "<span style='padding-left:2px'>" + 'Notes' + "</span>",
name : 'Notes',
readOnly : true,
border : 1,
width : 340,
height : 35
}]
});
this.mainContainer.items.add(this.CenterContainer);
If you give that textfield an itemId then you should be able to get a reference to it like this:
var field = this.mainContainer.down('#MyTextFieldItemId');
See the docs on ComponentQuery if you want to get back more than just one textfield by itemId
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.ComponentQuery
Related
I want to disable a file Upload field dynamically. Like I have a variable say isUploadAllowed. If this variable is true only then FileUpload field is enabled and user can click Browse button.. Else this button is disabled.. How to do it in ExtJs 3.0? I did find few examples but they were all of ExtJs 4.. I have tried:
FileUploadField.setDisabled(true);
but it's not working..
Here is my code, I want to disable it on reset button click!
var fileUploadField = new Ext.ux.form.FileUploadField({
id : 'fileUpload',
name : 'upLoadedFile',
fieldLabel : 'Supporting File(s)',
width : 410,
convertToUpperCase : false,
tabIndex : 9,
allowBlank : true
});
var requestForm = new Ext.form.FormPanel({
id : 'requestForm',
labelAlign : 'right',
labelWidth : 130,
buttonAlign : 'right',
frame : false,
split : false,
fileUpload : true,
autoHeight : true,
collapsible : false,
width : 635,
monitorValid : true,
border : false,
bodyStyle : 'text-align:left;padding:10 10 10 10',
// Layout the form fields here.
items : [{
layout : 'column',
border : false,
items : [{
layout : 'form',
bodyStyle : "text-align:left",
border : false,
items : [fileUploadField]
}],
buttons : [{
id : 'submitBtn',
text : 'Submit',
formBind : true,
handler : doSubmit,
type : 'submit',
scope : this
}, {
text : 'Reset',
formBind : false,
type : 'reset',
handler : function() {
// disable file upload field
}
}]
});
try this:
fileUploadField.disable();
sometimes it works better. Also check letter case
I made a hasty comment before which was deleted. I had the same issue with the upload functionality not being disabled, even though I disabled the field. I realized that was due to Plupload which was enabled on that field, so to disable the upload functionality of the uploader I disabled Plupload:
uploader.disableBrowse(true);
So check if don't have some similar plugin working as well...and disable that as well. Hope that this will help someone...it gave me some headaches.
I am using a grid panel from ExtJS 4.2.1. I have some column definitions with editor : 'textfield' (editable columns) and some without editor (read-only columns).
What I want?
I want to temporarily highlight the editable column with a background color at the on mouse over event to that specific column.
I request for help. Please guide. I have spent lot of time on it and all in vain :(
Regards,
Jagpreet Singh
TASK - When mouse is placed over columns Editable 1 and 2 below (having editor config option), I want the target column to be highlight temporarily with some bright color for few seconds.
Ext.define('XX.view.account.Portfolios', {
extend : 'Ext.grid.Panel',
plugins : {
ptype : 'cellediting',
clicksToEdit : 1
},
columns : [{
text : 'Read Only 1',
flex : 1,
sortable : true,
dataIndex : 'ro1'
}, {
text : 'Read Only 2',
flex : 2,
sortable : true,
dataIndex : 'ro2'
}, {
text : 'MV',
flex : 1,
sortable : true,
dataIndex : 'mv'
}, {
text : 'Editable 1',
flex : 1,
sortable : true,
dataIndex : 'e1',
editor : 'textfield'
}, {
text : 'Editable 2',
flex : 1,
sortable : true,
dataIndex : 'e2',
editor : 'textfield'
}
As Lorenz suggested you can catch the itemmouseenter event and then highlight the editable rows calling highlight method, in order to only highlight those cells that have editors associated you probably can use a class applied to those columns, and then select the matching elements on the mouse enter event handler, something like this:
itemmouseenter: function (grid, record, item, index, e, eOpts) {
var node = grid.getNode(record);
var cells = Ext.dom.Query.select('.editable-cell', node);
for (var i = 0; i < cells.length; i++) {
Ext.fly(cells[i]).highlight();
}
}
You can see a working sample here.
Hope it helps to solve your problem
another option here with CSS animation: https://fiddle.sencha.com/#fiddle/16a
I have below requirement of a page with sencha touch:
A drop down of some options
A question posted by users (length may vary big time)
a text area to display get the answer
Two buttons for submit and ignore
I am using vbox layout. Now the problem is I want the page to be fully scrollable instead of partial scrolls on dataview etc.
How can I achieve it. I have similar requirements for different screens.
Below is the code:
Ext.define('HCMDoctor.view.PFQuestion', {
extend : 'Ext.form.Panel',
xtype : 'PFQuestion',
id : 'pfView',
config : {
layout : {
type : 'vbox',
align : 'stretch'
},
flex : 1,
scrollable : true,
items : [{
xtype : 'container',
html : 'Public Forum Question'
}, {
xtype : 'selectfield',
store : 'CommunityWiseQuestions',
name : 'pfCommId',
id : 'pfCommId',
valueField : 'communityId',
displayField : 'displayFull'
}, {
store : 'PFQuestion',
xtype : 'dataview',
flex : 1,
id : 'pfQuestionHolder',
itemTpl : ['{discussionTitle}<br>{description}',
'<br>Posted in {postedInCommunityName}']
}, {
xtype : 'hiddenfield',
id : 'pfQuestionId',
name : 'pfQuestionId'
}, {
xtype : 'textareafield',
id : 'pfAnswer',
name : 'pfAnswer'
}, {
store : 'PFQuestion',
xtype : 'button',
text : 'Ignore',
id : 'ignorePFQuestion'
}, {
store : 'PFQuestion',
xtype : 'button',
text : 'Submit',
id : 'submitPFQuestion'
}
]
}
});
Thanks
onload of store iterate over records and in every iteration create panel with tpl by passing record data to it and add the panel to its parent. something like this:
var parentPanel = Ext.getCmp("pfView");
for(var i=0; i++; i<records.size){
var mypanel = Ext.create("Ext.Panel", {
data : records[i]
});
parentPanel.add(myPanel);
}
I created register panel and added toolbar with button during view initialization, In controller i am creating form panel and adding it to the register panel dynamically.
The toolbar in register panel is adjusting based on device screen but, The form panel width is not changing.
If i set width for the form panel, The form panel is floating and width remains the same.
This is what i done so for.
Ext.define('Form.view.RegisterForm',{
extend : 'Ext.Panel',
xtype : 'register',
id : 'register',
initialize : function() {
console.log("register init");
var submit = {
xtype : 'button',
width : '100px',
ui : 'action',
text : 'Submit',
handler : this.onSubmitTap,
scope : this
};
var topToolbar = {
xtype : 'toolbar',
docked : 'top',
id : 'registerToolbar',
title : 'Form',
items : [{
xtype : 'spacer'
}, submit]
};
this.add(topToolbar);
},
config : {
fullscreen : true,
layout : {
type : 'vbox'
},
title : 'Register'
},
onSubmitTap : function() {
console.log("onSubmit");
this.fireEvent('submitCommand', this);
}
});
In Register controller i adding fields dynamically
// RegisterFormController.js
oncreateForm : function() {
var form = {
xtype: 'formpanel',
flex : 1,
id: formId,
name: formId
};
Ext.getCmp('register').add(form);
}
// calling onCreateComponent method with xtype, label, value and fromId
onCreateComponent : function(fxtype,flabel,fname,fvalue,id) {
Ext.getCmp(id).add({
xtype: fxtype,
label: flabel,
name: fname,
value: fvalue,
labelWrap:true
});
}
In case any of you came up with same problem.
The mistake i did was "I added the 4 radio buttons in a hbox panel so width of that panel increased that's why the whole form panel not displaying properly in different devices".
After i changed the panel layout as vbox, The problem solved.
I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);