How to perform checkbox checkevent? - extjs

I want a help for performing checkevent in a check box. Here is my code:
View.js:
Ext.define('AM.view.shop.Bill',
{
extend: 'Ext.form.Panel',
alias : 'widget.bil',
title: 'Complete Check Out',
defaultType:'textfield',
initComponent: function() {
this.items= [
// Mailing Address
{ xtype: 'fieldset',
title: 'Mailing Address',
defaultType: 'textfield',
layout: 'anchor',
width:520,
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'Street Address',
name: 'mailingStreet',
billingFieldName: 'billingStreet',
allowBlank: false
},
{ xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'City',
name: 'mailingCity',
id:'mailingCity',
billingFieldName: 'billingCity',
flex: 1,
allowBlank: false
}]
}]
},
// Billing Address
{
xtype: 'fieldset',
title: 'Billing Address',
layout: 'anchor',
width:520,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'checkbox',
name: 'billingSameAsMailing',
boxLabel: 'Same as Mailing Address?',
hideLabel: true,
checked: true,
style: 'margin-bottom:10px',
id:'billingSameAsMailing',
},
{ xtype: 'textfield',
fieldLabel: 'Street Address',
name: 'billingStreet',
//style: 'opacity:.3',
disabled: true,
allowBlank: false
},
{ xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'City',
name: 'billingCity',
id:'billingCity',
style: (!Ext.isIE6) ? 'opacity:.3' : '',
flex: 1,
disabled: true,
allowBlank: false
}]
}]
}]
this.callParent(arguments);
}
});
controller.js:
Ext.define('AM.controller.Shops', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'bil textfield[name=mailingCity]' : {
change: function(textField) {
var formpanel = Ext.ComponentQuery.query('bil')[0];
var copyToBilling = formpanel.down('[name=billingSameAsMailing]').getValue();
if (copyToBilling) {
var city=formpanel.down('[name=mailingCity]').getValue();
formpanel.down('[name=billingCity]').setValue(city);
}
}
},
'bil checkbox[name=billingSameAsMailing]': {
check: function(item, checked) {
alert(item);
}
}
});
}
});
I use the same method of textbox, to get a particular checkbox for performing event on
that checkbox. In textbox it's working correctly but in the case of checkbox it does not respond.

You just try the following code.It works For me.
item.checked = true;

Related

Add input field in Ext.tab.Panel

I am creating a menu using Ext.tab.Panel and would like to have Search feature. Something like Bootstrap navbar - https://getbootstrap.com/docs/4.0/components/navbar/
I tried to simply add the textfield element but didn't work obviously.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
});
Is it possible to achieve this at all?
You can archive it with the tabbar config of the Ext.tab.Panel.
The Ext.tab.Bar is a specialized Ext.container.Container where you can add items like a to Textfield.
So add te search textfield to the tabbar config and you can archive what you want to, see the example code below and the Sencha Fiddle.
Ext.create('Ext.TabPanel', {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
},
],
tabBar: {
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
]
},
renderTo: Ext.getBody()
});
At first this functionality does not exist in the tabpanel, which I recommend you do and replace the idea of ​​tabpanel to apply a cardlayout which is the same tabpanel layout system.
And then you can use a toolbar, with the buttons being configured with the toogleGroup, in short, you'd better see the code example below working.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Panel', {
fullscreen: true,
renderTo: Ext.getBody(),
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'toolbar',
height: 42,
defaults: {
xtype: 'button',
},
items: [{
text: 'Tab1',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 0,
toggleGroup: 'tabHandler',
enableToggle: true,
pressed: true,
margin: '0'
}, {
text: 'Tab2',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 1,
enableToggle: true,
margin: '0'
}, {
text: 'Tab3',
handler: function(button){
var me = this,
fakeContainer = button.up('panel').down('#fakeTab');
fakeContainer.setActiveItem(button.tabIndex);
},
tabIndex: 2,
toggleGroup: 'tabHandler',
enableToggle: true,
margin: '0'
}, '->', {
xtype: 'textfield',
fieldLabel: 'Search:',
labelWidth: 70,
width: 250,
margin: 0
}, {
iconCls: 'x-fa fa-search',
handler: function(){
alert('Your Search here!');
}
}]
}, {
xtype: 'container',
itemId: 'fakeTab',
margin: '16 0 0 0',
flex: 1,
layout: 'card',
defaults: {
xtype: 'container',
height: 800
},
items: [{
html: '<STRONG>TAB 1 your content here</STRONG>'
}, {
html: '<STRONG>TAB 2 your content here</STRONG>'
}, {
html: '<STRONG>TAB 3 your content here</STRONG>'
}]
}]
});
}
});
Working sample here

