I am very new to this ExtJS, Here is my POC,
Ext.onReady(function(){
var my3rdNumberField = new Ext.form.NumberField({
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: false,
fieldLabel: 'Number of Copies',
allowDecimals: false,
name: 'noofcopy',
width: 25,
value:1,
maxValue:20,
minValue:1
});
my3rdNumberField.render(Ext.getBody());
});
i gave the field label as Number of Copies, but it is not showing before the textbox or anywhere else. can you please help me where i have mistaken or is there anything i need to add along with the listed. if so why fieldLabel is not working?
change Ext.form.NumberField to Ext.form.field.Number.
var my3rdNumberField = new Ext.form.field.Number({
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: false,
fieldLabel: 'Number of Copies',
allowDecimals: false,
name: 'noofcopy',
Labelwidth: 50,
value:1,
maxValue:20,
minValue:1
});
my3rdNumberField.render(Ext.getBody());
here is working code in extjs 3.4 . please confirm the version of extjs.If you are using extjs 4 or above see the example :
http://jsfiddle.net/hWGYE/2358/
Ext.onReady(function(){
var myPanel = new Ext.form.FormPanel({
labelWidth: 120,
items:[new Ext.form.NumberField({
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: false,
fieldLabel: 'Number of Copies',
allowDecimals: false,
name: 'noofcopy',
width: 100,
value:1,
maxValue:20,
minValue:1
})],
});
myPanel.render(Ext.getBody());
});
Related
I need some help about a form with a textarea field.
My problem.
I have a simple Ext.window in which I have put an Ext.FormPanel. In this Ext.FormPanel I have put an Ext.form.FieldSet in which I have put some fields. One of these field is a textarea (Ext.form.TextArea),
Now, my objective is to render responsive this textarea when I resize the Ext.window.
It is possible to obtain this behavior?
This is my current code:
Window in which reside the Ext.FormPanel
var win = new Ext.Window({
id:'winTest',
layout:'fit',
modal:true,
title:'Title',
width:590,
height:300,
closeAction:'close',
plain: true,
autoScroll: true,
items:[form],
listeners: {
'beforeclose': function (p) {
}
}
});
Ext.FormPanel in which reside the Ext.form.FieldSet
var form = new Ext.FormPanel({
id:'FormTest',
layout : 'form',
width:510,
labelAlign: 'right',
labelWidth: 120,
autoScroll:true,
bodyStyle:'padding:2px;background-color:#E9EFF8;',
monitorValid:true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad:true,
items: [fieldset]
});
Fieldset in which I have put some fileds
var fieldset = Ext.form.FieldSet({
id:'fsTest',
autoHeight: true,
defaultType: 'textfield',
items:[.....,textarea]
//boxMaxWidth:450
//border:true
})
Textarea putted in the fieldset (to shorted, I have reported only the textarea)
var textarea = new Ext.form.TextArea({
id:'textareaTest',
name:'TextArea',
fieldLabel:'Insert',
hidden:false,
width:310,
height:60,
maxLength:500,
allowBlank: true
});
Thanks for any precious help.
Lorenzo.
It should be like this:-
var win = new Ext.Window({
id: 'winTest',
layout: 'vbox',
modal: true,
title: 'Title',
width: 590,
height: 300,
closeAction: 'close',
plain: true,
autoScroll: true,
items: [{
xtype: 'form',
id: 'FormTest',
flex: 1,
layout: 'vbox',
width: 510,
labelAlign: 'right',
labelWidth: 120,
autoScroll: true,
bodyStyle: 'padding:2px;background-color:#E9EFF8;',
monitorValid: true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad: true,
items: [{
xtype: 'fieldset',
id: 'fsTest',
//autoHeight: true,
flex: 1,
layout: 'vbox',
//defaultType: 'textfield',
items: [{
xtype: 'textarea',
flex: 1,
id: 'textareaTest',
name: 'TextArea',
fieldLabel: 'Insert',
hidden: false,
width: 310,
//height: 60,
maxLength: 500,
allowBlank: true
}]
//boxMaxWidth:450
//border:true
}]
}]
}).show();
Please have a look at this example
I have made a webapp with extjs 3.4.
I have a grid that I want to group with field street but I can't.
My code is here:
var store_intervencoes = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
root:'rows',
autoLoad: false,
type : 'ajax',
//remoteGroup: false,
groupField: 'street',
fields:[{ name:'street', type:'integer'},
{ name:'intervenction', type:'string'},
{ name:'priority', type:'integer'},
{ name:'value', type:'string'}]
})
});
var gridPanel = new Ext.grid.GridPanel({
header: false,
store: store_intervencoes,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
layout: 'fit',
height: 300,
width: 1000,
columnLines: true,
cls: 'grid_intervencoes',
autoScroll: true,
stripeRows: true,
autoFill : true,
viewConfig: { emptyText: 'nothing', deferEmptyText: false },
groupField: 'street',
view: new Ext.grid.GroupingView({
forceFit:true,
autoHeight: true,
autoFill : true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "fk_n_rua"]})'
}),
columns: [{
//header: "Nome",
//sortable: true,
dataIndex: "intervenction",
//width: 450
},{
//header: "Prioridade",
//sortable: true,
dataIndex: "priority",
//width: 50
},{
//header: "Custo" + ' \u20AC',
//sortable: true,
dataIndex: "value",
//width: 50
},{
//header: 'Trecho',
//sortable: true,
dataIndex: "street",
//width: 50,
//groupable: true
}],
collapsible: true,
animCollapse: false,
title: 'Grouping Example',
iconCls: 'icon-grid',
fbar : [{
xtype: 'numberfield',
id: 'total',
name: 'total',
fieldLabel: 'Total',
value: '0',
readOnly: true,
fieldCls: 'valores'
}]
});
I think I have all the code like this example:
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/grouping.html
I don't know why the grid doesn't group. I get all the data from a database with ajax and php that generate json. All fields shows up. The unique problem is the non grouping. I also get no errors.
Anyone could help me with that?
function open() {
var req_spec_store = new Ext.data.SimpleStore({
url: 'mngr_req_ajx.php',
fields: ['value', 'text'],
data: [
['Android', 'Android'],
['iPhone', 'iPhone'],
['iPhone2', 'iPhone2'],
['iPhone3', 'iPhone3']
]
});
req_spec_store.load({
params: {
todo: 'Get_Req_Spec'
}
});
var menuWin = new Window('menuWindow', {
title: "Create Data",
width: 980,
height: 340,
draggable: true,
destroyOnClose: true,
hideEffect: Element.hide,
showEffect: Element.show,
minimizable: false,
maximizable: false,
closable: true,
resizable: false,
items: [new Ext.FormPanel({
renderTo: 'r_sp',
id: 'mngReqForm',
layout: 'form',
height: innerHeight - 250,
width: innerWidth - 50,
frame: true,
destroyOnClose: true,
defaults: {
msgTarget: 'side',
labelSeparator: ''
},
labelAlign: 'right',
items: [{
xtype: 'combo',
fieldLabel: 'Data Entry ',
store: req_spec_store,
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText: 'Select Entry...',
triggerAction: 'all',
name: 'specId2',
id: 'specId2',
hiddenName: 'specIdHid',
width: 150,
forceSelection: false,
editable: false,
selectOnFocus: true
}]
})]
});
}
window is opened in on click of button. Inside window, there is form panel. Which is having one combo type element. I am calling PHP using ajax, getting data successfully when directly doing the stuff on Ext.onReady() but not in case of window opened.
The data of your store should be in JSON (also {} instead off []=
data : [ {value:'Android', text:'Android' }, ... ]
I am new to ExtJs,i have designed an entry form as follows,
var HouseForm = new Ext.FormPanel({
renderTo: "HouseCreation",
frame: true,
url: url+'/lochweb/loch/house/persist',
title: 'Create House',
bodyStyle: 'padding:5px',
width: 500,
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'TaxId',
name: 'taxId',
allowBlank:true
}
});
var win = new Ext.Window({
layout:'fit',
closable: false,
resizable: true,
plain: true,
border: false,
items: [HouseForm]
});
win.show();
});
I need to validate the user inputs manually,so i need to call my function to validate the user inputs.how to define and call a function and also is there any other layout other than fit?
Thanks
You can simply write your functions/methods in same .js file and call them as usual i.e. () . It will work.
About layouts, there many varieties of layouts available in ExtJS. Here is the link which shows example and minimal code of all the layouts possible in ExtJS.
This is my textfield
siteNameField = new Ext.form.TextField({
id: 'siteNameField',
fieldLabel: 'Site Name',
maxLength: 50,
allowBlank: false,
anchor:'-15',
xtype:'textfield',
maskRe: /([a-zA-Z0-9\s]+)$/
});
As you can see it already has a check for blanks. But text field accepts space and I don't want that. I want no blank fields ... anything other than 'ONLY' spaces is acceptable .
Here is the FormPanel Code
voiceSiteCreateForm = new Ext.FormPanel({
labelAlign: 'top',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:0.5,
layout: 'form',
border:false,
//items: [siteNameField, siteNumberField,queueNameField,notifyFreqField,notifyStatusField]
items: [siteNameField, siteNumberField]
}]
}],
buttons: [{
text: 'Save and Close',
handler: createSite
},{
text: 'Cancel',
handler: function(){
// because of the global vars, we can only instantiate one window... so let's just hide it.
siteCreateWindow.hide();
}
}]
});
Please help,
Remove maskRe and use regex. Eg:
siteNameField = new Ext.form.TextField({
id: 'siteNameField',
fieldLabel: 'Site Name',
maxLength: 50,
allowBlank: false,
anchor:'-15',
xtype:'textfield',
regex: /[a-zA-Z0-9]+/
});