Can any one please help to make my label as hyperlink in Sencha EXT JS.
You can just tell the fieldLabel to be a link http://jsfiddle.net/EsppR/1/
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
renderTo: Ext.getBody(),
items: {
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}
});
Here is a solution of your problem: [hyperlink in Sencha EXT JS]: how to create hyper link in extjs4?
or you can add new event for your label:
Ext.onReady(function() {
var yourLabel = new Ext.form.Label({
id:'yourLabel',
text: 'http://your-link-here.com',
renderTo : document.body
});
Ext.getCmp('yourLabel').getEl().on('click',function(){
window.open("http://your-link-here.com");
});
});
As a plugin:
Ext.define('YourCompany.plugins.LinkedLabel', {
extend: 'Ext.AbstractPlugin',
url: undefined,
init: function (cmp) {
this.setCmp(cmp);
cmp.beforeLabelTextTpl = '<a href="' + url + '">';
cmp.afterLabelTextTpl = '</a>';
});
});
Use:
{
xtype: 'textfield',
fieldLabel: 'Linked label',
plugins: Ext.create('YourCompany.plugins.LinkedLabel', { url: '/yourUrl' })
}
Two ways:
//1st - set html for label
{
xtype: "label",
html: "bla bla?! <a href='http:/\tiny.cc/snir' target='_blank'>Press This Link!!!</a><br>"
},
//2nd - create a new component
{
xtype: 'component',
autoEl: {
tag: 'a',
href: 'http:\/tiny.cc/snir/',
target: '_blank',
html: 'tiny.cc/snir'
}
}
You can see my example here https://fiddle.sencha.com/#view/editor&fiddle/1kqh and inspect the differents.
Related
If a ext view route is used with anchor tag, clicking on that link always opens a new tab. This force realod entire ext app in new tab. Is there a way to force anchor tag or anchor in html to redire ct to that view instead within app
{
xtype: 'component',
autoEl: {
tag: 'a',
html: 'Some Action',
href: '#someroute'
class: 'link-some-action'
},
listeners: {
click: function(){
console.warn("I AM TRAPPED");
}
}
}
OR
{
xtype: 'box',
html: ' Saome Action ',
listeners: {
click: function(){
console.warn("I AM TRAPPED");
}
}
}
In both case as illustrated, clicking on element opens a new tab, hence forcing app to load again
in your case, you should add a listener to el, here is fiddle
Ext.define('Controller', {
extend: 'Ext.app.ViewController',
alias: 'controller.mycontroller',
onElClick:function(){
console.log("I AM FREE");
this.redirectTo("test")
}
});
Ext.create('Ext.panel.Panel', {
style: "border: 1px solid red",
height: 100,
controller:"mycontroller",
title: "test",
renderTo: Ext.getBody(),
items: [{
xtype: 'component',
autoEl: {
tag: 'a',
html: 'Some Action',
href: '#someroute',
class: 'link-some-action'
},
listeners: {
el: {
click: "onElClick"
}
}
}]
})
I am trying to find the best way to bind items to a textfield in my extjs project. I downloaded the data into a store with one record in the controller. How would I bind to this textfield from the one record? I would preferably bind in the view, not in the controller
You should read this guide to understand better what binding is
The best solution for you is bind the record on the viewmodel of the view, so:
textfield.setBind({
value:'{myRec.valueToRefer}'
})
viewmodel.set('myRec',record.getData());
If you want, you can also use a form to handle this, using form.loadRecord and giving to the textfield a name..
A tip:
set inside the viewmodel a value to null:
data:{
myRec:null
}
Set your record in the viewmodel after setting the bind to the textfield.
Other tip:
If you can, avoid using setBind and prefer to set the binding directly on textfield creation:
//WILL WORK BUT YOU CAN AVOID IT
textfield.setBind({
value:'{myRec.valueToBind}'
})
//YES
var textfield=Ext.create({
xtype:'textfield',
bind:{
value:'{myRec.valueToBind}'
}
});
Refer to Sencha documentation also
You can use bind config to bind the data or any other config for ExtJS component.
Bind setting this config option adds or removes data bindings for other configs.
For example, to bind the title config:
var panel = Ext.create({
xtype: 'panel',
bind: {
title: 'Hello {user.name}'
}
});
To dynamically add bindings:
panel.setBind({
title: 'Greetings {user.name}!'
});
To remove bindings:
panel.setBind({
title: null
});
In this FIDDLE, I have created a demo for biding. I hope this will help/guide you to achieve you requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
//defining Store
Ext.define('Store', {
extend: 'Ext.data.Store',
alias: 'store.gridstore',
autoLoad: true,
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: ''
}
}
});
//defining view model
Ext.define('MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myvm',
data: {
formdata: null
},
stores: {
gridstore: {
type: 'gridstore'
}
}
});
//Controller
Ext.define('MyViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myview',
onGridItemClick: function (grid, record) {
//Bind the form data for CLICKED record
this.getViewModel().set('formdata', record)
}
});
//creating panel with GRID and FORM
Ext.create({
xtype: 'panel',
controller: 'myview',
title: 'Binding Example',
renderTo: Ext.getBody(),
viewModel: {
type: 'myvm'
},
layout: 'vbox',
items: [{
xtype: 'grid',
flex: 1,
width: '100%',
bind: '{gridstore}',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
listeners: {
itemclick: 'onGridItemClick'
}
}, {
xtype: 'form',
flex: 1,
width: '100%',
defaults: {
anchor: '100%'
},
title: 'Bind this form on Grid item Click',
bodyPadding:15,
margin: '20 0 0 0',
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'first',
allowBlank: false,
bind: '{formdata.name}'
}, {
fieldLabel: 'Email',
name: 'email',
allowBlank: false,
bind: '{formdata.email}'
}, {
fieldLabel: 'Phone',
name: 'phone',
allowBlank: false,
bind: '{formdata.phone}'
}]
}]
});
}
});
Can't find out why its isn't working..
I'm trying create a custom panel for multiple uses.
Is it the way? Or am i totally wrong.
I'm a beginner in ExtJS, so i'll be happy to a little explain..
thanks
(i'm trying to run this code on the fiddle to see the immediate result - )
Ext.application({
name: 'Fiddle',
launch: function () {
var custom = Ext.define('Ext.BET', {
renderTo: Ext.getBody()
});
}
});
Ext.define('Ext.BET', {
extend: 'Ext.panel.Panel',
alias: 'widget.bet',
constructor: function (cnfg) {
this.callParent(arguments);
this.initConfig(cnfg);
},
config: {
collapsible: true,
frame: true,
bodyStyle: 'background-color: #FFFFFF',
layout: {
type: 'hbox'
},
items: [{
xtype: 'textfield',
textarea: focus,
id: 'tbx'
}, {
xtype: 'button',
id: 'btn'
}, {
xtype: 'button',
id: 'search'
}]
},
afterRender: function () {
var btn = Ext.getCmp('btn');
var tbx = Ext.getCmp('tbx');
var btn2 = Ext.getCmp('search');
var totalWidth = btn2.getWidth() + btn.getWidth() + tbx.getWidth();
this.setWidth(totalWidth);
},
onRender: function() {
this.callParent(arguments);
}
});
You should use Ext.create instead of Ext.define.Refer this fiddle.
I have tbar in grid panel. My example code like
tbar:[
{
xtype: 'form',
items: [{
xtype: 'filefield',
name: 'filefor',
labelWidth: 50,
allowBlank: false,
buttonConfig: {
text: 'up...'
}
}]
}
,{
text: 'add',
handler:function(){
var form = this.up('form').getForm(); // not working
form.submit({}); // not working
}
}
]
I can't get my form to submit. How can i do that thanks so much :).
The form is sibling of the add button. you may want to use .prev instead of .up to access the form
Here is the snippet that works
Ext.require([
'Ext.form.*',
'Ext.tip.*']);
Ext.onReady(function () {
Ext.QuickTips.init();
var f = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
bodyStyle: 'padding: 5px 5px 0 5px;',
defaults: {
xtype: 'textfield',
anchor: '100%',
},
html:'text',
tbar: [{
xtype: 'form',
items: [{
xtype: 'filefield',
name: 'filefor',
labelWidth: 50,
allowBlank: false,
buttonConfig: {
text: 'up...'
}
}]
}, {
text: 'add',
handler: function () {
//var form = this.prev('form').getForm(); // working at extjs4.0.2a
var form =this.ownerCt.down('form').getForm();// working at extjs 4.2.0
form.submit({});
}
}]
});
});
For a live demo, here it is the jsfiddle link .
var form = this.up('form').getForm(); // not working
form.submit({}); // not working
change to:
this.ownerCt.down('form').getForm();
Am new to sencha touch, my problem is i have a separate view to show a form panel by clicking on control event the form panel view will load, but when i click on the event nothing display on my screen. Just a blank screen to show..I dont know what am doing. The form panel is taken from sencha form panel tutorial
The following are my form panel view
Ext.define('WinReo.view.AddContact', {
extend: 'Ext.Container',
xtype: 'addcontact',
requires: [
'Ext.TitleBar'
//'Ext.Video'
],
config: {
layout:'fit'
},
initialize:function(){
console.log('inside initialize');
var formPanel = Ext.create('Ext.form.Panel', {
//xytpe:'formpanel',
fullscreen: true,
layout:'fit',
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
formPanel.setValues({
name: 'Ed',
email: 'ed#sencha.com',
password: 'secret'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
}
});
This is the controller event to show form panel view
onItemSwiped: function(list,index,target,record,e)
{
var addcontact= Ext.create('WinReo.view.AddContact');
Ext.Viewport.add(addcontact);
Ext.Viewport.setActiveItem(addcontact);
},
Just a simple task but am spending too much time to fix this one..please help me to solve this issue. Thanks in advance..
Your right about setActiveItem and you need to use it. because Ext.Viewport.add() only adds to viewPort not shows the view.
So only problem in your code is you created formPanel, but not added it in the AddContact View.
...........
// same code
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
this.add(formPanel); // add this line
}
});
See this fiddle