I'm trying to display data in a Panel with this simple example with Sencha Touch 2, but it's not working :
var planetEarth = {
name: "Earth",
mass: 1.00
};
var planetInfo = new Ext.XTemplate("<h2>{name}</h2>mass: {mass}");
var profile = Ext.create('Ext.Panel', {
fullscreen: true,
xtype: 'panel',
layout: 'fit',
data : planetEarth,
tpl: planetInfo
});
Ext.Viewport.setActiveItem(profile);
Any idea why ?
Seems to work for me: http://www.senchafiddle.com/#KxGHo
[edit] To clarify, you need to wait until the document has finished loading before defining and executing any code that's used to build the user interface. Place your code in the application 'launch' method.
Related
I'm trying to use a enhanced grid with Dojo JSONREST and i'm running into some issues.
I've been looking up some examples but can't figure out how to do what i need.
In the code below my rest service takes two parameters, and the query on the service works.
The problem is that when grid.startup() is called it seems to call the Rest service again, since there are no parameters passed the rest service falls over. What am i doing wrong here?
Also is there any way to update to the store so that is only contains the queried results?, so that when the grid appears it just contains these values?
Appreciate any help or pointers..
ready(function(){
var grid;
var store = new JsonRest({
target: "rest/search"
});
store.query({term: "test", category: "category"},
{
start: 10,
count: 10,
}).then(function(data){
// how do i update store with queried results?
});
dataStore = new ObjectStore({ objectStore: store });
/*set up layout*/
var layout = [[
{'name': 'Name', 'field': 'col1', noresize: true, 'width': '100%'},
]];
/*create a new grid:*/
grid = new EnhancedGrid({
id: 'grid',
store: dataStore,
structure: layout,
selectable: true,
selector: false,
selectionMode: 'none',
escapeHTMLInData: false,
autoHeight:true
}, document.createElement('div'));
grid.startup();
}
Have you tried setting the query parameter of the grid? A link to the docs. And a link to an example.
And by looking at the code in the question, it seems that the grid should display chunks/pages of data - an example using the pagination plugin for the grid.
The filter plugin might also be of interest to you.
when you define a new grid you have to pass it to dojo:
/*create a new grid:*/
grid = new EnhancedGrid({
id: 'grid',
store: dataStore,
structure: layout,
selectable: true,
selector: false,
selectionMode: 'none',
escapeHTMLInData: false,
autoHeight:true
}, document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid.domNode);
grid.startup();
I am a newbie in sancha touch 2, Playing with kitchensink example that comes with sancha touch sdk kitchensink/index.html#demo/inlinedataview
UI for Inline Dataview
View
/* Here we are adding a dataview to a container
* which(dataview) contains images.
*/
Ext.define('Kitchensink.view.InlineDataView', {
extend: 'Ext.Container',
requires: ['Kitchensink.model.Speaker'],
config: {
layout: 'fit',
items: [{
xtype: 'dataview',
scrollable: true,
inline: true,
itemTpl: '<img src="{photo}">',
store: 'Speakers'
}]
}
});
Question
I want to animate those images while they are being added to dataview in a way that they(each one of them individually) seems to fading in at a random place before showing the upper view.
Similar to http://boedesign.com/demos/jsquares/ example1
Sancha Doc Reference or A hint or how to do, will do it, but if you can paste some reference code that would be great.
I saw that no one replied to this in 8 months, and it still comes up in google:
so thought i provide a simple solution.
in your dataview override the doRefresh function
doRefresh: function ()
{
this.callParent(arguments);
this.animateItems();
},
then in your customer after-function (this.animateItems())
call:
var viewItems = this.getViewItems();
then roll some animations on them :)
i've created a plugin that attempts to simplify this.
hope it can help someone: http://sunnyjacob.co.uk/blog/animating-items-in-a-sencha-touch-dataview/
S.
I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.
Here is the code for the titlebar:
Ext.define('mUserStories.view.titlebar', {
extend: 'Ext.TitleBar',
id: 'narwhal',
config: {
docked: 'top',
// id: 'narwhal',
title: 'CHW Module',
items: [{
ui: 'back',
text: 'Back',
id: 'backButton'
// hidden: true
}]
}
})
However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.
Here is the code for the logic that occurs when the button is pressed to switch the page:
toPage: function (arg) {
var t = Ext.getCmp('narwhal');
var b = Ext.getCmp('backButton');
console.log(t,b)
if (arg === PAGES.PATIENT_LIST) {
t.setTitle('Patient List');
b.setHidden(true)
}
Ext.getCmp('viewPort').setActiveItem(arg);
}
I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.
I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!
Thank you for your time :)
I have had the same situation in my project.
I managed to get everything to work like you want it by having a controller owning a reference to the title bar and listening to activeItemChange on my tabPanel.
I am using extjs 4.0.7. I have a requirement wherein I have two combo boxes in the edit mode of a grid and I need to change the data in the second based on the value selected in the first one.
I am using MVC architecture for extjs and a java code that returns json string to populate data in the combo boxes. The code for my first combo box is:
view file:
items: [{
id: 'country',
header: 'Countries',
field: {
xtype: 'combo',
store: [
["USA","USA"],
["India","India"],
],
editable: false,
allowBlank: false,
listeners: {
select: function(combo, records, eOpts){
contactTypeGrid = combo.getValue();
myGrid.fireEvent('LoadStateOnSelect');
}
}
}
},
{
id: 'states',
header: 'Sates',
dataIndex: 'states',
field: {
xtype: 'combo',
store: 'StateStore',
valueField: 'stateDesc',
displayField: 'stateText',
}
}, ....
]
controller:
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
stateStore.load();
},
However, when I run this code, the data in the second store changes in the background but a Loading mask continues to appear in front due to which I cannot select any value.
How should I resolve the issue of connditional data load? Any help will be much appreciated.
Have you tried clearing the selected value in the combobox before reloading the store? You could try calling the clearValue() method on the combo.
I have a temporary fix for this. However, I am still looking for a solution that is more stable and workable.
Solution:
Whenever changing the data in the dependant store you could expand the combo box which loads the new data correctly.
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
statesCombo.expand(); //Here I am assuming that "statesCombo" has a
//reference to the dependant combo box.
stateStore.load();
},
This might save somebody else's time however, In case somebody finds a more viable solution, please let me know as well.
carStore- any store for main combo
carModelStore - store, the content of which should be depended on selection in the carStore
Consider more general and useful example when data is getting from server.
var carModelStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'car-model'],
root: 'rows'
}),
storeId: 'car-model-store',
proxy: new Ext.data.HttpProxy({
url: 'carmodeldataprovider.json?car-name=lamborghini'
}),
autoLoad: true
});
{ xtype: 'combo', name: 'car-name', fieldLabel: 'Car', mode: 'local', store: carStore, triggerAction: 'all',
listeners: {
select: function(combo, records, eOpts){
var carName = records.get('car-name');
var carModelStore = Ext.StoreMgr.lookup("car-model-store");
carModelStore.proxy.setUrl('carmodeldataprovider.json?car-name=' + carName, false);
carModelStore.reload();
}
}
}
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.