Related
I'm using xtype displayfield for fields which act as link and displayfield renders html ok. It works fine. I would like to use a same style for displayfield as for textfield (especially because of border).
Could you tell me the simplest way to achieve it? I've tried fieldCls, baseCls etc. with various prefixes but didn't find working solution.
Here my last test, could you tell me what's wrong with it?
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'right',
labelWidth: 150
},
renderTo: Ext.getBody(),
standardSubmit: true,
title: 'Form',
width: 400,
items: [
{
fieldCls: 'x-form-text',
fieldLabel: 'Displayfield with link',
name: 'field01',
value: 'Some text <a href=http://www.yoururl.com>www.yoururl.com</a>',
xtype: 'displayfield'
},{
fieldLabel: 'Textfield',
name: 'field02',
value: 'default',
xtype: 'textfield'
}]
});
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'right',
labelWidth: 150
},
renderTo: Ext.getBody(),
standardSubmit: true,
title: 'Form',
width: 400,
items: [
{
fieldBodyCls: 'x-form-trigger-wrap-default x-form-text x-form-text-default',
fieldLabel: 'Displayfield with link',
name: 'field01',
value: 'Some text <a href=http://www.yoururl.com>www.yoururl.com</a>',
xtype: 'displayfield'
},{
fieldLabel: 'Textfield',
name: 'field02',
value: 'default',
xtype: 'textfield'
}]
});
How to specify tags in the value of the textfield in ext js.
my code:
var myText = new Ext.form.TextField({
readOnly: true,
id: "key",
cls:"overflowText",
value: '<span style="color:red">'+name+'</span>',
});
This doesnt apply color to the value.How can i do it?
Use the fieldCls property, you shouldn't need the span.
Fiddle
// Style
<style>
.overflowText {
color: red;
}
</style>
// Code
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "FormLayout Panel",
layout: 'form',
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
fieldCls: 'overflowText',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}]
});
}
});
Maybe it happens because style rule is missing semicolon at the end? So it should be <span style="color:red;">
I have successfully implemented this slide navigation library. I can slide the main viewport in and out to reveal and hide the navigation on the left of the viewport.
However, I'm unable to find a way of hiding and showing the navigation via button click. How can I tie in my existing slide navigation into a button click action?
UPDATE:
My attempt to add a customized bar to Main.js was a matter of extending TitleBar in a class called CustomBar. I then used it via xtype in Main.js. The code below shows my Main.js code with configuration for the Slide Navigation library:
Ext.define('RT.view.Main', {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'main',
requires: [
'Ext.TitleBar',
// 'Ext.Video'
],
config: {
fullscreen: true,
// slideSelector: 'x-toolbar',
slideSelector: '',
containerSlideDelay: 10,
selectSlideDuration: 200,
itemMask: true,
/*slideButtonDefaults: {
selector: 'toolbar'
},*/
listPosition: 'left',
list: {
maxDrag: 300,
width: 200,
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Menu',
centered: false,
width: 200,
left: 0,
},
items: [{
docked: 'top',
xtype: 'searchfield',
placeHolder: 'search',
width: 180
}]
}
]
},
slideButton: true,
slideButton: {
selector: 'toolbar'
},
defaults: {
style: 'background: red',
xtype: 'container',
},
/****************************************************/
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'custombar',
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Messages',
xtype: 'messages',
iconCls: 'user',
},
{
title: 'Sections',
xtype: 'sections'
},
{
title: 'submenu#1',
html: 'submenu#1',
group: 'Group 2',
},
{
title: 'submenu#2',
html: 'submenu#2'
},
{
title: 'submenu#3',
html: 'submenu#3'
},
]
}
});
My customBar.js code is as follows:
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
// name: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
This customBar code is used by Views statically. My LIST components use a different solution for getting the NavigationBar and adding components to it to generate a similar looking bar as CustomBar.
I need to make a connection between my pre-existing LIST icon button from CustomBar.js with the Slide Navigation functionality - so I can drag or click the icon to show/hide the navigation menu.
UPDATE#2
Having followed your direction in your update below and in my previous question, the solution I implemented for placing my LIST back buttons into the same toolbar as my custom navigation no longer worked. The image below shows my results:
I had been successfully using the following code to detect the messages and sections list views, get the navigation bar and place my icons into the bar. My thinking was to then use a listener on the list icon to show/hide the menu. However, as there is no listener and just the slideButton configuration, my code is redundant:
Ext.define('RT.controller.BarGenerator', {
extend: 'Ext.app.Controller',
config: {
refs: {
messagesView: 'messages',
sectionsView: 'sections'
},
control: {
'sections': {
initialize: 'generateBarSections'
},
'messages': {
initialize: 'generateBarMessages'
},
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {
},
generateBarSections: function(list, record){
console.log('LOADING ICONS AND CUSTOMIZING BAR!');
navigationview = this.getSectionsView().getNavigationBar();
navigationview.add(
{
// name: 'BTNslidenav',
id: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
id: 'BTNuser',
iconMask: true,
iconCls: 'user',
ui: 'plain',
align: 'right'
}
);
},
generateBarMessages: function(list, record){
console.log('LOADING ICONS AND CUSTOMIZING BAR!');
navigationview = this.getMessagesView().getNavigationBar();
navigationview.add(
{
slideButton: {
selector: "custombar"
},
// name: 'BTNslidenav',
id: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
id: 'BTNuser',
iconMask: true,
iconCls: 'user',
ui: 'plain',
align: 'right'
}
);
}
});
The Ext.ux.slidenavigation.View comes with a slide button functionality.
You only need to specify where the button should be.
You can populate the items array of the Ext.ux.slidenaviagtion.View with containers. These containers have a property slideButton where you can define a selector which is used to find the component into which the button should be inserted.
items : [
{
xtype : 'container',
group : 'my first group',
slideButton :
{
selector : 'toolbar'
},
items :
[
{
xtype : 'toolbar',
itemId : 'start_toolbar',
title : 'first view',
docked : 'top'
},
{
xtype : 'start'
}
]
},
{
xtype : 'container',
group : 'my first group',
slideButton :
{
selector : 'toolbar'
},
items :
[
{
xtype : 'toolbar',
title : 'second view',
docked : 'top'
},
{
xtype : 'anotherview'
}
]
}
]
In the example the items array of the Ext.ux.slidenavigation.View holds 2 containers. A container always holds two components. A toolbar and the actual view I want to show. The slideButton config property defines that the button is inserted into a component with the xtype toolbar.
Update:
Thank you for providing some code. I have rearranged your code, so it fits my example.
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
First, I have removed your button from your custombar. The slide navigation will create the button for you.
Ext.define('RT.view.Main', {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
fullscreen: true,
containerSlideDelay: 10,
selectSlideDuration: 200,
itemMask: true,
listPosition: 'left',
list: {
maxDrag: 300,
width: 200,
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Menu',
centered: false,
width: 200,
left: 0,
},
items: [{
docked: 'top',
xtype: 'searchfield',
placeHolder: 'search',
width: 180
}]
}
]
},
slideButton: true,
/****************************************************/
slideButtonDefaults: {
iconMask: true,
iconCls: 'list',
ui: 'plain'
},
items: [
{
xtype: "container",
group: "first group",
title: 'Welcome',
iconCls: 'home',
slideButton: {
selector:"custombar"
},
items: [
{
docked: 'top',
xtype: 'custombar',
},
{
styleHtmlContent: true,
scrollable: true,
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
}
]
},
{
xtype: "container",
group: "first group",
title: 'Messages',
iconCls: 'user',
slideButton: {
selector: "custombar"
},
items: [
{
docked: 'top',
xtype: 'custombar',
},
{
xtype: 'messages'
}
]
}
]
}
});
Since the slide navigation will create the slide button for you, you can use slideButtonDefaults to customize it.
The items array of the slide navigation is the important part.
It contains now two containers. That means you get two entries in the side navigation. Each of these container contain your custombar and the view you actually want to show when one taps an entry in the side navigation.
Each of the wrapping container define where the slide button will be placed in its child views. It's done by
slideButton: {
selector: 'custombar'
}
And that's it.
Update#2
This happens because you have multiple toolbars now. The testing-toolbar is inserted into every container that will be displayed by the slide navigation. The other toolbar comes from the navigation view which is hosted inside the slide navigation container.
The are some ways to "fix" it.
First you could hide the navigation view toolbar when it comes active and your first view inside the navigation view is shown. It's important that this view is a view that will never have a logical predecessor. So there will never be any reason to have a back button at that level. When you start navigating in the navigation view and you push more and more views to it you can hide the 'testing'-toolbar. The question is: is it important that you have the slide button in every child view or is it good enough to have it on the top view only. Consider this: to many buttons in a toolbar is quite to much and might confuse the user. Opening the slide navigation is still possible by swiping.
Or you don't use your custombar at all but customize the titlebar of the navigation view. The items array of your slide navigation would look like this:
items: [
{
xtype: "container",
group: "first group",
title: 'Welcome',
iconCls: 'home',
slideButton: {
selector:"titlebar"
},
items: [
{
xtype: "navview"
}
]
},
{
xtype: "container",
group: "first group",
title: 'Messages',
iconCls: 'user',
slideButton: {
selector: "tilebar"
},
items: [
{
xtype: 'navView2'
}
]
}
]
But be aware of having two buttons in the navigation titlebar (docked to the left) when you start pushing views.
Here my code in sencha touch, i tried to add 2 button horizontaly, Means one to other.No,luck its keep on coming one in upper side and the other one lower.
var profilese = {
standardSubmit : false,
items: [tab,{
xtype: 'button',
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'DELETE',
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}]
};
How to set button in a same row.Please help me to sort it out.
I'm not sure what tab is in your code, but what you need to get the buttons aligned horizontally is an hbox layout:
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'button',
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}
]
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.HBox
In ExtJS point, there must be a container as parent to hold the children(Buttons). And the set the layout config as "hbox".
The code must look like,
items:[
tab,
{
xtype:'container',
layout:'hbox',
items:[
{
xtype:'button1'
},
{
xtype:'button2'
}
]
}
]
layout: {
type: 'column'
},
items: [
{
xtype: 'button',
columnWidth: 0.5,
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'button',
columnWidth: 0.5,
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}
]
I hope this is my last question of today. I found a nice actioncolumn option in designer 2. I add one to my grid and it looks like this:
xtype: 'gridpanel',
title: 'Reports',
forceFit: true,
store: 'ReportsStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Type',
text: 'Type'
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description'
},
{
xtype: 'actioncolumn',
dataIndex: 'Name',
items: [
{
handler: function(view, rowIndex, colIndex, item, e) {
console.log(row, col);
},
altText: 'Run report',
iconCls: 'runReport'
}
]
}
],
viewConfig: {
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
iconCls: 'addReport',
text: 'Add report',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
But there is nothing happening. What i want is that there is an button/icon and when you click on it it will open a ext.window with the reportId from that row. I can't find how i do this with designer.
I don't see an icon now so there is nothing yet to click on. What do i miss?
Thanks,
TJ
You miss listener for this button:
add something like that into your item definition:
handler: function(grid, row, col) {
console.log(row, col);
}