How to add search filter in EXTJS

I created a table using extjs where it is having three columns name, email and cars. In extjs we are having a default sorting method. here i want to add search method for all these three columns so that i can also search using the name, email and cars.
What change i need to do for the below code
The expected output is i need to get search filter option under each columns.
Ext.define('ViewerModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewermodel',
stores: {
mystore: {
fields: ['name', 'email', 'cars'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com"
}, {
'name': 'Bart',
"email": "bart#simpsons.com"
}, {
'name': 'Homer',
"email": "homer#simpsons.com"
}, {
'name': 'Marge',
"email": "marge#simpsons.com"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
}
});
Ext.define('APP.HorizontalBox', {
extend: 'Ext.container.Container',
requires: ['Ext.layout.container.HBox'],
xtype: 'layout-horizontal-box',
width: 750,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
frame: true,
bodyPadding: 10
},
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
title: 'Grid: click on the grid rows',
itemId: 'myGridItemId',
flex: 1.2,
margin: '0 10 0 0',
bind: {
store: '{mystore}',
selection: '{users}'
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 0.5
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Cars',
dataIndex: 'cars',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
padding: '2 5 2 5',
text: 'Edit item',
handler: function (btn) {
var grid = btn.up('grid');
var selectedRow = grid.getSelectionModel().getSelection()[0];
var janela = Ext.create('APP.MyWindow', {
animateTarget: btn.getEl(),
//EDITED
viewModel: {
data: {
users: selectedRow
}
}
}).show();
}
}]
}],
}, {
xtype: 'form',
title: 'View',
itemId: 'panelbindItemId',
flex: 1,
margin: '0 10 0 0',
defaults: {
labelWidth: 50
},
items: [{
xtype: 'displayfield',
margin: '20 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
Ext.define('APP.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
reference: 'windowreference',
title: 'MyWindow | Edit record',
closable: true,
modal: true,
padding: '10px',
height: 150,
layout: 'fit',
initComponent: function () {
var me = this;
Ext.apply(me, {
items: [{
xtype: 'form',
layout: 'anchor',
defaults: {
padding: '5 0 5 0'
},
items: [{
xtype: 'textfield',
margin: '10 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
me.callParent(arguments);
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('APP.HorizontalBox', {
renderTo: document.body,
width: 750,
height: 400,
title: 'Title'
});
}
});
You can do it in the afterrender event of grid (Refer this post.) For example:
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
text: 'Search',
iconCls: 'x-fa fa-home',
handler: function () {
console.log("Search Item");
}
}]);
}
}
Check this Fiddle.
What you are searching for is the FiltersFeature, and the usage is as follows:
xtype:'grid',
...
features:[{
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'name'
}, {
... (one definition for every column you want to allow filtering one)
}]
}]
Please note that you have to add a requires and maybe even load Ext.ux, as can be found in the last comment.
Other readers please be aware that FiltersFeature is ExtJS4 specific, and has been moved around for ExtJS 5 and 6.
You can also use this code where it will search the data using the date.
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
xtype:'datefield',
name:'date1',
fieldLabel:'Filter By',
format: 'y-m-d',
listeners:{
renderer: Ext.util.Format.dateRenderer('y-m-d'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'y-m-d'}) }
}
}

extjs labelwidth in form of textfield not sizing to get bigger

