We Keep Coding

Showing ValueField(Id) in the next page in Extjs ComboBox Pagination

I have the ExtJs form combo which shows the values in the dropdown as checkbox and the value to select. I have used the pagination to list all the values with no of pages. In the first page it is showing 'age' in the dropdown but when click for the next page it is displaying id's of the selected entries from the first page.
Ext.create('Ext.form.ComboBox', {
id: 'ageComboPickerReport',
name: 'ageComboPickerReport',
maxHeight: 150,
margin: '0 5 0 0',
width: 150,
emptyText: "Select tags",
listConfig: {
getInnerTpl: function (displayField) {
return '<div class="x-combo-list-item"><img src="" class="chkCombo-default-icon
chkCombo" /> {' + displayField + '}</div>';
},
autoEl: { 'q-name': 'rpt-age-criteria-list'
}, labelAlign: 'top',
pageSize: 25,
displayField: 'age', valueField: 'id', forceSelection: true, store: me.ageStore,
//Disable Typing and Open Combo
onFocus: function () {
if (!this.isExpanded) {
me.ageStore.load()
this.expand()
} this.getPicker().focus();
}
}),
could any tell me how to show the 'age'(displayField) instead of showing valueField(id)?

extjs 3 combo-box lable width and input field width

I need to get combo-box label to a one line. I'm using extjs3.
Code :
var orq_type_button= new Ext.form.ComboBox({
id:'testa',
fieldLabel: 'Organization Type',
editable:false,
emptyText:'Empty',
selectOnFocus:true,
forceSelection: true,
allowBlank: false,
width: 350,
labelWidth: 330,
});
var assignConfig_window_formPanal = new Ext.form.FormPanel ({
id:'assignConfig_window_formPanal',
frame:true,
bodyStyle:'padding:5px 5px 0',
height:110,
buttonAlign:'center',
items: [orq_type_button],
buttons: [ {text: 'Save'} ,
{text: 'Cancel',
handler : function() {
assignConfig_window.hide();
}
}
]
});
Screenshot :

labelWidth is a property of FormPanel or FieldSet, not for combobox. Move it to your form panel so that it can work.

You can use labelStyle config. Please check this link.
https://www.sencha.com/forum/showthread.php?37686-Setting-a-combobox-fieldLabel-width-to-include-long-labels

extjs4 replace button with an image issue

So I am trying replacing an extjs button with an image and have it display some tooltip.
The thing is I just want to display the image and I dont want the background of the extjs button.
Here is my code below.
To get an idea of what I am talking about , here is the js fiddle:
http://jsfiddle.net/nCkZN/7/
CSS:
.question {
background-image: url(../www/css/slate/btn/question.png) !important;
background-repeat: no-repeat;
}
Javascript:
{
xtype: 'button',
iconCls: 'question',
tooltip: "<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
padding: '2 6 2 7',
width: 20,
height: 24
}
EDIT:I replaced the button with text and that shows only the image. But it does not dispaly the tooltip.
{
xtype: 'text',
cls: 'question',
tooltip: "<b>read-only</b>:Read-only users will have read only access to all pagess ",
height: 20,
padding: '12 6 2 7'
}

You can modify the look of the button through CSS http://jsfiddle.net/nCkZN/10/
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
cls: 'my-btn', // Add this so you can style the button
iconCls:'questionIcon',
tooltip:"<b>read-only</b>:Read-only users will have read only access to all pages<br> ",
padding: '2 6 2 7'
}]
});​
CSS
.questionIcon {
background-image:url(http://www.myimage.com/pic.png) !important;
background-repeat: no-repeat;
}
.my-btn {
border-radius: 0;
background-image: none;
border: 0;
}
you can alternatively use a regular Ext.Img and add a tooltip to it. Seems cleaner than using a button when you don't want a button. http://jsfiddle.net/nCkZN/15/
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'image',
src:'http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif',
padding: '2 6 2 7',
listeners: {
render: function(cmp) {
Ext.create('Ext.tip.ToolTip', {
target: cmp.el,
html: "<b>read-only</b>:Read-only users will have read only access to all pages<br> "
});
}
}
}]
});​
What you really seem to be after is a way to add a tooltip to any component. Here's a plugin to do it.
Ext.define('Ext.ux.Tooltip', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.ux-tooltip',
/**
* #cfg html The text to put into the tooltip
*/
init: function(cmp) {
var me = this;
cmp.on('render', function() {
Ext.create('Ext.tip.ToolTip', {
target: cmp.el,
html: me.html
});
});
}
});
Now it's easy to add a tooltip to any component http://jsfiddle.net/nCkZN/17/
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'image',
src:'http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif',
padding: '2 6 2 7',
plugins: {
ptype: 'ux-tooltip',
html: '<b>read-only</b>:Read-only users will have read only access to all pages<br> '
}
}]
});
​

