I'm using dojox.grid.EnhancedGrid which is created by the class MyGrid, explained below.
var MyGrid = declare(null, {
constructor: function (app, id, opts) {
this.id = id;
this.app = app;
this.core_id = app.getCoreId();
var myStore;
var jquery = {
scope: 'core',
command: 'rest',
args: {
resource: this.id,
serve: 'cooked'
},
core_id: this.core_id
};
this.jsonStore = new custom.store.JsonRest({
target: app.get_dispatcher_url(),
jquery: jquery,
// setstruct is an object to provide a method that sets a new
// grid structure as soon as data arrives.
set_structure: dojo.hitch(this, this.set_structure),
app: this.app
});
// avoid closures from holding a reference
// to jquery and preventing its GCing
jquery = null;
this.memoryStore = new Memory();
myStore = new Cache(this.jsonStore, this.memoryStore);
this.dataStore = new ObjectStore({
objectStore: myStore,
onSet: onEdited,
onNew: onEdited,
onDelete: onEdited
});
myStore = null;
// create grid
this.grid = new EnhancedGrid({
store: this.dataStore,
height: '100%',
structure: [
{ name: 'Waiting for data...', field: 'no-field', width: '10em' }
],
plugins: {
menus: { rowMenu: this._create_menu() },
nestedSorting: true,
selector: { row: 'disabled', col: 'disabled', cell: 'multi' }
}
});
// start grid
this.grid.startup();
}
});
Note that I omitted code to focus just on the creation of the "grid/store". MyGrid displays the grid on a ContentPane.
So I create an object to display the grid (with a large amount of data) and scroll to the bottom, and it will request only the visible rows properly. However, it just so happens that when I create a second grid it will request the content for the second grid and all data for the first grid!!
How can this happen? Any idea of what can be causing this?
EDITED (22/02/13):
I created a jsfiddle to demonstrate the problem I'm getting: see jsfiddle
How to reproduce the problem:
Click on New Tab button, open the console and check how many rows were fetched.
Go to the bottom of the grid (quickly) and check the console again.
Click on New Tab again, go to the console and you can see that all rows, not loaded yet, from previous grid were fetched.
Note: I found out that this only happens on Google Chrome. I tested with Firefox and everything worked well.
Related
I'm new to rally app SDK and trying to do the tutorials (from Youtube and from rally site)
when I'm trying to create an iterationComboBox the object is created but with no values ("There are no Iterations defined").
i tried to run both the video tutorial code from github (session_4_interactive_grid)
// Custom Rally App that displays Defects in a grid and filter by Iteration and/or Severity.
//
// Note: various console debugging messages intentionally kept in the code for learning purposes
Ext.define('CustomApp', {
extend: 'Rally.app.App', // The parent class manages the app 'lifecycle' and calls launch() when ready
componentCls: 'app', // CSS styles found in app.css
defectStore: undefined, // app level references to the store and grid for easy access in various methods
defectGrid: undefined,
// Entry Point to App
launch: function() {
console.log('our second app'); // see console api: https://developers.google.com/chrome-developer-tools/docs/console-api
this.pulldownContainer = Ext.create('Ext.container.Container', { // this container lets us control the layout of the pulldowns; they'll be added below
id: 'pulldown-container-id',
layout: {
type: 'hbox', // 'horizontal' layout
align: 'stretch'
}
});
this.add(this.pulldownContainer); // must add the pulldown container to the app to be part of the rendering lifecycle, even though it's empty at the moment
this._loadIterations();
},
// create iteration pulldown and load iterations
_loadIterations: function() {
this.iterComboBox = Ext.create('Rally.ui.combobox.IterationComboBox', {
fieldLabel: 'Iteration',
labelAlign: 'right',
width: 300,
listeners: {
ready: function(combobox) { // on ready: during initialization of the app, once Iterations are loaded, lets go get Defect Severities
this._loadSeverities();
},
select: function(combobox, records) { // on select: after the app has fully loaded, when the user 'select's an iteration, lets just relaod the data
this._loadData();
},
scope: this
}
});
this.pulldownContainer.add(this.iterComboBox); // add the iteration list to the pulldown container so it lays out horiz, not the app!
},
// create defect severity pulldown then load data
_loadSeverities: function() {
this.severityComboBox = Ext.create('Rally.ui.combobox.FieldValueComboBox', {
model: 'Defect',
field: 'Severity',
fieldLabel: 'Severity',
labelAlign: 'right',
listeners: {
ready: function(combobox) { // this is the last 'data' pulldown we're loading so both events go to just load the actual defect data
this._loadData();
},
select: function(combobox, records) {
this._loadData();
},
scope: this // <--- don't for get to pass the 'app' level scope into the combo box so the async event functions can call app-level func's!
}
});
this.pulldownContainer.add(this.severityComboBox); // add the severity list to the pulldown container so it lays out horiz, not the app!
},
// Get data from Rally
_loadData: function() {
var selectedIterRef = this.iterComboBox.getRecord().get('_ref'); // the _ref is unique, unlike the iteration name that can change; lets query on it instead!
var selectedSeverityValue = this.severityComboBox.getRecord().get('value'); // remember to console log the record to see the raw data and relize what you can pluck out
console.log('selected iter', selectedIterRef);
console.log('selected severity', selectedSeverityValue);
var myFilters = [ // in this format, these are AND'ed together; use Rally.data.wsapi.Filter to create programatic AND/OR constructs
{
property: 'Iteration',
operation: '=',
value: selectedIterRef
},
{
property: 'Severity',
operation: '=',
value: selectedSeverityValue
}
];
// if store exists, just load new data
if (this.defectStore) {
console.log('store exists');
this.defectStore.setFilter(myFilters);
this.defectStore.load();
// create store
} else {
console.log('creating store');
this.defectStore = Ext.create('Rally.data.wsapi.Store', { // create defectStore on the App (via this) so the code above can test for it's existence!
model: 'Defect',
autoLoad: true, // <----- Don't forget to set this to true! heh
filters: myFilters,
listeners: {
load: function(myStore, myData, success) {
console.log('got data!', myStore, myData);
if (!this.defectGrid) { // only create a grid if it does NOT already exist
this._createGrid(myStore); // if we did NOT pass scope:this below, this line would be incorrectly trying to call _createGrid() on the store which does not exist.
}
},
scope: this // This tells the wsapi data store to forward pass along the app-level context into ALL listener functions
},
fetch: ['FormattedID', 'Name', 'Severity', 'Iteration'] // Look in the WSAPI docs online to see all fields available!
});
}
},
// Create and Show a Grid of given defect
_createGrid: function(myDefectStore) {
this.defectGrid = Ext.create('Rally.ui.grid.Grid', {
store: myDefectStore,
columnCfgs: [ // Columns to display; must be the same names specified in the fetch: above in the wsapi data store
'FormattedID', 'Name', 'Severity', 'Iteration'
]
});
this.add(this.defectGrid); // add the grid Component to the app-level Container (by doing this.add, it uses the app container)
}
});
and the code from Rally site (https://help.rallydev.com/apps/2.0rc2/doc/#!/guide/first_app).
// Custom Rally App that displays Defects in a grid and filter by Iteration and/or Severity.
//
// Note: various console debugging messages intentionally kept in the code for learning purposes
Ext.define('CustomApp', {
extend: 'Rally.app.App', // The parent class manages the app 'lifecycle' and calls launch() when ready
componentCls: 'app', // CSS styles found in app.css
launch: function() {
this.iterationCombobox = this.add({
xtype: 'rallyiterationcombobox',
listeners: {
change: this._onIterationComboboxChanged,
ready: this._onIterationComboboxLoad,
scope: this
}
});
},
_onIterationComboboxLoad: function() {
var addNewConfig = {
xtype: 'rallyaddnew',
recordTypes: ['User Story', 'Defect'],
ignoredRequiredFields: ['Name', 'ScheduleState', 'Project'],
showAddWithDetails: false,
listeners: {
beforecreate: this._onBeforeCreate,
scope: this
}
};
this.addNew = this.add(addNewConfig);
var cardBoardConfig = {
xtype: 'rallycardboard',
types: ['Defect', 'User Story'],
attribute: 'ScheduleState',
storeConfig: {
filters: [this.iterationCombobox.getQueryFromSelected()]
}
};
this.cardBoard = this.add(cardBoardConfig);
},
_onBeforeCreate: function(addNewComponent, record) {
record.set('Iteration', this.iterationCombobox.getValue());
},
_onIterationComboboxChanged: function() {
var config = {
storeConfig: {
filters: [this.iterationCombobox.getQueryFromSelected()]
}
};
this.cardBoard.refresh(config);
}
});
both give me an empty iteration box.
i'm getting user stories data when running code from session 3 on the video,by creating a store of user stories. I googled it and searched here for duplicates but with no successso far, so what can be the issue?
Thanks!
I copied the code you posted, both apps, without making any changes, ran the apps and the iteration box was populated in both cases. It's not the code.
Maybe if you are getting "There are no Iterations defined" there are no iterations in your project?
The second code you posted which you copied from the example in the documentation has a bug in it and even though the iteration combobox is populated, the cards do not show on a board. DevTools console has error: "Cannot read property 'refresh' of undefined".
I have a working version of this app in this github repo.
I am having problems with ST2.3. I've upgraded from 2.1 and I've had several regressions which are now working ok. However one problem that definitely seems to be broken is the Map wrapper around the google api. My app works fine in Testing and Development modes, but as soon as it is built for production the map stops working.
The code where it seems to break on is here within the Map code on the setMapCenter function.
setMapCenter:function(e){var b=this,d=b.getMap(),a=b.getMapOptions(),c=(window.google||{}).maps;if(c){if(!e){if(d&&d.getCenter){e=d.getCenter()}else{if(a.hasOwnProperty("center")){e=a.center}else{e=new c.LatLng(37.381592,-122.135672)}}}
The breakpoint seems to be on the line: new c.LatLng(37.381592,-122.135672).
Why would it suddenly start failing on a production build?
Update
This is the stack trace, but I can't find out what actually is the problem as the code is obfuscated/minified:
Uncaught TypeError: undefined is not a function VM1471:1
Ext.define.setMapCenterVM1471:1
Ext.define.updateUseCurrentLocationVM1471:1
jVM1471:1
b.implement.initConfigVM1471:1
etc...
The weird thing is, this worked using ST2.1. It also works in ST2.3 but only in Testing/Debug mode.
My code doesn't even set the center of the map when the view is initially shown:
This is the map view:
Ext.define('MyApp.view.offices.OfficeMap', {
extend: 'Ext.Panel',
alias: 'widget.officemapview',
requires: [
'Ext.Map'
],
config: {
layout: 'fit',
items: [
{
xtype: 'map',
listeners: {
activate: function(me, newActiveItem, oldActiveItem, eOpts){
console.log("activate fired");
},
maprender: function () {
console.log("maprender fired");
var gMap = this.getMap();
this.fireEvent('googleMapRender', gMap);
}
}
}
],
officeRecord: null
}
});
This is the controller code that receives the render event from the view:
onGoogleMapRender: function (googleMap) {
var record = this.selectedOffice;
var longi = record.get("Longitude");
var lati = record.get("Latitude");
console.log("About to create google maps pos")
console.log("About to create google maps marker")
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lati, longi)
});
console.log("About to set maps map object")
marker.setMap(googleMap);
setTimeout(function () {
console.log("map setTimeout")
// weird timeout issue? - http://stackoverflow.com/questions/15041697/sencha-touch-google-map-and-centering-a-marker
googleMap.setZoom(17);
googleMap.panTo(pos);
}, 500);
The error on the following browsers are:
Chrome - Uncaught TypeError: undefined is not a function
IE - Object does not support this function
Any ideas as to what is happening here?
Maybe check in chrome in developer tools on network tab what are the difference in loading javascript files between production mode and development mode.
That is because your javascript are loaded before the google maps javascript is loaded. So when setMapCenter get the function, there is no c yet (undefined). What you can do is use some callback, like "painted" and then set your "setMapCenter".
Update
Try to do this just to test:
xtype: "map",
listeners: {
activate: function(me, newActiveItem, oldActiveItem, eOpts){
me.config.mapOptions = {
center : new google.maps.LatLng(-42,-42), // your center
zoom : 14,
//others options
}
},
maprender: function(comp, map) {
var me = this;
var map = this.getMap();
// marker test
var position = new google.maps.LatLng(-42, -42);
var marker = new google.maps.Marker({
position: position,
title : 'Hello World',
map: map
});
}
}
Below I have pasted a function to show the data in the datagrid based on the function call shownames('a'). DataGrid is not refreshing for different characters like shownames('b')...and so on . Or, How do I change the data in the datagrid without destroying the grid completely ?
function shownames(chr) {
require([
"dojox/grid/EnhancedGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/xhr",
"dojo/domReady!"
], function(DataGrid, Memory, ObjectStore, xhr){
var grid, dataStore;
xhr.get({
url: "http://localhost/xampp/namedb.php?name_idx="+chr,
handleAs: "json"
}).then(function(data){
dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) });
if(dijit.byId("namegrid")) {
grid.destroy();
} else {
grid = new dojox.grid.EnhancedGrid({
id: "namegrid",
store: dataStore,
query: { name_id: "*" },
queryOptions: {},
structure: [
{ name: "Name", field: "name", width: "25%" },
{ name: "Actual Meaning", field: "meaning", width: "50%" },
{ name: "name_id", field : "name_id", hidden: true }
]
}, "alphanames");
grid.startup();
}
/*
dojo.connect(grid, "onRowClick", grid, function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get the ID attr of the selected row
var value = this.store.getValue(item, "country_name");
});
*/
});
});
}
Thanks,
Raja
you should not refresh the grid the way you posted it !
First you need to initialize a grid at startup. So the grid shows you some data. Dont create a grid each time !!!! AFTER that your function has to communicate with the grid by using it's methods !
I constantly use this bulk to refresh the grid:
var grid= // CREATE GRID IN HERE
function yourFunction(id) {
var prepareQuery={};
prepareQuery["name_id"]=id; // Create a query based on id
grid._pending_requests={}; // Stop everything thats loading
grid._setQuery(prepareQuery); // Pass query to the grid
grid._refresh(true); // Refresh grid
}
It may also work with your code, but you may have to do some adaptions.
I'm having problems to understand how to implement new WP media uploader into my theme options page. Is there a documentation on how to do this or some explanation what-so-ever? I have seen couple of samples of how to do this but none of them has any good explanation about their code. Is there list of options how to customize media uploader frame? I mean wouldn't it be good if you can do something like this (See // Create the media frame.):
// Uploading files
var file_frame;
jQuery('.upload_image_button').live('click', function() {
// If the media frame already exists, reopen it.
if ( file_frame ) {
file_frame.open();
return;
}
// Create the media frame.
file_frame = wp.media.frames.file_frame = wp.media({
title: 'My frame title',
button: {
text: 'My button text',
},
id: 'logo-frame',
multiple: false,
editing_sidebar: false, // Just added for example
default_tab: 'upload', // Just added for example
tabs: 'upload, library', // Just added for example
returned_image_size: 'thumbnail' // Just added for example
});
// When an image is selected, run a callback.
file_frame.on( 'select', function() {
var attachment;
// We set multiple to false so only get one image from the uploader
attachment = file_frame.state().get('selection').first().toJSON();
// Do something with attachment.id and/or attachment.url here
});
// Finally, open the modal
file_frame.open();
return false
});
For WP 3.5, you can use the new media uploader. I'll be brief in the hopes that you know what you're doing. The idea is to call the wp_enqueue_script (this only works on WP >= 3.5 btw). Once the script is called, you can manipulate the javascript object. You'll have to do some inspecting to see your full set of options.
First you have to enqueue the script:
add_action( 'wp_enqueue_scripts', 'front_upload_enqueues' );
function front_upload_enqueues() {
wp_register_script('uploads',
// path to upload script
get_template_directory_uri().'/lib/js/media-upload.js'
);
wp_enqueue_script('uploads');
if ( function_exists('wp_enqueue_media') ) {
// this enqueues all the media upload stuff
wp_enqueue_media();
}
}
Then you have to add the javascript (jQuery in my case):
jQuery(document).ready(function($){
var frame;
/*
* Upload button click event, which builds the choose-from-library frame.
*
*/
$('.form-table').on('click', '.member-upload-field .btn-upload', function( event ) {
var $el = $(this);
event.preventDefault();
// Create the media frame.
frame = wp.media.frames.customHeader = wp.media({
title: $el.data('choose'),
library: { // remove these to show all
type: 'image', // specific mime
author: userSettings.uid // specific user-posted attachment
},
button: {
text: $el.data('update'), // button text
close: true // whether click closes
}
});
// When an image is selected, run a callback.
frame.on( 'select', function() {
// Grab the selected attachment.
var attachment = frame.state().get('selection').first(),
link = $el.data('updateLink');
$el.prev('input').val( attachment.attributes.id );
$el.parent().prev().find('img').attr('src', attachment.attributes.url );
});
frame.open();
});
});
Attached is a my controller file .. i basically want to switch views .. adding and removing a panel in a container with 2 buttons .. in the method for home and popular button i am using Ext.create again and again wouldnt that overload my application becoz iam not destroying my views iam adding and removing them .. My main question is how can i create global var 's for this situation like i create var homepanel = Ext.create just once and then i can reuse that var when i want to remove or add it from my mainContainer.. need serious guidance on this .. searched the whole documention but i dont have any clue about it
Ext.define('app.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
refs: {
homeBtn: '#homeBtn',
popularBtn: '#popularBtn',
homePanel: '#homePanel',
mainContainer: '#mainContainer'
},
control: {
homeBtn:{
tap: 'homeBtnAction'
},
popularBtn:{
tap: 'popularBtnAction'
}
}
},
launch: function(app) {
this.callParent(arguments);
console.log("main launched");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
mainCont.add(homepanel);
console.log("homePanelAdded");
},
homeBtnAction: function(){
console.log("home page called");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
var popularpanel = Ext.create('app.view.Popular.PopularPanel');
mainCont.remove(popularpanel);
mainCont.add(homepanel);
},
popularBtnAction: function(){
console.log("popular page called");
var mainCont = this.getMainContainer();
var homepanel = Ext.create('app.view.Home.HomePanel');
var popularpanel = Ext.create('app.view.Popular.PopularPanel');
mainCont.remove(homepanel);
mainCont.add(popularpanel);
}
});
NOTE: Iam using Ext.define to create my views and using MVC structure.
Use this,
var homepanel = this.getHomePanel() || Ext.create('app.view.Home.HomePanel');
if this.getHomePanel() does not return anything it'll create the panel for you. After that you'll use the already created panel.
Other note, unless you are manipulating the buttons in some manner there is no need to give them an id or a ref.
Set up your button in your view like so
{
xtype : 'button',
text : 'Home Panel',
action : 'goHome'
}
then in the control section of your controller use this
'button[action=goHome] :
{
tap: 'homeBtnAction'
}
One option is : in "launch", you create both views (with Ext.Create) and use Ext.getCmp in action button callbacks to retrieve the previously created views.