I'm using the component of SenchaTouch NavigationView.
The problem I have is I can not define the title of my view dynamically.
This is the code I'm using
onMyList: function(dataview, index, target, record, e, options) {
var myScreen = this.getMyScreen();
var model = Ext.getStore('Example').getAt(index);
dataview.up('navSample').config.title = model.data.Nombre;
dataview.up('navSample').push(myScreen);
},
First you have to upgrade Sencha Touch to at least 2.0.1.
than you could use:
var navbar = navigationView.getNavigationBar();
navbar.setTitle('My cool title');
Cheers, Oleg
Related
How do you maintain the previous scroll position after a post using asp.net core 3.1 MVC (web application) and razor views?
How do you do this across the site?
I saw this: ASP.NET MVC3 Razor - Maintain scroll position on postback - but those did not work for me.
First, Create a base view model that all other models will inherit
public class BaseViewModel
{
public int ScrollPosition { get; set; }
}
All view models that are bound that will need to remember the previous scroll position will inherit from this BaseViewModel
Second, Add a hidden input to your form used for posting:
#using(Html.BeginForm("SomeAction", "SomeController", FormMethod.Post)
{
#Html.HiddenFor(x => Model.ScrollPosition)
....
}
Third, inside your post method on the backend set a value to TempData:
TempData["ScrollPosition"] = Model.ScrollPosition;
Fourth, when redirect after post, set this value to your Model for binding in your view:
MyModel.ScrollPosition = (int)TempData["ScrollPosition"];
Fifth, use javascript to scroll to previous position after page load:
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function(){
//add event listener for the scroll event and set hidden input value for posts
document.addEventListener('scroll', function(){
const scrollPosY = window.scrollY;
document.querySelector('input[name="ScrollPosition"]').value = scrollPosY;
});
const scrollpos = document.querySelector('input[name="ScrollPosition"]').value;
window.scrollTo(0, scrollpos); //y-axis scroll
});
</script>
If you would need to track x axis scroll as well as y axis, you'd need two hidden inputs
for each x and y axis scroll position and change model to hold both x and y
Another way to do this is to submit the form with AJAX and, after a successful POST, call window.location.reload(); which will restore the scroll position.
function CreateItem() {
var serializedForm = $('#formId').serialize();
$.ajax({
url: "item/create",
type: "POST",
data: serializedForm
})
.done(function () {
window.location.reload();
});
}
First add the following jquery function to your page in the script tag:
$(document).scroll(function () {
// Note scroll position.
localStorage['pageIdentifier'] = $(document).scrollTop();
});
And then add:
$(document).ready(function () {
// Maintain scroll position.
$(document).scrollTop(localStorage['healthPage']);
});
I am new to sencha and would like to have the indexBar option to a listview which is launched by the selectfield. Tried with
defaultTabletPickerConfig:
{
listeners:
{
painted: function(panel)
{
var list = panel.down('list');
list.setIndexBar(true);
}
}
}
But this code doesn't work, please help.
If you new to sencha please do not use defaultTabletPickerConfig setting.
Please describe more what you want to get, share more code you have written.
In Sencha Touch 2, I have a formpanel with a selectfield to pick from a large store of models. I can choose between an Ext.Picker or an Ext.List as the picker component by setting the usePicker property on the selectfield. But how do I configure the Ext.List?
I tried setting defaultPhonePickerConfig and defaultTabletPickerConfig, but that doesn't seem to work. Specifically, I want to set { grouped: true, indexBar: true } to help my users navigate the long list of options. I used the JavaScript debugger to trace the showPicker() method and verified that the instantiated Ext.List has those two properties set in its config property. But the list overlay still doesn't show the group headings or the index bar. Any idea what I could be doing wrong?
The solution is to defer configuration until after the panel component is painted:
usePicker: false,
defaultTabletPickerConfig: {
listeners: {
painted: function(panel) {
var list = panel.down('list');
list.setGrouped(true);
list.setIndexBar(true);
}
}
}
This is dumb.
i am trying to make the same app with the miamicode, i am at step 3
http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-3/
i try to make the button that goes to new note (switch to a new screen and create a new note)
the code at the example is this:
onNewNoteCommand: function () {
console.log("onNewNoteCommand");
var now = new Date();
var noteId = (now.getTime()).toString() + (this.getRandomInt(0, 100)).toString();
var newNote = Ext.create("NotesApp.model.Note", {
id: noteId,
dateCreated: now,
title: "",
narrative: ""
});
this.activateNoteEditor(newNote);
}
the activateNotesList function is this :
activateNotesList: function () {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
on my own example i try just to go the editview without passing data.
so i try this:
onNewNoteCommand:function()
{
var noteEditor = this.getNoteEditor();
// Ext.Viewport.add(noteEditor); also tried this.
Ext.Viewport.setActiveItem(noteEditor);
that code runs with no errors but the screen doesn't change.
any suggestion? whats the difference on add ?
how do i set the viewport (haven't created any custom viewport) to card? is this the problem that setactiveitem doesn't work? any other way to switch between views?
Are there some errors in google chrome browser's console? Ctrl+Shift+J to open.
Also you have to check if noteEditor equals Object or Number.
From sencha docs: setActiveItem( Object/Number activeItem )
I have an MVC multi item & paged image carousel in Sencha Touch 2, which works perfectly on it's own when added to the Viewport on init.
However, the problem I am having now is how to adapt it to my tab panel style app. I am a little unclear where I should put the code, at init or (I'm guessing) in the controller which fires on click of the specific tab. My tabpanel style app was downloaded from Github (Sencha touch 2 boilerplate template).
My working MVC carousel calls the following in the app.js:
controllers: ['Main'],
views: ['Carousel', 'Page'],
stores: ['Thumbnails'],
models: ['Thumbnail'],
launch: function () {
var carousel = Ext.create('Ext.Carousel');
Ext.Viewport.add(carousel);
Ext.getStore('Thumbnails').load(function (apps) {
var cols = 4, rows = 4; // todo: change for tablets
var page;
var btn;
var iPage = 0;
var iApp = 0;
var x = 1, y = 1, z = 0;
var row, grid, bottomrow;
var firstpage = 0;
etc....code cut for readbility.
Basically I want this carousel to appear on the second tab of the tabpanel, not initially on the viewport how it works now. Perhaps I should have the working launch code in a controller that fires when I'm on that tab of the tabpanel? I'm not sure of the best way to approach this.
Here is the launch function of my tabpanel app, with the
launch: function() {
Ext.create('TCApp.view.Viewport', {fullscreen: true});
// I have tried adding this working launch code after creating the Viewport, but maybe it should be in the controller? But I'm not sure how to go about it...
var carousel = Ext.create('Ext.Carousel');
Ext.Viewport.add(carousel);
Ext.getStore('Thumbnails').load(function (apps) {
var cols = 4, rows = 4; // todo: change for tablets
var page;
var btn;
var iPage = 0;
var iApp = 0;
var x = 1, y = 1, z = 0;
var row, grid, bottomrow;
var firstpage = 0;
Any help would be much appreciated!
You are adding your carousel to Ext.Viewport, which is the component that gets instantiated by default on application bootstrap. So, instead of using Ext.Viewport.add(carousel);, and adding it to the Viewport itself, try with
tabpanel.add(carousel);
Where tabpanel is the reference to your tab panel instance. This way you'll be adding the carousel to the first available card in Ext.tab.Panel
Thanks Grgur, it helped. I eventually solved it this way, making sure to have a title and iconCls otherwise I get an error in the console when adding the carousel item to the tabpanel:
var carousel = Ext.create('Ext.Carousel', {
title: 'Carousel',
iconCls: 'info'
});
var MyTabPanel = Ext.getCmp('mytabpanel');
MyTabPanel.add(carousel);