background-image: url(../www/css/slate/btn/question.png) !important;
First problem there is you need single quotes around your url.
In your jsfiddle, changed to this:
.question{
background-image:url('http://www.southampton.ac.uk/isolutions/computing/elearn/blackboard/small_pen.gif');
background-repeat: no-repeat;
}​
Second, you probably don't want to specify an iconCls if you don't actually have any text, you're better off just passing a cls. I think the iconCls is if you pass an icon in as a config.

Sencha static top and bottom bars for page changes

I've been learning sencha touch 2.0 over the last 2 weeks and i've stumbled onto two problems. What i would like to do is have a static top bar and bottom bar on my page and let the dynamic content be controlled by buttons placed at the bottom dock. I've spent 4 hours on trying to get this to work the way i want to, i'm almost there but i need a little guidance.
My first problem is that i want to add an image to the static top dock. The code that was suggested in another form does not work.
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
This code doesnt give any errors but it also doesnt show the required image. The image is 60px by 30px
The second problem i'm having is that i would like to add icons to my bottom dock so that when the user click on them, the page would change to show a new page. I have a form with 3 fields that i would like to link to one of the icons on the bottom dock so when the icon is clicked, the form would show. Here is the full code:
Ext.setup({
phoneStartupScreen : 'resources/images/icon.png',
icon : 'resources/images/Homescreen.png',
glossOnIcon : false,
onReady : function() {
var topBar = new Ext.BoxComponent(
{
xtype: 'box',
autoEl: {tag: 'img', src:'/resources/icons/icon.png'}
}
)
var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}
var form = new Ext.form.FormPanel({
items:
[
{
xtype: "textfield",
name: "name",
label: "Name",
placeHolder: "your name here"
},
{
xtype: "emailfield",
name: "email",
label: "Email",
placeHolder: "you#example.com"
},
{
xtype: "urlfield",
name: "url",
label: "Url",
placeHolder: "http://www.example.com"
}
]
})
var searchPageContent ={
html:'This is a test for search page'
}
var userPageContent ={
html:'This is a test for user page'
}
var dockedItems = [
{
xtype : 'toolbar',
dock : 'top',
items : topBar
},
{
xtype: "toolbar",
dock: "bottom",
items: [
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "favorites",
items: form
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "search",
items: searchPageContent
},
{
xtype: 'spacer'
},
{
iconMask: true,
iconCls: "user",
items: userPageContent
},
{
xtype: 'spacer'
},
]
}
]
new Ext.Panel({
id : 'buttonsPanel',
fullscreen : true,
dockedItems : dockedItems
});
}
});
as mentioned before, i have been able to create the static top and bottom bars but my image does not work in my top bar, which is my first problem, and when i click one of the 3 buttons, nothing happens; i would like my form to be displayed when i click my favorites button but nothing happens. Where have i gone wrong?
Thank you

After a few days of wrestling with sencha, i found an example that almost had what i wanted so modified it and it worked out exactly the way i wanted. I now have a static top bar and a static bottom bar with page icons such that when i click the page icons, the main content scrolls and the new page is displayed.
Ext.setup({
onReady: function() {
var topBar = new Ext.BoxComponent({
layout: 'hbox',
html:
'<img src="resources/icons/icon.png" height="30", width="48"/>',
flex: 1,
style:{
textAlign: 'center'
}
})
var dockedItems = [
{
//this creates the top bar, places it at the top of the page and gives it a background image
xtype : 'toolbar',
dock : 'top',
style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;',
items : topBar
}
]
// Sub-page sections
// Main portion of the page, which includes top toolbar and content
var welcome = new Ext.Panel({
items: [{
html: 'this is the welcome screen'
}],
title: "Welcome",
iconCls: "welcome",
});
var search = new Ext.Panel({
items: [{
html: 'this is the search screen'
}],
title: "Search",
iconCls: "search",
});
// This is the outer panel with the bottom toolbar
var wrapper = new Ext.TabPanel({
fullscreen: true,
tabBar: {
dock: 'bottom',
style: 'background:#8a9cB2;',
layout: {
pack: 'center'
}
},
items: [
welcome,
search,
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
],
dockedItems: dockedItems
});
}
});