the label of my textfield in ExtJS will not get bigger no matter what I try. It seems to be moving to 2 rows to accommodate size. Can anyone see what I am doing wrong?
I have a form, inside a fieldset, inside a panel.
Ext.define('ExtApplication4.view.admin.Admin', {
extend: 'Ext.panel.Panel',
xtype: 'app-admin',
controller: 'admin',
itemId: 'adminItemId',
requires: [
'ExtApplication4.view.admin.AdminController',
'ExtApplication4.util.GlobalVar'
],
title: 'Admin',
//html: 'This is my Admin Panel',
items: [{
xtype: 'fieldset',
title: 'database values',
width: 400,
items: [{
xtype: 'form',
//labelWidth: 200,
monitorValid: true,
formBind: true,
items: [{
//xtype: 'fieldset',
//title: 'database values',
//width: '100%',
defaultType: 'textfield',
margin: '10px,0,10px,0',
fieldDefaults: {
labelWidth: 200
},
items: [
{
allowBlank: false,
fieldLabel: 'Accrued',
itemId: 'itemIdAccrued',
name: 'nameAccrued',
emptyText: 'Accrued'
},
{
allowBlank: false,
fieldLabel: 'YTD End Val',
name: 'YTDEndVal',
emptyText: 'YTDEndVal',
itemId: 'itemIdYTDEndVal'
},
{
allowBlank: false,
fieldLabel: 'Margin Req',
name: 'MarginReq',
emptyText: 'MarginReq',
itemId: 'itemIdMarginReq'
},
{
allowBlank: false,
fieldLabel: 'MarginExc',
name: 'MarginExc',
emptyText: 'MarginExc',
itemId: 'itemIdMarginExc'
},
{
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'All fields must be filled out',
style: 'text-align:left'
}
],
buttons: [{
text: 'Submit',
formBind: true,
listeners: {
click: 'onButtonSubmitPTValues'
}
}]
Instead of fieldDefaults use defaults as config property.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
itemId: 'adminItemId',
title: 'Admin',
//html: 'This is my Admin Panel',
items: [{
xtype: 'fieldset',
title: 'database values',
width: 400,
items: [{
xtype: 'form',
//labelWidth: 200,
monitorValid: true,
formBind: true,
items: [{
//xtype: 'fieldset',
//title: 'database values',
//width: '100%',
defaultType: 'textfield',
margin: '10px,0,10px,0',
defaults: {
labelWidth: 200
},
items: [
{
allowBlank: false,
fieldLabel: 'Accrued',
itemId: 'itemIdAccrued',
name: 'nameAccrued',
emptyText: 'Accrued'
},
{
allowBlank: false,
fieldLabel: 'YTD End Val',
name: 'YTDEndVal',
emptyText: 'YTDEndVal',
itemId: 'itemIdYTDEndVal'
},
{
allowBlank: false,
fieldLabel: 'Margin Req',
name: 'MarginReq',
emptyText: 'MarginReq',
itemId: 'itemIdMarginReq'
},
{
allowBlank: false,
fieldLabel: 'MarginExc',
name: 'MarginExc',
emptyText: 'MarginExc',
itemId: 'itemIdMarginExc'
},
{
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'All fields must be filled out',
style: 'text-align:left'
}
],
buttons: [{
text: 'Submit',
formBind: true,
}]
}]
}]
}]
});
}
});
<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

Data Store has empty data property

I am working with Ext.js and trying to get a data Store set up and mapped to data fields on my FormPanel so that I can easily acess data input.
Something is missing in my mapping:
When I enter data in the textfields and hit my Submit button's submit handler, the data property on the store is blank. I was expecting it to contain data input on the page. Can someone help? Thanks very much:
infoPanel = function () {
this.store = new Ext.data.JsonStore({
autoLoad: true,
root: 'Data',
storeId: 'creditMemoStore',
fields: ['shipto', 'billto', 'reasonCode', 'creditClaimed', 'adjustmentAmount', 'poNumber']
});
this.fieldset = {
xtype: 'fieldset',
flex: 1,
border: false,
defaultType: 'field',
items: [
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Ship to',
name: 'shipto',
//dropdown
allowBlank: false
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Bill to',
name: 'billto',
//dropdown
allowBlank: false
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Reason Code',
name: 'reasonCode',
//dropdown
allowBlank: false
},
{
labelWidth: 160,
xtype: 'numberfield',
allowNegative: false,
fieldLabel: 'Amount',
allowBlank: false,
name: 'creditClaimed'
},
{
labelWidth: 160,
xtype: 'numberfield',
allowNegative: false,
fieldLabel: 'Adjustment Amount',
name: 'adjustmentAmount',
allowBlank: false,
maxLength: 5
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Customer PO Number',
allowBlank: false,
name: 'poNumber',
maxLength: 15
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Debit Memo Number',
allowBlank: false,
name: 'dmNumber',
maxLength: 50
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Credit Memo Number',
allowBlank: false,
name: 'cmNumber',
maxLength: 6
},
{
xtype: 'textfield',
labelWidth: 160,
fieldLabel: 'Currency Code',
name: 'currencyCode',
//dropdown
allowBlank: false,
maxLength: 3,
value: 'USD'
}
]
};
this.panel = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
width: 700,
title: 'Create Credit Memo',
height: 400,
frame: true,
id: 'creditMemoFormPanel',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [
this.fieldset
],
store: this.store,
buttons: [
{
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
},
{
text: 'Submit',
formBind: true,
handler: function () {
var form = this.up('form').getForm();
var store = Ext.StoreMgr.get('creditMemoStore');
var dataObject = { testPost: store.data};
if (form.isValid()) {
Ext.Ajax.request({
url: 'CreateCreditMemo',
jsonData: Ext.JSON.encode(dataObject),
success: function() { Ext.Msg.alert('json post Success'); },
failure: function () { Ext.Msg.alert('json post Fail'); },
});
}
}
}
]
});
}
Ext.onReady(function () {
var ip = new infoPanel();
});
The Ext.js Store is only used for records where more than set of data is displayed at a time.
The Store doesn't apply to a basic form. The Ext.js Form posts the values of all of the fields automatically on submit.

