I'm using GeoExt2 (alpha) + Extjs 4.1 now to implement a map application. The thing is sometimes when I select a feature on the map, two popups are displayed. one at the bottom of the screen which has correct info and one empty in the right place. it doesn't go even I close it. I wonder if this is a bug ?
myLayer.events.on({
featureselected: function(e) {
createPopup(e.feature);
},
featureunselected: function(){
popup.destroy();
}
});
function createPopup(feature) {
popup = Ext.create('GeoExt.Popup', {
id: 'popup',
title: title,
location: feature,
});
popup.on({
close: function() {
if(OpenLayers.Util.indexOf(myLayer.selectedFeatures,
this.feature) > -1) {
selectControl.unselect(this.feature);
}
}
});
PopupTab = Ext.create('Ext.tab.Panel', {
id: 'PopupTabs',
activeTab:2,
items: [
{
title: 'Supervisor',
itemId: 'tab1',
},
{
title: 'student',
itemId: 'tab2',
items: [
{
xtype: 'label',
id: 't',
html: content,
layout: 'fit',
cls:'tabStyle'
}
]
},
],
listeners: {
tabchange: function(panel, tab) {
if (tab.popup !== undefined) { // show window after tab change
tab.popup.show();
}
}
}
});
popup.add(PopupTabs);
popup.show();
}
Related
In TinyMCE how can add and remove options to listboxes in a plugin pop up window?
editor.addMenuItem('insertValue', {
text: 'Menu item text',
context: 'tools',
onclick: function() {
availableElements=[
{
text:'Start typing into the search box'
}
];
var w=editor.windowManager.open({
title: 'Pop up window title',
body:[
{
type:'textbox',
name:'title',
label:'Search',
onkeyup:function(e){
$.post('THE URL WHICH GIVE BACK THE OPTIONS AS A JSON').done(function(response){
response=JSON.parse(response);
for (i in availableElements){
availableElements.pop();
}
if (typeof response.data!=="undefined"){
for (i in response.data){
availableElements.push({
value:response.data[i].id,
text:response.data[i].title
});
}
}
});
}
},
{
type:'listbox',
name:'id',
label:'Insert this value',
values:availableElements
}
],
width:600,
height:200,
buttons: [
{
text:'Insert',
onclick:'submit',
class:'mce-primary'
},
{
text:'Cancel',
onclick:'close'
}
],
onsubmit:function(){
tinymce.activeEditor.execCommand('mceInsertContent', false, w.find("#id").value());
}
});
}
});
I'm trying to create a handsontable context menu with different types. This site is linked to from the handsontable docs (for 0.16.1) http://swisnl.github.io/jQuery-contextMenu/docs/items.html however it doesn't seem to be working (code below). The context menu has two main items, and when I click on Font Size, the console logs its name but doesn't act like an input.
contextMenu: {
callback: function (key, options) {
console.log(key);
},
items: {
"status": {
name: 'Status',
submenu: {
items: [{
key: 'status:pnc',
name: 'Private and Confidential'
},
{
key: 'status:fxd',
name: 'Fixed'
}]
},
},
"fontsize": {
name: "Font Size",
type: 'text',
value: '14',
events: {
keyup: function(e) {
console.log(e.keycode);
}
}
}
}
},
For me the console.log works in chrome if i use your definition. I do see a broken submenu. If you look at the documentation a submenu you see the syntax is a bit different. You dont define an array, just another items object definition.
contextMenu: {
callback: function(key, options) {
console.log(key);
},
items: {
"status": {
name: 'Status',
submenu: {
items: {
{
key: 'status:pnc',
name: 'Private and Confidential'
},
{
key: 'status:fxd',
name: 'Fixed'
}
}
},
},
"fontsize": {
name: "Font Size",
type: 'text',
value: '14',
events: {
keyup: function(e) {
console.log(e.keycode);
}
}
}
}
},
See: http://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html
When i fixed the submenu, i and no problems with the fontsize item being shown as an input.
so I am trying to modify the example Cumulative flow chart here so that it has a release dropdown, making it so that it only shows information pertaining to a given release. My problem is that when a new release is selected from the release dropdown, the graph does not reload itself, and so it never actually shows information pertinent to the selected release. I think I have implemented the listeners correctly but I am not sure, so I am wondering if someone could tell me why this is happening and how to fix it. Thanks! My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Historical Summary</title>
<script type="text/javascript" src="/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CFDCalculator', {
extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator',
config: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
getMetrics: function() {
return _.map(this.getStateFieldValues(), function(stateFieldValue) {
return {
as: stateFieldValue,
groupByField: this.getStateFieldName(),
allowedValues: [stateFieldValue],
f: 'groupByCount',
display: 'area'
};
}, this);
}
});
Ext.define('Rally.example.CFDChart', {
extend: 'Rally.app.App',
requires: [
'Rally.example.CFDCalculator'
],
launch: function() {
this.add({
xtype: 'rallyreleasecombobox',
fieldLabel: 'Filter by Release:',
project: this.getContext().getProject(),
//value: Rally.util.Ref.getRelativeUri(this.getContext().getRelease()),
listeners: {
select: this._onSelect,
ready: this._onLoad,
scope: this
}
});
},
_onLoad: function() {
this.add({
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
//context: this.getContext();
});
},
_onSelect: function() {
var histChart = this.down('rallychart');
histChart.refresh({
storeConfig: {
filters: [this._getOwnerFilter()]
}
});
},
_getOwnerFilter: function() {
//var userCombo = this.down('rallyusersearchcombobox');
var releaseValue = this.down('rallyreleasecombobox');
return {
property: 'Release',
operator: '=',
value: releaseValue.getValue()
};
},
/**
* Generate the store config to retrieve all snapshots for stories and defects in the current project scope
* within the last 30 days
*/
_getStoreConfig: function() {
return {
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'TestSet' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) }
},
fetch: ['ScheduleState'],
hydrate: ['ScheduleState'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity
};
},
/**
* Generate a valid Highcharts configuration object to specify the chart
*/
_getChartConfig: function() {
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Project Cumulative Flow: User Stories & Test Sets'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 1,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
}
});
Rally.launchApp('Rally.example.CFDChart', {
name: 'Historical summary: test cases, stories, and defects'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Your code errors with "Uncaught TypeError: undefined is not a function" on line
histChart.refresh
I modified example of ProjectCumulativeFlow to filter by Release. Full code is in this github repo.
Instead of extending Rally.app.App, I extended Rally.app.TimeboxScopedApp.
SnapshotStore may filter by Release, but requires ObjectID.
Here is the find:
find: {
_TypeHierarchy: { '$in' : [ 'HierarchicalRequirement', 'Defect' ] },
Release: this.getContext().getTimeboxScope().record.data.ObjectID,
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID
}
To update the app after Release selection check if the chart already exists (if yes, destroy it):
onScopeChange: function() {
if (this.down('#mychart')) {
this.down('#mychart').destroy();
}
this.add({
xtype: 'rallychart',
itemId: 'mychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreConfig(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: 'ScheduleState',
stateFieldValues: ['Defined', 'In-Progress', 'Completed', 'Accepted']
},
chartConfig: this._getChartConfig()
});
},
I am trying to hide the column if all the cells in the column are empty. I am trying to do this in the column listener by iterating through the store but I guess the store isnt populated at that time. any suggestions to achieve this functionality?
Ext.define('com.abc.MyGrid' , {
extend: 'Ext.grid.Panel',
store : 'MyStore',
columns : [{
text : 'col1',
sortable : true,
dataIndex : 'col1'
}, {
text : 'col2 ',
sortable : true,
dataIndex : 'col2',
listeners:{
"beforerender": function(){
console.log(this.up('grid').store);
this.up('grid').store.each(function(record,idx){
// if all are null for record.get('col1')
// hide the column
console.log(record.get('col1'));
});
}
}
}
})
But this is isnt working. Basically the store loop in the column listener "before render" is not executing where as the above console(this.up('grid').store) prints the store with values.
Here you go, it doesn't handle everything but should be sufficient.
Ext.define('HideColumnIfEmpty', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.hideColumnIfEmpty',
mixins: {
bindable: 'Ext.util.Bindable'
},
init: function(grid) {
this.grid = grid;
this._initStates();
this.grid.on('reconfigure', this._initStates, this);
},
_initStates: function(store, columns) {
var store = this.grid.getStore(),
columns = this.grid.columns;
this.bindStore(store);
this.columns = columns;
if(store.getCount() > 0) {
this._maybeHideColumns();
}
},
/**
*#implement
*/
getStoreListeners: function() {
return {
load: this._maybeHideColumns
};
},
_maybeHideColumns: function() {
var columns = this.columns,
store = this.store,
columnKeysMc = new Ext.util.MixedCollection();
Ext.Array.forEach(columns, function(column) {
columnKeysMc.add(column.dataIndex, column);
});
Ext.Array.some(store.getRange(),function(record){
//don't saw off the branch you are sitting on
//eachKey does not clone
var keysToRemove = [];
columnKeysMc.eachKey(function(key) {
if(!Ext.isEmpty(record.get(key))) {
keysToRemove.push(key);
}
});
Ext.Array.forEach(keysToRemove, function(k) {
columnKeysMc.removeAtKey(k);
});
return columnKeysMc.getCount() === 0;
});
columnKeysMc.each(function(column) {
column.hide();
});
}
});
Here is an example:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' },
{ text: 'Says Doh', dataIndex: 'saysDoh'}
],
plugins: {ptype: 'hideColumnIfEmpty'},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
You can see in the example that saysDoh column is hidden.
If you want to iterate over the store, you need to put a listener on the load event of your store. The beforerender doesn't mean that your store is already loaded.
I would put the creation of you store in the initComponent. Something like this:
Ext.define('com.abc.MyGrid', {
extend: 'Ext.grid.Panel',
columns: [{
text: 'col1',
sortable: true,
dataIndex: 'col1'
}, {
text: 'col2 ',
sortable: true,
dataIndex: 'col2'
},
initComponent: function () {
var me = this;
//Create store
var myStore = Ext.create('MyStore');
myStore.load(); // You can remove this if autoLoad: true on your store.
//Listen to load event (fires when loading has completed)
myStore.on({
load: function (store, records, success) {
store.each(function (record, idx) {
console.log(record.get('col1'));
});
}
});
//Apply the store to your grid
Ext.apply(me, {
store: myStore
});
me.callParent();
}
});
i just start to dive in ExtJS Grid, I would like create some toolbar search like JqGrid below. Grid will show the result according to key typed in that column.
Can anyone show me the walkthrough ? ^_^
Thanks in advance for any answers.
jqgrid http://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/379109_10150531271858928_704228927_8868872_1607857946_n.jpg
The way I do it is I add a top toolbar to the gridpanel which contains searchfields. Then it's just the matter of hooking up events to callbacks.
Below is an example for ExtJS 3.x. It's edited out code from my project, so I might have cut out too much, or left something that's not needed. See buildTBar(), buildSearchBar() and attachListeners() methods in particular.
Ext.ns('MyNs');
MyNs.GridPanel = Ext.extend(Ext.grid.GridPanel,{
initComponent: function() {
this.colModel = this.buildColModel();
this.store = this.buildStore();
this.tbar = this.buildTBar();
MyNs.GridPanel.superclass.initComponent.call(this);
this.attachListeners();
},
attachListeners: function() {
this.on('render', function() {
this.getPagingBar().bindStore(this.getStore());
this.getSearchBar().bindStore(this.getStore());
});
//I use this grid in a tab, so I defer loading until tab is activated
this.on('activate',function() {
var store = this.getStore();
if(store.getCount() == 0) {
store.load({
params: {
start: 0,
limit: 20
}
})
}
});
},
buildColModel: function() {
return new Ext.grid.ColumnModel({
columns: [
{header: 'Index', dataIndex: 'index'}
]
})
},
buildStore: function() {
//return a store
},
buildTBar: function() {
var items = new Array(
this.buildPagingBar(),
this.buildSearchBar()
)
return {
xtype: 'panel',
items: items
}
},
buildPagingBar: function() {
return {
xtype: 'paging',
pageSize: 20,
displayInfo: true,
displayMsg: 'Records{0} - {1} z {2}',
}
},
buildSearchBar: function() {
return {
xtype: 'toolbar',
itemId: 'searchBar',
items: [
{xtype: 'textfield', itemId: 'index'},
],
bindStore: function(store) { //here we bind grid's store to searchbar
this.store = store;
var me = this;
store.on('beforeload', function(store, options) {
options.params.index = me.find('itemId','index')[0].getValue();
})
Ext.each(this.findByType('textfield'),function(field) { //let's have store reloaded on field changes
field.on('change', function(field, newValue, oldValue) {
store.reload();
})
})
}
}
},
getPagingBar: function() {
return this.getTopToolbar().findByType('paging')[0];
},
getSearchBar: function() {
return this.getTopToolbar().find('itemId','searchBar')[0];
}
});