How to completely hide the dockedItems toolbar

I'm able to hide items among the dockedItems of a TabPanel, but am wanting to temporarily hide the entire dock, because the toolbar itself still takes up space and the rest of the content does not fill the screen.
So far, I do like so:
myApp.views.productList.dockedItems.items[0].removeAll(true);
myApp.views.productList.doComponentLayout();
Alternatively:
myApp.views.productList.getComponent('search').removeAll(true);
myApp.views.productList.doComponentLayout();
But neither removes the dockedItems toolbar itself.
I've even tried to give the dockedItems individually and collectively an id: to remove the whole component, but without luck. I've also tried moving the toolbar in question out from the docked items and into the items: property of the containing panel, but this breaks other things in my app that I'd rather not change at present.
Any clues on how to do this?

If I understand you correctly you want to temporally remove tabBar from a tabPanel. I was able to accomplish this through giving and id to my tabBar and then using removeDocked and addDocked methods. I'm new to sencha-touch so most likely there is a better way of doing this
The code below removes tabBar from tabPanel and then adds it back again.
Ext.setup({
onReady: function() {
var tabpanel = new Ext.TabPanel({
ui : 'dark',
sortable : true,
tabBar:{
id: 'tabPanelTabBar'
},
items: [
{title: 'Tab 1',html : '1',cls : 'card1'},
{title: 'Tab 2',html : '2',cls : 'card2'},
{title: 'Tab 3',html : '3',cls : 'card3'}
]
});
var paneltest = new Ext.Panel({
fullscreen: true,
dockedItems:[
{
xtype: 'button',
text: 'Disable TabBar',
scope: this,
hasDisabled: false,
handler: function(btn) {
console.log(btn);
if (btn.hasDisabled) {
tabpanel.addDocked(Ext.getCmp('tabPanelTabBar'), 0);
btn.hasDisabled = false;
btn.setText('Disable TabBar');
} else {
tabpanel.removeDocked(Ext.getCmp('tabPanelTabBar'), false)
btn.hasDisabled = true;
btn.setText('Enable TabBar');
}
}}
],
items:[tabpanel]
});
paneltest.show()
}
})

в dockedItems добавить button, которая будет обращаться к элементу panel.dockedItems и изменять/скрывать сам dockedItems
function f_create_accord(P_el_id, P_el_params) {
P_el = Ext.create
(
'Ext.panel.Panel',
{
id: P_el_id
, border: false
, x: P_el_params.left
, y: P_el_params.top
, id_el: P_el_params.id_el
, layout: 'accordion'
, dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
P_el_id: P_el_id,
xtype: 'button',
text: 'добавить',
}, {
id_el: P_el_id,
xtype: 'button',
text: 'скрыть',
vision: true,
listeners: {
click: function (el, v2, v3) {
if (el.vision) {
Ext.getCmp(el.id_el).dockedItems.items[0].setHeight(5);
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[0].hide();
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[1].setWidth(Ext.getCmp(el.id_el).getWidth());
el.vision = false
}
else {
Ext.getCmp(el.id_el).dockedItems.items[0].setHeight('15px');
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[0].show();
Ext.getCmp(el.id_el).dockedItems.items[0].items.items[1].setWidth(60);
el.vision = true
}
// Ext.getCmp(el.id_el).dockedItems.items[i].hide();
}
}
}]
}]
}
);
P_el.setStyle('position', 'absolute');
P_el.setStyle('box-shadow', ' 0px 0px 0px 1px green');
P_el.setStyle('background', 'border-box');
return P_el;
}