im learning sencha and i could not do data transfer between two views. I have 2 views. first view has datalist. when datalist item clicked im opening another view. and i need to send the list item values to second view.
can anyone help me please?
first view.
Ext.define('griddeneme.view.pnlAna', {
extend: 'Ext.Panel',
alias: 'widget.pnlana',
requires: [
'Ext.XTemplate'
],
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
flex: 1,
style: 'background-color:#81BEF7',
items: [
{
xtype: 'button',
docked: 'left',
height: 15,
itemId: 'mybutton1',
style: 'margin-Top',
ui: 'decline',
text: 'Çıkış'
}
]
},
{
xtype: 'panel',
flex: 9,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'list',
flex: 1,
itemId: 'mylist',
itemTpl: [
'<div>{ad} - {yazar}</div>'
],
store: 'strYazarlar'
}
]
}
],
listeners: [
{
fn: 'onMybutton1Tap',
event: 'tap',
delegate: '#mybutton1'
},
{
fn: 'onMylistItemTap',
event: 'itemtap',
delegate: '#mylist'
}
]
},
onMybutton1Tap: function(button, e, eOpts) {
var pnlAna = Ext.create('griddeneme.view.pnlGiris');
Ext.Viewport.setActiveItem(pnlAna);
},
onMylistItemTap: function(dataview, index, target, record, e, eOpts) {
//alert(record.data.ad);
var Details=Ext.create('griddeneme.view.pnlDetail');
Details.setData(record);
Ext.Viewport.setActiveItem(Details);
}
});
second view
Ext.define('griddeneme.view.pnlDetail', {
extend: 'Ext.Panel',
alias: 'widget.pnldetail',
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
flex: 1,
style: 'background-color:#81BEF7',
items: [
{
xtype: 'button',
docked: 'left',
height: 15,
ui: 'back',
text: 'Geri'
}
]
},
{
xtype: 'panel',
flex: 8,
itemId: 'mypanel7',
style: '',
items: [
{
xtype: 'label',
html: 'Kitap Adı:',
id: '',
minWidth: 150,
style: 'color:green; float:left'
},
{
xtype: 'label',
html: 'f',
id: 'lblAd'
},
{
xtype: 'label',
html: 'Yazar:',
minWidth: 150,
style: 'float:left;color:green;'
},
{
xtype: 'label',
html: 'ggg',
id: 'lblKitap'
}
],
listeners: [
{
fn: function(component, eOpts) {
alert(record.data.ad);
},
event: 'initialize'
}
]
}
]
}
});
Ext.define('griddeneme.view.pnlDetail', {
extend: 'Ext.Panel',
alias: 'widget.pnldetail',
config: {
someData: null,
...
And on instantiating your pnlDetail:
onMylistItemTap: function(dataview, index, target, record, e, eOpts) {
var Details=Ext.create('griddeneme.view.pnlDetail',{
someData: // here you can set your data
});
Ext.Viewport.setActiveItem(Details);
}
Related
I have a form panel with a radiogroup, and depending on the radiogroup selection, it will show some other components. If a radiofield is not selected, then its items will be hidden, as they're not part of the active card.
Now, if I have allowblank: false set on a field (and it's empty) within the hidden card, my form is still considered invalid. Being hidden means the user would not like to use it, so it should not be considered as part of the form. Here's an example.
In the example, I have 2 forms... the top form is the one that I'm curious about... is there a way to get this working without having to bind to disabled? I tried looking at hideMode, but that wasn't what I was looking for.
Ideally, I wouldn't have to create a formula for each card that I add... that seems silly. I realize I could create a generic formula, but once again, that just seems extraneous. Another option could be ditching the card layout, and binding each card to hidden and disabled, but I'm creating more formulas. Is there some sort of property I'm missing?
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('MyController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onValidityChange: function(form, isValid, eOpts) {
this.getViewModel().set('isFormValid', isValid);
}
});
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myview',
data: {
activeItem: {
myInput: 0
}
},
formulas: {
activeCardLayout: function(getter) {
var myInput = getter('activeItem.myInput');
console.log(myInput);
return parseInt(myInput);
}
}
});
Ext.define('MyForm', {
extend: 'Ext.form.Panel',
title: 'My Form',
controller: 'myview',
viewModel: {
type: 'myview'
},
layout: {
type: 'hbox'
},
listeners: {
validitychange: 'onValidityChange'
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
layout: {
type: 'hbox'
},
items: [{
xtype: 'button',
text: 'Save',
reference: 'saveButton',
disabled: true,
bind: {
disabled: '{!isFormValid}'
}
}]
}],
items: [{
xtype: 'radiogroup',
vertical: true,
columns: 1,
bind: {
value: '{activeItem}'
},
defaults: {
name: 'myInput'
},
items: [{
boxLabel: 'None',
inputValue: '0'
}, {
boxLabel: 'Something',
inputValue: '1'
}]
}, {
xtype: 'container',
layout: 'card',
flex: 1,
bind: {
activeItem: '{activeCardLayout}'
},
items: [{
xtype: 'container',
layout: 'fit'
}, {
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'textfield',
fieldLabel: 'hello',
allowBlank: false
}]
}]
}]
});
Ext.define('MyViewModel2', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myview2',
data: {
activeItem: {
myInput: 0
}
},
formulas: {
disableSomethingCard: function(getter) {
return getter('activeItem.myInput') !== '1';
},
activeCardLayout: function(getter) {
var myInput = getter('activeItem.myInput');
console.log(myInput, 'here');
return parseInt(myInput);
}
}
});
Ext.define('MyForm2', {
extend: 'MyForm',
title: 'My Form 2 (works)',
viewModel: {
type: 'myview2'
},
items: [{
xtype: 'radiogroup',
vertical: true,
columns: 1,
bind: {
value: '{activeItem}'
},
defaults: {
name: 'myInput'
},
items: [{
boxLabel: 'None',
inputValue: '0'
}, {
boxLabel: 'Something',
inputValue: '1'
}]
}, {
xtype: 'container',
layout: 'card',
flex: 1,
bind: {
activeItem: '{activeCardLayout}'
},
items: [{
xtype: 'container',
layout: 'fit'
}, {
xtype: 'container',
layout: 'fit',
bind: {
disabled: '{disableSomethingCard}'
},
items: [{
xtype: 'textfield',
fieldLabel: 'hello',
allowBlank: false
}]
}]
}]
});
Ext.create('MyForm', {
renderTo: Ext.getBody()
});
Ext.create('MyForm2', {
renderTo: Ext.getBody()
});
}
});
I have a button inside ExtJs toolbar as below
Ext.define('Member.view.members.MembersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membersGrid',
id: 'membersGrid',
cls: 'custom-grid',
requires: [],
viewConfig : {
enableTextSelection: true
},
frame: true,
store: '',
//id: 'transGrid',
height: 150,
columns: [
{
xtype: 'rownumberer'
},
{
hidden:true,
width: 10,
dataIndex: 'id',
text: 'id'
},
/*{
width: 100,
//flex: 1,
dataIndex: 'member_number',
text: 'Member Number'
},*/
{
width: 150,
flex: 1,
dataIndex: 'member_names',
text: 'Member Names'
}],
dockedItems: [
{
xtype: 'toolbar',
itemId: 'toptoolbar',
id:'toptoolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Pin_Reset',
id: 'pinReset',
itemId: 'pinReset',
iconCls: 'pin_reset'
}
]
}
],
initComponent: function() {
Ext.getCmp('pinReset').hidden = true;
this.callParent();
}
});
I want the button to appear hidden after render. I thought Ext.getCmp('pinReset').hidden = true; will do since I have assigned the button an id. Getting the following error 'Cannot set property 'hidden' of undefined' on Chrome developer tools.
Extjs Version: 5.1
initComponent is called before the rendering.So it is not able to find the button.You can use 'afterrender' event instead for this.
Add following code instead of initComponent:
listeners:{
afterrender: function() {
Ext.getCmp('pinReset').hidden = true;
}
}
Working Code:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.grid.Panel', {
alias: 'widget.membersGrid',
id: 'membersGrid',
cls: 'custom-grid',
renderTo:Ext.getBody(),
requires: [],
viewConfig : {
enableTextSelection: true
},
frame: true,
store: '',
//id: 'transGrid',
height: 150,
columns: [
{
xtype: 'rownumberer'
},
{
hidden:true,
width: 10,
dataIndex: 'id',
text: 'id'
},
/*{
width: 100,
//flex: 1,
dataIndex: 'member_number',
text: 'Member Number'
},*/
{
width: 150,
flex: 1,
dataIndex: 'member_names',
text: 'Member Names'
}],
dockedItems: [
{
xtype: 'toolbar',
itemId: 'toptoolbar',
id:'toptoolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Pin_Reset',
id: 'pinReset',
itemId: 'pinReset',
iconCls: 'pin_reset'
}
]
}
],
listeners:{
afterrender: function() {
Ext.getCmp('pinReset').hidden = true;
}
}
});
}
});
<link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
You are using initComponent instead of afterRender in your codesnippet. Is that correct?
I would use the reference-property and use it like this:
items: [
{
xtype: 'button'
reference: 'myButton'
}
]
...
afterRender: function() {
this.lookupReference('myButton').setHidden(true);
this.callParent();
}
Main view file
Ext.define('DemoApp1.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.Email',
'Ext.field.Password',
'Ext.field.DatePicker',
'Ext.TitleBar',
'Ext.Button'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'container',
title: 'Login',
autoDestroy: false,
layout: {
type: 'vbox',
pack: 'center',
align: 'center'
},
iconCls: 'user',
items: [
// login user
{
xtype: 'fieldset',
id: 'login-user-field-set',
width: 500,
title: 'Login Here!',
items: [
{
xtype: 'emailfield',
label: 'Email',
name: 'user'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password'
}
]
},
{
xtype: 'button',
id: 'login-button',
text: 'Login',
ui: 'confirm',
width: 150
}
]
},
{
autoDestroy: false,
xtype: 'container',
title: 'Register',
layout: 'vbox',
scrollable: true,
iconCls: 'add',
items: [
{
xtype: 'titlebar',
title: 'Register New User',
docked: 'top'
},
{
// register new user
xtype: 'fieldset',
id: 'reg-items-field-set',
items: [
{
xtype: 'textfield',
label: 'Email',
allowBlank: false,
name: 'reg_user'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'reg_password'
},
{
xtype: 'passwordfield',
label: 'Confirm Password',
name: 'reg_cpassword'
},
{
xtype: 'textfield',
label: 'User Name',
name: 'reg_user_name'
},
{
xtype: 'datepickerfield',
picker: {
yearFrom: 1975,
yearTo: 2005
},
label: 'DOB',
name: 'reg_dob'
},
{
xtype: 'selectfield',
label: 'Gender',
name: 'reg_gender',
options: [
{text: 'Male', value: 'male'},
{text: 'Female', value: 'female'}
]
}
]
},
{
xtype: 'container',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [
{
xtype: 'button',
id: 'register-button',
text: 'Register',
ui: 'confirm',
width: 200
},
{
xtype: 'spacer',
width: 50
},
{
xtype: 'button',
id: 'reset-button',
text: 'Reset',
ui: 'decline',
width: 200
}
]
}
]
}
]
}
});
Controller file
Ext.define('DemoApp1.controller.MainController', {
extend: 'Ext.app.Controller',
requires: [
'Ext.form.FieldSet',
'Ext.Button'
],
config: {
refs: {
loginButton: '#login-button',
regFieldSet: '#reg-items-field-set',
regNewUserButton: '#register-button',
regFormResetButton: '#reset-button',
loginUserFieldSet: '#login-user-field-set'
},
control: {
loginButton: {
tap: 'loginButtonTapped'
},
regFormResetButton: {
tap: 'regFormResetButtonTapped'
},
regNewUserButton: {
tap: 'regNewUserButtonTapped'
}
},
loginButtonTapped: function(self, e) {
console.log('loginButtonTapped');
},
regFormResetButtonTapped: function(self, e) {
console.log('regFormResetButtonTapped');
},
regNewUserButtonTapped: function(self, e) {
console.log('regNewUserButtonTapped');
}
}
});
on click on any button it logging the below
Uncaught TypeError: Cannot read property 'apply' of undefined
what wrong in it???
thanks in advance...
Your methods should not go in the config block. loginButtonTapped, regFormResetButtonTapped and regNewUserButtonTapped. They should come out one level into the class definition, because they are class methods, not configurations.
I have a sample login form. In that there is a controller, view and a model.I would like to validate the form. my Form panel id is 'formPanelLogin' and have to update the form record in the controller. but this code "formPanelLogin.updateRecord (teamModel);" can't work and error message like "updateRecord is not define".
Please give me an answer for this problem. my code will following..
//Controller
Ext.define('MyApp.controller.mvcController', {
extend: 'Ext.app.Controller',
config: {
refs: {
BtnSubmit: "#btnSubmit",
BtnCancel:"#btnCancel",
BtnPromoHome:"#PromotionsBtnHome",
BtnThirdBack:"#thirdBtnBack",
BtnSecondBack:"#btnUnderHoodService",
},
control: {
BtnSubmit:
{
tap: "onBtnSubmitTap"
},
BtnCancel:
{
tap: "onBtnCancelTap"
},
BtnPromoHome:
{
tap: "onBtnPromoHomeTap"
},
BtnSecondBack:
{
tap: "onBtnSecondBackTap"
},
BtnThirdBack:
{
tap: "onBtnThirdBackTap"
}
}
},
onBtnCancelTap: function (options)
{
//formPanelLogin.reset();
var teamModel = Ext.create('MyApp.model.MyModel'),
errors, errorMessage = '';
formPanelLogin.updateRecord (teamModel);
errors = teamModel.validate();
if (!errors.isValid()) {
errors.each(function (err) {
errorMessage += err.getMessage() + '<br/>';
}); // each()
Ext.Msg.alert('Form is invalid!', errorMessage);
} else {
Ext.Msg.alert('Form is valid!', '');
} // if
console.log("Cancel");
},
});
//view
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
layout:
{
type: 'card'
},
items: [
{
xtype: 'panel',
id: 'panelOuter',
layout:
{
type: 'card',
animation:
{
type: 'slide'
}
},
items: [
{
xtype: 'panel',
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'MVC',
items: [
{
xtype: 'button',
docked: 'left',
id: 'btnBack'
},
{
xtype: 'button',
docked: 'right',
id: 'btnHome'
}
]
},
{
xtype: 'formpanel',
docked: 'top',
height: 117,
id: 'formPanelLogin',
scrollable: true,
items: [
{
xtype: 'fieldset',
id: 'loginform',
items: [
{
xtype: 'textfield',
label: 'UserName',
name: 'userName',
labelWidth: '40%',
name: 'usernameField',
placeHolder: '...... Type here .......',
required: true
},
{
xtype: 'passwordfield',
label: 'Password',
labelWidth: '40%',
required: true
}
]
}
]
},
{
xtype: 'panel',
height: 45,
id: 'btnPanel',
items: [
{
xtype: 'button',
docked: 'right',
id: 'btnSubmit',
ui: 'action-small',
width: 85,
text: 'Submit'
},
{
xtype: 'button',
docked: 'right',
id: 'btnCancel',
ui: 'decline-small',
width: 85,
text: 'Cancel'
}
]
}
]}
]
},
});
//model
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields : [
{
name: 'userName',
type: 'string'
},
{
name: 'password',
type: 'string'
}
],
validations: [
{
field: 'userName',
type: 'presence',
message: 'User Name is required.'
}
]
}
});
I'm trying to implement a simple framework for an app. The idea is to create a background viewport type 'layout' with a north region containing the page header and an interchangeable center region.
When my app starts, a Login form is shown. If the user/password is ok, the form is destroyed and the main layout should appear. The main layout should insert a nested layout in its center region.
This is my background layout code:
Ext.define('DEMO.view.BackgroundLayout', {
extend: 'Ext.container.Viewport',
alias: 'widget.background',
requires: [
'DEMO.view.Main'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>'
},
{
xtype: 'mainview',
region: 'center',
forceFit: false,
height: 400
}
]
});
me.callParent(arguments);
}
});
The main layout is this:
Ext.define('DEMO.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.mainview',
requires: [
'DEMO.view.MyGridPanel'
],
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
console.log('bb');
Ext.applyIf(me, {
items: [
{
xtype: 'mygridpanel',
region: 'center',
forceFit: false
},
{
xtype: 'container',
height: 38,
forceFit: false,
region: 'north',
items: [
{
xtype: 'button',
height: 34,
id: 'btnLogout',
action: 'logout',
text: 'Logout'
}
]
}
]
});
me.callParent(arguments);
}
});
As you can see, the center region needs an xtype named "mygridpanel". This is the code for it:
Ext.define('DEMO.view.ui.MyGridPanel', {
extend: 'Ext.grid.Panel',
border: '',
height: 106,
title: 'My Grid Panel',
store: 'MyJsonStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Sales',
text: 'Sales'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
disabled: true,
id: 'btnDelete',
allowDepress: false,
text: 'Delete'
},
{
xtype: 'button',
disabled: true,
id: 'btnEdit',
allowDepress: false,
text: 'Edit'
}
]
}
]
});
me.callParent(arguments);
}
});
My problem is that when I call Ext.create('DEMO.view.BackgroundLayout', {}); it only shows the nested layout, and the background layout is hidden, also I get this error in Chrome's console:
Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
What I'm doing wrong?.
Thanks in advance,
Leonardo.