Sencha static top and bottom bars for page changes - javascript

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
});
}
});

Related

How can I handle the exception "cannot call method getRange of null" in ExtJs?

I've searched the net for answer but didn't find anything. Hope you can help.
So I am relativly new to extJs. I have a navigation bar on the left. When I press the first button there, a new window opens, which contains a table and loads its data automatically. The first time it works perfect but when I close the window and open it again I get the error "cannot call method getRange of null".
If I open the second window (when I click the other button in my navigation bar), I have 4 tabs, which contain a table each. Each Tab has a toolbar with buttons (create, change, etc.). Here happens the same thing as by the first window.
I can also print those tables as a List and the first time works fine, but when I cancel the print action I get the error again.
I made sure that all buttons and tables have a different reference, so I really don't know what this could be.
Any ideas?
I add my panels, which will open the new windows here:
items: [
{
xtype: 'tabpanel',
region: 'center',
items: [{
// 1. Tab
xtype: 'componentTap-panel',
title: UMA.Locale.rm.component.componentTitle,
id: 'componentTab'
}, {
// 2. Tab
title: UMA.Locale.rm.componentGroup.componentGroupTitle,
xtype: 'componentGroupTap-panel',
id: 'componentGroupTab'
}, {
// 3. Tab
title: UMA.Locale.rm.componentTemplateTitle,
xtype: 'componentTamplate-panel',
id: 'componentTemplateTab'
},
{
//4.Tab
title: UMA.Locale.rm.inventoryTitle,
xtype: 'inventoryTab-panel',
id: 'inventoryTab'
}
]
}
]
When the window opens I add my table and toolbar:
items: [{
xtype: 'toolbar',
region: 'north',
reference: 'componentToolbar',
items: [{
text: UMA.Locale.rm.buttonCreate,
action: 'createComp'
}, {
text: UMA.Locale.rm.buttonChange,
action: 'changeComp'
}, {
text: UMA.Locale.rm.buttonMove,
action: 'moveComp'
}, {
text: UMA.Locale.rm.buttonDelete,
action: 'deleteComp'
},{
text: UMA.Locale.rm.buttonPrint,
action: 'print',
margin: {
left: 8
}, {
xtype: 'componentTable-panel',
region: 'center'
}, {
xtype: 'componentsFilter-panel',
width: 300,
region: 'east'
}]
and then autoload my table:
items:[{
xtype: 'filtergrid',
reference: 'componentGrid',
paging: true,
hideHeaders: false,
region: 'center',
selModel: new Ext.selection.RowModel({
mode: "MULTI"
}),
store: {
model: 'Component',
autoLoad: true
},
columns: [{ ...
As Sergey Novikov mentioned that getRange() is a store method.
I also faced the same error for my grid's store and after some review again and again I found that whenever I close the tab and reopen it again I am getting two instance of grid's view (which can be checked by grid.getView()) and then I reached a conclusion that whenever the grid is creating the second time the selection model of grid view is having two instances because of I am using the code for selModel as new Ext.selection.CheckboxModel({
showHeaderCheckbox: true,
width: 50,
mode: 'MULTI'
})
then I changed the code for selModel as
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox: true,
width: 50,
mode: 'MULTI'
}
and the error is gone for me.
Hope this will help you. :)
Use the Object() constructor to test whether the object is one of three subtypes:
null object
object object
array object
For example:
function foo() { return {"hi":"bye" } }
function bar() { return null }
function baz() { return [1,2,3] }
function testObject(myObject)
{
if (Object(myObject).hasOwnProperty("0") )
{
/* Call getRange */
return 'yes';
}
else
{
/* throw an exception */
return 'no';
}
}
console.log(testObject(foo()), testObject(bar()), testObject(baz()) );

Extjs Scroll to position inside tabPanel

I have a window, containing a tabPanel, this tabPanel has 4 tabs.
I wanted to write down something like user manual so I created several panels as blocks, each panel contains some text and pics.
from another button, I want to scroll to a particular postiton in that tab. How can I do it? here is my structure, and let's say I want the button to open the first tab, scrolling to the third panel (id:here).
tabPanel:
var tabs = Ext.createWidget('tabpanel', {
id: 'myTabs',
header: false,
activeTab: 3,
closable: true,
defaults:{ autoScroll:true },
items: [
{
title: 'first',
itemId: 'firstTab',
items: [
{
xtype: 'panel',
html: text39,
cls: 'layout_text1'
},
{
xtype: 'panel',
html: text40,
cls:'layout_subtitle'
},{
xtype: 'panel',
id: 'here',
html: text41,
cls: 'layout_text2'
}]
});
window:
var UMwindow = new Ext.Window({
id: 'myWindow',
name: 'userManual',
closable: true,
floating: true,
width: 900,
height: 600,
items : myTabs,
}).show();
I managed to open the window then activating the first tab using: Ext.getCmp('tabs').setActiveTab('firstTab'); but then I couldn't figure out how to scroll down to the position i need "third panel in my example". do I have to add property to the panel such as position or something?
I would gladly help but I'm unable to get a working jsfiddle demo out of this. I imagine that what you are trying to do requires firing setActiveTab for the tab panel then jumping to the item you would like to show, using that item's offset.

extjs viewport inside tabpanel

Good day, I am extjs newbie, I am using extjs 3, I had problem with my layout,I have the tabpanel and inside of the tab 1 will be the viewport, and the tab 2 is just a simple content, but when i click tab2, the viewport doesnt disappear, supposed to be the viewport is only at tab 1 or first tab. Below are my code, Please help, what if there is something wrong with my codes.
var Tabs;
var chatUi;
var content = "centerpanel";
var viewport1 = new Ext.Viewport({
//id: 'chatUiLayout',
layout: 'border',
//renderTo : 'liveChatTextLiveHelp',
items: [{
width: 150,
region: 'east',
title: 'east'
}, {
region: 'center',
title: 'center'
}]
});
Tabs = new Ext.TabPanel({
id: 'liveChatTextLiveHelp',
renderTo: 'div-live-chat',
activeTab: 0,
//region: 'center',
//hieght: 200,
plain: true,
items: [{
title: 'Live help',
items: [ //viewport1
],
html: "<div id='" + content + "' class='90pers' ></div>"
}, {
title: 'Tab 2',
html: "tab 2 content"
}
],
scope: this,
listeners: {
afterrender: function () {
viewport1.render(content);
},
scope: this
}
});
Viewports are special containers that represent the entire browser window. They will always render themselves to the body, making them bad candidates for being inside something else. Instead of a viewport you should try a panel or container instead.
You are probably looking for a border layout inside tab 1, similar to Windows with Layouts example.
Viewport cannot be hidden as it is bound to the browser window.

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;
}

Ext js FormPanel is not showing panel items when toolbar is present

I seem to be having a weird issue here. An extended component has the following code:
MyApp.panels.RelationshipDetails = Ext.extend(Ext.FormPanel, {
closable: true,
relationshipId: null,
documentId: null,
title: 'Relationship',
initComponent: function () {
if (!this.verifyRequiredData()) {
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
return;
}
// Build components
this.tbar = this.buildToolbar();
this.items = this.buildDetailItemArray();
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
},
verifyRequiredData: function () {
// Verification code here
},
buildDetailItemArray: function () {
return [{
xtype: 'fieldset',
title: 'Details',
collapsible: true,
autoHeight: true,
items: [{
xtype: 'hidden',
name: 'Id'
}, {
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name'
}, {
xtype: 'textfield',
fieldLabel: 'Description',
name: 'Description'
}, {
xtype: 'button',
text: 'Save',
name: 'saveButton'
}]
}];
},
buildToolbar: function () {
return new Ext.Toolbar({
// Toolbar Config
});
}
});
The issue is that when this panel renders, the toolbar is the only thing that renders. Through debugging I can see that BuildDetailItemArray() is being called correctly and returning the correct result.
It gets even weirder when I comment out the this.tbar = line, because when the toolbar is not present, the fieldset and field renders correctly. This occurs even if I extend Panel instead of FormPanel. I also tried abstracting out the form fields into it's own component, and the same thing occurs.
Anyone have any idea why this doesn't seem to work?
What sort of layout are you trying to put this panel into? Also, are you setting a height for this panel?
Often, if you aren't specifying a height for the component to be added (in your case, this panel), or you're not setting an anchor if using an AnchorLayout, component content won't be shown, but the toolbar still will.
It'd be good to know the context of this panel in your overall layout.

Categories