Load form from combo

I'm trying to load a form from a record selected in a combo.
The store is loaded properly and the combo is populated, but, when I select a value from combo, form fields remain empty.
Any help will be appreciated.
This is the code:
Model:
Ext.define('AA.model.proc.Process', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'owner', type: 'string' },
{ name: 'mail_dest', type: 'string' }
],
proxy: {
type: 'rest',
url : 'data/camp.json',
reader: {
type: 'json',
root: 'camp',
totalProperty: 'count'
}
}
});
Store:
Ext.define('AA.store.proc.Process', {
extend: 'Ext.data.Store',
model: 'AA.model.proc.Process',
requires: 'AA.model.proc.Process'
});
Class:
Ext.define('AA.view.proc.IM', {
extend: 'Ext.window.Window',
alias: 'widget.im',
title: 'IM',
layout: 'fit',
height: 500,
width: 400,
autoShow: true,
plain: true,
modal: true,
headerPosition: 'right',
closable: false,
initComponent: function () {
this.items = [{
xtype: 'form',
fileUpload: true,
width: 550,
autoHeight: true,
border: false,
bodyStyle: 'padding:5px 5px 0',
frame: true,
labelWidth: 100,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'combo',
name: 'name',
store: 'procstore',
fieldLabel: 'Name',
valueField: 'name',
displayField: 'name',
width: 150,
allowBlank: true,
listeners: {
scope: this,
'select': this.loadForm
}
}, {
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
}, {
xtype: 'textfield',
fieldLabel: 'Owner',
name: 'owner'
}, {
xtype: 'textfield',
fieldLabel: 'E-mail owner',
name: 'mail_dest'
}]
}];
this.buttons = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
},
loadForm: function (field, record, option) {
console.log(record)
// firebug returns
// $className "AA.model.proc.Process"
// $alternateClassName "Ext.data.Record"
console.log(this.down('form'))
// firebug returns the right form panel
this.down('form').loadRecord(record);
}
});
This is from the documentation for the select event:
select( Ext.form.field.ComboBox combo, Array records, Object eOpts )
Notice that the second parameter is an Array. But in your example the second parameter is an Ext.data.Record. You are treating array as a record. Modify your loadForm to make it process arrays of records:
loadForm: function (field,records,option) {
this.down('form').loadRecord(records[0]);
}
P.S. By the way you have two fields with name: 'name'.

Resources