I need to great Dojo DataGrids on-the-fly in a complex RIA app. The problem is I can't use element id's. How can I create DataGrids in javascript and then insert it into the page? Here's what I'm currently doing:
Backbone.View.extend({
name: 'checkout',
template: dojo.cache('plugins.patrons.views.templates', 'actions/checkout.html'),
el: $('<div>'),
store: new dojo.store.Memory({data: [{id: 1, "accession": '1000', "title": 'my book'}]}),
initialize: function(el, data) { this.el = el; this.data = data; },
render: function()
{
dojo.parser.parse(this.el.empty().html(_.template(this.template, this.data, {variable: 'data'}))[0]);
var grid = new DataGrid({
store: ObjectStore({objectStore: this.store}),
structure: [
{name:"Accession Number", field:"accession", width: "200px"},
{name:"Title", field:"title", width: "400px"}
]
});
$('.checkout.action .data-grid', this.el).append(grid.domNode);
grid.startup();
return this;
}
});
This builds the table, but you can't see it, and there's no data.
Try giving the grid an explicit height.
var grid = new DataGrid({
height: 400px,
store: ObjectStore({objectStore: this.store}),
structure: [
{name:"Accession Number", field:"accession", width: "200px"},
{name:"Title", field:"title", width: "400px"}
]
});
Related
I have a form with a select populated with options. I want to bind it to a model using backbone.stickit but the documentation show how to populate the select on the binding configuration. I can't found an easy way to bind the model with my prepopulated select.
This is my html
<div id="main">
<form id="formulario">
<input id="test1" type="text" />
<select id="test2">
<option value="0">a</option>
<option value="1">b</option>
</select>
</form>
<div id="value-test1"></div>
<div id="value-test2"></div>
</div>
This is a working example based on the documentation, but not what I need
var Model = Backbone.Model.extend({});
var View = Backbone.View.extend({
el: $('#main'),
bindings: {
'#test1': 'test1',
'#value-test1': 'test1',
'#test2': {
observe:'test2',
selectOptions: {
collection: function() {
return [
{value: 0, label:'a'},
{value: 1, label:'b'}
];
}
}
},
'#value-test2': 'test2'
},
render: function() {
this.stickit();
}
});
var model = new Model({test1: 'test', test2: 0});
var view = new View({model: model}).render();
http://jsfiddle.net/camilosw/nDjHh/
I tried to obtain the option values from the select on the binding configuration using jquery but doesn't work
var Model = Backbone.Model.extend({});
var View = Backbone.View.extend({
el: $('#main'),
bindings: {
'#test1': 'test1',
'#value-test1': 'test1',
'#test2': {
observe:'test2',
selectOptions: {
collection: function() {
options = $("#test2 option").map(function(){
return {value: this.value, label: this.text};
}).get();
return options;
}
}
},
'#value-test2': 'test2'
},
render: function() {
this.stickit();
}
});
var model = new Model({test1: 'test', test2: 0});
var view = new View({model: model}).render();
http://jsfiddle.net/camilosw/2EYV7/2
It worked, but I think it will be a mess on forms with many selects
window.options = $("#test2 option").map(function(){
return {value: this.value, label: this.text};
}).get();
var Model = Backbone.Model.extend({});
var View = Backbone.View.extend({
el: $('#main'),
bindings: {
'#test1': 'test1',
'#value-test1': 'test1',
'#test2': {
observe:'test2',
selectOptions: {
collection: function() {
return window.options;
}
}
},
'#value-test2': 'test2'
},
render: function() {
this.stickit();
}
});
var model = new Model({test1: 'test', test2: 0});
var view = new View({model: model}).render();
http://jsfiddle.net/camilosw/Y3aEF/1
What is the best way to bind a prepopulated select to a model?
I tried only with backbone.stickit, it's easier with another library?
Stickit actually binds values as data to select-options instead of using the value html attribute. The reasoning behind this is that in rich apps, you often want to use different types of data for option values. For example, you may want an option to represent a JavaScript Object or Array which is not an easy value to serialize to an html attribute; or you may want to assign the attribute value to the Number 2, but because of type coercion when it is saved as an attribue it will be converted to the String "2". Also, since Stickit is going to parse/own the select-options, it makes sense to let Stickit render the options instead of rendering/processing it in two places (not to mention iterating in a template is ugly).
That said, this request is common enough that I'm convinced to support pre-rendered select-options. Can you open a new issue, and I'll get something out on master within the next couple of days?
EDIT: This is being actively worked on, now.
I am building an application and I am trying to keep it object oriented. The issue is that the alert box doesn't appear when the button is clicked. I believe it is an issue with the scope of the button. It could also be related to the way i am building my app. It is based off of an example provided by Sencha. I have searched, and tried many things, but I haven't come up with a solution. Here is my code:
Ext.require([
'Ext.grid.*',
'Ext.panel.*',
'Ext.msg.*'
]);
Ext.Loader.onReady(function() {
Ext.define('App.SimplePanel', {
extend: 'Ext.Panel',
alias: 'widget.SimplePanel',
width: 100,
height: 50,
initComponent: function() {
this.buttons = [{
text: 'Trigger Alert',
scope: this,
hander: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];
this.callParent();
}
});
}, false);
Ext.onReady(function() {
// create an instance of the app
var simplePanel = new App.SimplePanel({
renderTo: document.body,
});
});
The issue is property should be called handler not hander
this.buttons = [{
text: 'Trigger Alert',
scope: this,
handler: function(){
Ext.Msg.alert('Title', 'TestAlert');
}
}];
I am missing something very basic, my comboxbox never appears, can somebody please look at the following code and tell me what I am missing, I have tried both .Select and ComboBox as type and I ma using dojo-1.5
var layout4 =
[
{ field: "abbr", name: "Abbreviation", width: 10 },
{ field: "name", name: "Name", width: 10 },
{ field: "capital", name: "Capital", width: '10'},
{ field: "combo", name: "combo", width: 10,
type: dojox.grid.cells.Select,
options: [ "new", "read", "replied" ],
editable:true
}
];
var store4 = { identifier: 'abbr',
label: 'name',
items: [
{ abbr:'ec', name:'Ecuador', capital:'Quito', combo:'' },
{ abbr:'eg', name:'Egypt', capital:'Cairo', combo:''},
{ abbr:'sv', name:'El Salvador', capital:'San Salvador', combo:''},
{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo', combo:''},
{ abbr:'er', name:'Eritrea', capital:'Asmara', combo:'' },
{ abbr:'ee', name:'Estonia', capital:'Tallinn', combo:''},
{ abbr:'et', name:'Ethiopia', capital:'Addis Ababa', combo:'' }
]};
storeData = new dojo.data.ItemFileReadStore(
{ data:store4}
);
// create a new grid:
var grid4 = new dojox.grid.DataGrid({
query: { abbr: '*' },
store: storeData,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, document.createElement('div'));
// append the new grid to the div "gridContainer4":
dojo.byId("gridContainer4").appendChild(grid4.domNode);
// Call startup, in order to render the grid:
grid4.startup();
Try replacing the long line that you have using appendChild() with this one:
grid4.placeAt("gridContainer4");
Your code is rather scrambled and without seeing the whole thing it's a little hard to debug. Do you get any errors on the console? Can you post a complete example on JSFiddle?
The reason was that I was using ItemFileReadStore, and it was not allowed to edit an item in store and so combobox was not appearing. Using WriteStore solves this problem here. Ofcourse it was dumb to use readsotre.
Now I have a different problem where I want combobox to appear in grid where canEdit is implemented, but that is a different question.
I'm quite new to sencha touch. The goal is to create an app which has a TabPanel containing four Tabs, one of them should be a map (the others are a NestedList and two Panels working like a charm). I've tried to make the map card like
NPApp.views.Mapcard = Ext.extend(Ext.Map, { ...
where I ended up with getting really strange results like some views are overlapping and no map is shown.
The second try was to creating a Panel, embed it into the TabPanel and add a map to the panel, where I get this error:
Uncaught TypeError: Cannot read property 'ROADMAP' of undefined;
sencha-touch-debug.js:24840
I've already tried to change the mapType to google.map.MapTypeID like mentioned in the Google Map API V3, no success there.
I just can't get the hang on it, hope you can give me some hints!
The App:
NPApp = new Ext.Application({
name: "NPApp",
title: "NextPuff",
icon: 'images/icon.png',
tabletStartupScreen: 'images/index_default.jpg',
phoneStartupScreen: 'images/index_default.jpg',
launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('navi');
}
});
The Viewport:
NPApp.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
store: NPApp.npstore,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', stretch: true},
{ xtype: 'searchcard', id: 'navi' },
{ xtype: 'mapcard' },
{ xtype: 'morecard' }
]
});
NPApp.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
The Mapcard:
NPApp.views.Mapcard = Ext.extend(Ext.Panel, {
title: "Map",
iconCls: "map",
initComponent: function() {
var npMap = new Ext.Map({
title: 'Map',
useCurrentLocation: true,
listeners: {
centerchange : function(comp, map){
// refreshMap(map);
}
},
mapOptions : {
mapTypeControl : false,
navigationControl : false,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
zoom: 17,
draggable: false,
keyboardShortcuts: false,
scrollwheel: false
}
});
Ext.apply(this, {
defaults: {
styleHtmlContent: true
},
items: [npMap]
});
NPApp.views.Homecard.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('mapcard', NPApp.views.Mapcard);
Sencha 1.1.0; Google JavaScript Maps API V3; Safari 5.1
I have a similar application running. Your tabpanel is perfect. All you need to alter is your map code.... Try this instead :
var map = new Ext.Map({
mapOptions : {
center : center,
zoom : 20,
mapTypeId : google.maps.MapTypeId.HYBRID,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners : {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: center,
//title : 'Sencha HQ',
map: map
});
setTimeout( function(){map.panTo (center);} , 1000);
}
},
geo:new Ext.util.GeoLocation({
autoUpdate:true,
maximumAge: 0,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function ( geo,
bTimeout,
bPermissionDenied,
bLocationUnavailable,
message) {
if(bLocationUnavailable){
alert('Your Current Location is Unavailable on this device');
}
else{
alert('Error occurred.');
}
}
}
})
});
This creates the map object and sets the center to ur current location. Now you need to dock this object inside an Ext.extend(Ext.Panel({}) object. Ive tried directly creating the map object but it needs a panel to display on.
So you're panel code should go something like so:
NPApp.views.Mapcard = new Ext.extend(Ext.Panel({
iconCls : 'map',
title : 'Map',
layout: 'card',
ui: 'light',
items: [map],
listeners:{
}
});
)
It took me ages of going thru a dozen or more examples to make the current location work. This is a combination of several codes and a bunch of stuff in the Google API.
Lemme know if you have any more questions about Google Maps or directions.
Cheers :)
Sasha
I wonder if anyone has experienced memory leaks in IE7 when using dojos datagrids. I have used the dojo.addOnUnload to destroy the grid widget but it seems like there are still references to the grid and its subcomponents when i use the tool drip to analyze the memory
leaks.
<script type="text/javascript">
dojo.require("dojox.grid.DataGrid");
dojo.require("dojox.data.QueryReadStore");
dojo.require("dijit._Widget");
var gridLayout = null;
var grid4 = null;
var jsonStore = null;
dojo.addOnLoad(function() {
jsonStore = new dojox.data.QueryReadStore({
url: "json",
requestMethod:"post"
});
gridLayout = [
new dojox.grid.cells.RowIndex({ name: "row #", width: 5, styles: "text-align: right;" }),
{
name: "Id",
field: "id",
styles: "text-align:right;",
width:5
},
{
name: "Name",
field: "name",
width:20
}
];
grid4 = new dojox.grid.DataGrid({
query: {
Name: '*'
},
store: jsonStore,
rowsPerPage: 30,
clientSort: true,
rowSelector: '20px',
structure: gridLayout
},
document.createElement('div'));
dojo.byId("gridContainer4").appendChild(grid4.domNode);
// Call startup, in order to render the grid:
grid4.startup();
});
dojo.addOnUnload(function() {
var gridWidgetsList = grid4.getDescendants();
dojo.forEach(gridWidgetsList, function(node, idx){
alert(node);
});
grid4.destroyRecursive();
grid4 = null;
gridLayout = null;
jsonStore = null;
});
</script>
<body>
<div id="gridContainer4" style="width: 600px; height: 200px;">
</div>
</body>
As you can see there is a destroyRecursive but there still seems to be references to the grid. Different td:s, tr:s and div:s that has been created by the DataGrid are left in memory. How do i nullify the other references to the same grid objects. After dojo.destroyRecursive has been run it seems that the DataGrid has been removed from the dom tree, since it dissappears in the browser.
Maybe it's just som simple misunderstanding from my point, might this have anything to do with closures? Would be thankful for a pointer in the right direction.