When i use Ext.ux.touch.grid,an error happened?
"Cannot read property 'features' of undefined "
but it only happen when i use it like this,
this.testGrid = Ext.create('Geo.view.Grid');
in file application.js,a main controller file
config: {
refs: {
main: 'mainview',
worklist: 'worklist',
testGrid: 'testGrid'
},
this is testGrid view file
Ext.define('Geo.view.Grid', {
extend : 'Ext.ux.touch.grid.List',
xtype : 'testGrid',
requires : [
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Editable',
'Ext.ux.touch.grid.feature.Sorter',
'Ext.field.Number',
'Geo.store.Grid'
],
config : {
title : 'Grid',
store : true,
columns : [
{
header : 'Text',
dataIndex : 'text',
width : '90%',
editor : {
xtype : 'textfield'
}
},
{
header : 'Amount',
dataIndex : 'amount',
width : '10%',
editor : {
xtype : 'numberfield'
}
}
],
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Editable',
launchFn : 'initialize'
}
]
},
applyStore : function() {
return new Geo.store.Grid();
}
});
When direct use it in main view file,it's Correct
items: [
{xtype: 'dashboards'},
{xtype: 'testGrid'}
]
Who know the reason? Thanks a lot
do you set your store to autoload: true, (?)
Related
I am trying to submit the values from the menu buttons but know this is not possible and that I have to create a hidden field and store the button values there.
Being new to ExtJs I can not seem to figure out how to do this. Below is the basic layout I used to check the button shows and I can choose a colour.
getFormItems : function() {
var me = this;
return [{
xtype : "fieldset",
title : "Items to monitor",
defaults : {
labelSeparator : ""
},
items : [{
xtype : "checkbox",
name : "cpuenable",
boxLabel : _("Will monitor CPU Temperature"),
fieldLabel : _("CPU Temperature"),
checked : false
},{
xtype : 'hiddenfield',
id : 'buttonvalues'
},{
xtype : "button",
name : "colours",
text : _("Choose Colours"),
scope : this,
style : {
marginTop : "10px",
marginBottom : "10px"
},
menu: [{
text: "Main CPU Colour",
menu: {
xtype : "colormenu",
name : "colourc",
value : "000000",
cls : "menubutton-class",
handler: function (obj, rgb) {
var colourmField = this.findField('colourc');
colourmField.setValue(rgb.toString());
alert(colourmField.getValue());
}
}
},{ and so on
Okay, here is an edit for you of my previous post. I give you an example how to fetch all child components you want inside a component:
Example extjs:
{
xtype: 'fieldset',
id: 'fsButtons',
items: [
{
xtype: 'hiddenfield',
id: 'hiddenValues'
},
{
xtype: 'button'
color: '000000'
},
{
xtype: 'button'
color: '555555'
}
]
}
Function to fill the hiddenfield:
function getButtonVars() {
var buttonVars = new Array();
//Get all components with xtype 'button' inside the fieldset with id 'fsButtons'
Ext.Array.each(Ext.ComponentQuery.query('button', Ext.getCmp('fsButtons'), function(button){
buttonVars.push(button.color);
});
Ext.getCmp('hiddenValues').setValue(buttonVars.join(',')); // concats all button values to one string: '000000,555555' etc.
}
I hope it's clear now :)
http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery
I would like to change default contextmenu and customize the create function with submenus: create service and create application. Then I would also like to associate icons with the service and application submenus.
I searched available solutions on stackoverflow and modified it to suit my requirements. But it does not work.
So far, when I click on submenu the alert box is displayed. But the create node does not work. The icons are not displayed either.
Can someone please tell me how to fix this?
"contextmenu" : {
items : { b
"create" : {
"separator_before" : false,
"separator_after" : true,
"label" : "Create",
"action" : false,
"submenu" :{
"create_service" : {
"seperator_before" : false,
"seperator_after" : false,
"label" : "service",
"icon": "service.png",
action : function (obj) {
alert("creating service");
this.create(obj, "last", {"attr" : {"rel" : "service"}});
}
},
"create_application" : {
"seperator_before" : false,
"seperator_after" : false,
"label" : "app",
"icon": "app.png",
action : function (obj) {
alert("creating app");
this.create(obj, "last", {"attr" : { "rel" : "application"}});
}
}
}
}
}
}
check line 2, and remove the "b":
items : { b
As an example, a snippet of my contect menu (maybe this helps):
"contextmenu": {
"items": {
"create" : false,
"ccp" : false,
"rename" : false,
"remove" : {
"label" : " Delete",
"icon" : "/images/icon/cross.png"
}
}
},
Use full path for the icon image, like this
icon: "/Content/images/deleteIcon.gif"
I want to use jtable in jquery UI dialogue widget. I'm loading the content of dialogue widget dynamically as follows
$( "#dialog4" ).dialog({
autoOpen: false,
height:$(window).height() - 50,
width:$(window).width() - 50,
show: {
effect: "blind",
duration: 400,
},
hide: {
effect: "explode",
duration: 400
},
open: function (){
$(this).load("managegroupmembers.jsp");
}
});
my jtable code is present in managegroupmembers.jsp. It is as follows:
<script>
$(function() {
$('groupmembers')
.jtable(
{
title : 'Members in Group',
jqueryuiTheme : true,
selecting : true, //Enable selecting
multiselect : true, //Allow multiple selecting
selectingCheckboxes : true,
paging : true,
pageSize : 20,
pageSizes : [ 20, 50, 75, 100, 200, 500 ],
defaultSorting : 'fullName ASC',
sorting : true,
actions : {
listAction : 'group'
},
fields : {
groupID : {
key : true,
list : false
},
memberID : {
key : true,
list : false
},
fullName : {
create : false,
edit : false,
title : 'Name',
width : '15%'
},
memberRole : {
title : 'Role in Group',
width : '7%',
display : function(data) {
var roleName = "";
if (data.record.memberRole != null) {
roleName = data.record.memberRole.roleName;
}
return roleName;
}
},
memberSince : {
list : true,
title : 'Member Since',
inputClass : 'text ui-widget-content ui-corner-all inputClass'
}
}
});
$('#groupmembers').jtable('load');
});
</script>
<div id="groupmembers" class="ui-widget"></div>
I tried to debug the code using chrome's developer tools and I'm seeing following error:
"cannot call methods on jtable prior to initialization; attempted to call method 'load'"
Can anybody help me here? Thanks in advance.
You are not initializing the jTable because you forgot the # in front of the groupmembers ID in the init code....
$('groupmembers')
should be:
$('#groupmembers')
We work with two types of documents on elastic search (ES): items and slots, where items are parents of slot documents.
We define the index with the following command:
curl -XPOST 'localhost:9200/items' -d #itemsdef.json
where itemsdef.json has the following definition
{
"mappings" : {
"item" : {
"properties" : {
"id" : {"type" : "long" },
"name" : {
"type" : "string",
"_analyzer" : "textIndexAnalyzer"
},
"location" : {"type" : "geo_point" },
}
}
},
"settings" : {
"analysis" : {
"analyzer" : {
"activityIndexAnalyzer" : {
"alias" : ["activityQueryAnalyzer"],
"type" : "custom",
"tokenizer" : "whitespace",
"filter" : ["trim", "lowercase", "asciifolding", "spanish_stop", "spanish_synonym"]
},
"textIndexAnalyzer" : {
"type" : "custom",
"tokenizer" : "whitespace",
"filter" : ["word_delimiter_impl", "trim", "lowercase", "asciifolding", "spanish_stop", "spanish_synonym"]
},
"textQueryAnalyzer" : {
"type" : "custom",
"tokenizer" : "whitespace",
"filter" : ["trim", "lowercase", "asciifolding", "spanish_stop"]
}
},
"filter" : {
"spanish_stop" : {
"type" : "stop",
"ignore_case" : true,
"enable_position_increments" : true,
"stopwords_path" : "analysis/spanish-stopwords.txt"
},
"spanish_synonym" : {
"type" : "synonym",
"synonyms_path" : "analysis/spanish-synonyms.txt"
},
"word_delimiter_impl" : {
"type" : "word_delimiter",
"generate_word_parts" : true,
"generate_number_parts" : true,
"catenate_words" : true,
"catenate_numbers" : true,
"split_on_case_change" : false
}
}
}
}
}
Then we add the child document definition using the following command:
curl -XPOST 'localhost:9200/items/slot/_mapping' -d #slotsdef.json
Where slotsdef.json has the following definition:
{
"slot" : {
"_parent" : {"type" : "item"},
"_routing" : {
"required" : true,
"path" : "parent_id"
},
"properties": {
"id" : { "type" : "long" },
"parent_id" : { "type" : "long" },
"activity" : {
"type" : "string",
"_analyzer" : "activityIndexAnalyzer"
},
"day" : { "type" : "integer" },
"start" : { "type" : "integer" },
"end" : { "type" : "integer" }
}
}
}
Finally we perform a bulk index with the following command:
curl -XPOST 'localhost:9200/items/_bulk' --data-binary #testbulk.json
Where testbulk.json holds the following data:
{"index":{"_type": "item", "_id":35}}
{"location":[40.4,-3.6],"id":35,"name":"A Name"}
{"index":{"_type":"slot","_id":126,"_parent":35}}
{"id":126,"start":1330,"day":1,"end":1730,"activity":"An Activity","parent_id":35}
We see through ES Head plugin that definitions seem to be ok. We test the analyzers to check that they have been loaded and they work. Both documents appear listed in ES Head browser view. But if we try to retrieve the child item using the API, ES responds that it does not exist:
$ curl -XGET 'localhost:9200/items/slot/126'
{"_index":"items","_type":"slot","_id":"126","exists":false}
When we import 50 documents, all parent documents can be retrieved through API, but only SOME of the requests for child elements get a successful response.
My guess is that it may have something to do with how docs are stored across shards and the routing...which certainly is not clear to me how it works.
Any clue on how to be able to retrieve individual child documents? ES Head shows they have been stored but HTTP GETs to localhost:9200/items/slot/XXX respond randomly with "exists":false.
The child documents are using parent's id for routing. So, in order to retrieve child documents you need to specify parent id in the routing parameter on your query:
curl "localhost:9200/items/slot/126?routing=35"
If parent id is not available, you will have to search for the child documents:
curl "localhost:9200/items/slot/_search?q=id:126"
or switch to an index with a single shard.
I have a grid in my application that is configured with xtype : 'pagingtoolbar' and the store that related to this grid is configured with pageSize : 10, the result is that the pagingtoolbar is correctly dispayed (like following) but I have a scroller in the grid and all records are loaded in the grid. surely I'm missing sth in grid/store config :
Grid :
xtype : 'gridpanel',
store : mystore,
height : 350,
hidden : true,
columns : [ {
dataIndex : 'firstName',
text : 'First Name',
flex : 1
},{
dataIndex : 'lastName',
text : 'Last Name',
flex : 1
},{
dataIndex : 'email',
text : 'Email',
flex : 1
}],
dockedItems : [ {
xtype : 'pagingtoolbar',
hight : 28,
displayInfo : true,
dock : 'bottom'
} ]
Store :
Ext.define('Users',{
extend: 'Ext.data.Store',
model: usersModel,
pageSize : 10,
proxy: {
type: 'ajax',
url: 'servletURL',
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
},
writer: {
type : 'json',
root: 'data'
},
actionMethods: {
read : 'POST',
create : 'POST',
update : 'POST',
destroy: 'POST'
},
},
sortOnLoad: true,
sorters: { property: 'dateTimeTrx', direction : 'DESC' },
});
I'm correctly receiving data from server side, but I can't display pages, all data is in one page even that the pagingtoolbar is correctly displayed as shown above, Any help in that? Thanks!
ExtJs pagingtoolbar is not responsible for extracting needed data from server response. Instead, your server has to response with exactly that data that should be displayed for the current page. In order to tell server what data is needed ExtJs would send additional params (something like ?start=0&page=1&limit=10). You have to form the response accordingly to this params.