I have created an app with some views and also there is a list button on the top left corner to display and hide list on tap event.
some how I am able to hide it on tab but don't know how to display it again. By default it should be hidden but on tap of that button it should hide and show it self depending on current property.
iconCls: 'list',
iconMask: true,
ui: 'plain',
handler: function() {
Ext.getCmp('ext-ListNavigation-1').hide();
}
And list view code
Ext.define('ov_app.store.NavigationItems', {
extend: 'Ext.data.Store',
config:{
model: 'ov_app.model.Items',
data:[
{ items:"Services"},
{ items:"Solutions"},
{ items:"About Us"},
{ items:"Why Singapore"},
{ items:"Contact Us"}
]
}
});
the user inter phase looks something like this
As you can see i what to hide and show this (services,solution, etc.. )
on tap of the list button above the list.
var list = Ext.getCmp('ext-ListNavigation-1');
if (list.isHidden()) {
list.show();
}
else {
list.hide();
}
Related
I have a Kendo UI grid with inline editing. I need to hide update button when edit is clicked.
{
command: [
{ name: "edit" },
{
name: "update",
click: function (e) {
savedata();
},
},
{ name: "destroy" }
],
title: " ",
width: 140,
attributes: { style: "text-align: center; color:Blue" },
},
I dont think that kendo from box have that behavior.
What can you do:
In edit command add onClick handler where you will hide other buttons:
in event arguments e there always some grid row data using which you can find current row with selector or may be just using closest
Update button in kendo always have class k-grid-update, find it and hide
im faceing a weird issue here,
i have a viewport - borderlayout,
my west region extends tab.panel, in the first run i have components added to the west region as tabs,
one container has a gridpanel in it, removing this container from the west region and adding it back work perfectly BUT, the grid inside it is not functional anymore, i cant select and click,listeners are not working
here is how im adding panels
thisControl.add({
title: title,
xtype: widgetName,
//items:[{xtype: widgetName}],
closable: true,
//autoScroll: true,
listeners: {
'beforeclose': function(pnl, eOpts) {
if (pnl.closeMe) {
pnl.closeMe = false;
return true;
}
Ext.Msg.show({
title: 'Close confirmation',
msg: 'Really close? <br />It will delete all related Information/Windows and Map Results',
icon: Ext.Msg.QUESTION,
buttons: Ext.Msg.YESNO,
animateTarget: this,
callback: function(btn) {
if ('yes' === btn) {
pnl.closeMe = true;
//console.log('closing..' + widgetName);
_this.ClosePanelSetup(pnl.xtype)
_this.getPnlWestPanel().remove(pnl, true);
WSAVL.app.getController('WSAVL.controller.Main.WestPanel.FunctionsGridPanelWindow').DeSelectRow(pnl.xtype);
}
}
});
return false;
},
close: function(panel, eOpts) {
console.log('Closing..');
}
}
});
and im removing the panels like that
_this.getPnlWestPanel().remove(pnl,true);
pnl.removeAll(false);
after re-adding the removed container, the gird's selection is never clear as if it is still loading the old one, and all listeners are not working and i cant select rows
thank you for any help/suggestions
In Innerdata.js, i have a a tag and on tap event i navigate it to the Group.js.
Gruop.js contain some html.I try to add here navigation bar with back button. Here the only Navigation bar is display no back button. Now this is where I fall down, I can't figure out why the Back button is not display.
I am trying to add Back button in navigation bar in Group.js page so when i click this button i navigate to the Inner.js page.so what is the problem here?
Inner.js:
Ext.define('chat.view.Inner', {
extend: 'Ext.Panel',
xtype:'Inner',
config: {
items: [
{xtype:'Innerdata'}
]
}
});
Innerdata.js:
Ext.define('chat.view.Innerdata',{
extend:'Ext.Panel',
xtype:'Innerdata',
config: {
items: [
{
html:'<a class="groupimg"><img src="stylesheets/images/groupchat.png"/></a>',
listeners: [
{
element: 'element',
delegate: 'a.groupimg',
event: 'tap',
fn: function() {
console.log('One!');
Ext.Viewport.setActiveItem(Ext.create('chat.view.Group'));
}
}
]
},
]
}
});
Group.js:
Ext.define('chat.view.Group', {
extend: 'Ext.navigation.View',
//extend: 'Ext.Panel',
xtype:'Group',
config:{
items: [
{html:'<div>Hello Hello Hello Hello</div>'}
]
},
onBackButtonTap:function(){
this.callParent(arguments);
}
});
here is the screen shot of Group.js page, i am trying to add Back button in Blue bar.
I believe there is a misuse of Ext.navigation.View in your code. Please don't use it in your situation.
Here are some explanations and instructions on how you can fix this problem:
If a view, says Group.js, is a subclass of Ext.navigation.View, it works according to push/pop pattern. Please see an example here: http://docs-origin.sencha.com/touch/2.3.0/#!/api/Ext.navigation.View. That's why a navigatioin view, which you applied to Group.js, should never have a back button on the top and very first screen.
So, there's no reason to use navigationview in this case. You just need to use a simple Ext.Container instead. So change your parent class of Group.js to Ext.Container. After that, add a toolbar on the top, add the back button to it and bind a handler.
Ext.define('chat.view.Group', {
//extend: 'Ext.navigation.View',
extend: 'Ext.Container',
xtype:'Group',
config:{
items: [
{xtype: 'toolbar',
docked: 'top',
items: [
{xtype: 'button',
text: 'Back',
ui: 'back',
handler: function(){Ext.Viewport.setActiveItem(Ext.create('chat.view.Inner'));}}
]}
{html:'<div>Hello Hello Hello Hello</div>'}
]
},
});
I was wondering how to ovverride the back button on a navigation view. I tried using onBackButtonTap but it doesnt seem to work http://www.senchafiddle.com/#8zaXf
var view = Ext.Viewport.add({
xtype: 'navigationview',
onBackButtonTap: function () {
alert('Back Button Pressed');
},
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,
//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
//when someone taps this button, it will push another view into stack
view.push({
//this one also has a title
title: 'Second View',
padding: 10,
//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//and when you press this button, it will pop the current view (this) out of the stack
view.pop();
}
}
]
});
The fiddle you've mentioned works well in my local project on my machine. For some reason, it doesn't work on fiddle site. Try running it on your local project.
Still instead of using onBackButtonTap config, it's good to extend Ext.navigation.View class and override onBackButtonTap method. That way you'll have more control over whole components. You'd also like to override other configs as well. Here's what I'd use -
Ext.namespace('Ext.ux.so');
Ext.define('Ext.ux.so.CustomNav',{
extend:'Ext.navigation.View',
xtype:'customnav',
config:{
},
onBackButtonTap:function(){
this.callParent(arguments);
alert('back button pressed');
}
});
the line this.callParent(arguments) will allow component to behave in default way + the way to wanted it to behave. And if you want to completely override the back button behavior you can remove this line. Try doing both ways.
To use this custom component, you can use -
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
var view = Ext.create('Ext.ux.so.CustomNav', {
fullscreen: true,
items: [{
title: 'First',
items: [{
xtype: 'button',
text: 'Push a new view!',
handler: function() {
//use the push() method to push another view. It works much like
//add() or setActiveItem(). it accepts a view instance, or you can give it
//a view config.
view.push({
title: 'Second',
html: 'Second view!'
});
}
}]
}]
});
}
Give this a shot. It'll work for you yoo.
I have small requirement i.e. PDFViewer in sencha touch, default paging toolbar is hidden.Once we click on pdf document the paging toolbar is showned, remaining time it is hidden.Here my problem is paging toolbar is not showned and hidden.
I tried the following code.Can you please suggest me.
Here is my code
samplePdf = {
xtype : 'pdfpanel',
id: 'pdfViewer', src :'http://cdn.mozilla.net/pdfjs/tracemonkey.pdf',
scrollable: true,
hidePagingtoolbar: false,
listeners: {
tap: {
fn: function() {
paging = Ext.getCmp('pdfViewer');
if(samplePdf.hidePagingtoolbar==false){
hidePagingtoolbar:true
//Ext.getCmp('pdfViewer').hidePagingtoolbar.hide();
}
else{
hidePagingtoolbar: true;
}
},
element: 'element'},}};
Thanks,
Rajasekhar.
I suggest using the "getter/setter" of the "HidePagingtoolbar" object e.g.
listeners: {
tap: {
fn: function() {
paging = Ext.getCmp('pdfViewer');
paging.setHidePagingtoolbar(!paging.getHidePagingtoolbar());
}
}
}
That should toggle the HidePaggingToolbar flag.