I have a problem in my ext JS applicatiom. Use MVC architecture:
Ext.define('ME.controller.Stocks', {
extend:'Ext.app.Controller',
models:[
'Logs'
],
stores:[
'Logs'
],
views:[
'portal.portalItems.logGridPanel.LogGridPanel',
'portal.portalItems.logGridPanel.LogGrid',
'portal.PortalPanel',
'portal.PortalDropZone',
'portal.PortalColumn',
'portal.Portlet',
'portal.portalItems.base.Panel',
]
});
Component with name 'LogGrid' adds to viewport dynamically. Its initcomponent function looks like:
initComponent: function()
{
var me=this;
var store= Ext.create('ME.store.Logs', {
storeId:Utils.formUID(LOGS_GRID.LOGS_STORE_ID, me[FIELDS_MAPPER.BASE_PANEL.CLIENTSIDE_GUID]),
sorters:[
{
property:FIELDS_MAPPER.LOGS_GRID.LOG_DATE,
direction:'DESC'
}
]
});
this.store=store;
this.columns=[
{
text:Message.get('console.portal.logGrid.DateHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.LOG_DATE,
renderer:Ext.util.Format.dateRenderer('H:i:s<br>d.m.Y')
},
{
text:Message.get('console.portal.logGrid.DepartmentHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.DEPARTMENT_NAME
},
{
text:Message.get('console.portal.logGrid.ProtectionSystemsHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.PROTECTION_SYSTEM_NAME
},
{
text:Message.get('console.portal.logGrid.PlanHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.PLAN_NAME
},
{
text:Message.get('console.portal.logGrid.SourceHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.SECTION_NAME
},
{
text:Message.get('console.portal.logGrid.MessageTextHeaderText'),
dataIndex:FIELDS_MAPPER.LOGS_MODEL.EVENT_TYPE_NAME,
minWidth:200
},
{
dataIndex:FIELDS_MAPPER.LOGS_MODEL.EVENT_STATE_NAME,
text:Message.get('console.portal.logGrid.StateHeaderText')
// renderer:changeStateColor
}
];
me.callParent(arguments);
}
Logs store is:
Ext.define('ME.store.Logs', {
extend:'Ext.data.Store',
model:'ME.model.Logs',
proxy:{
type:'ajax',
url:URLS.JOURNAL_CONTROLLER,
extraParams:{action:'getEvents'},
actionMethods:{
read:'POST'
},
reader:{
type:'json',
idProperty:FIELDS_MAPPER.LOGS_GRID.LOG_ID
},
autoLoad:false
},
pageSize:LOGS_GRID.ITEMS_PER_PAGE
});
PROBLEM IS:
When I have one instance of grid, everything OK, but when I add new instance of grid, rows (selection model) dissapears from both grids. Such bug appears also when I collapse grids.
If it will be useful, grid component is situated in different panels.
And also I saw such thing:
When I create LogsGrid in one container with grid that uses different store, such bug appears too, but now rows from logGrid moves to another grid.. I don't know what to do.. Second day can't find an answer
Related
I am having great difficulty trying to render a treeview with angular and kendo. Here is the code I have so far:
Website1.controller("FieldsController1", function ($scope) {
$scope.things = {
data: [
{
text: "Furniture", items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
]
};
Above is the controller. And here is the markup.
<ul kendo-tree-view k-hierarchical-data-source="things">
</ul>
Also, is there any documentation on how to do this?
I got it working via k-options.
http://jsfiddle.net/M84qj/1/
The only documentation I could find was this page, which, judging from your use of "things", you found as well :p
http://kendo-labs.github.io/angular-kendo/#/
Good luck with Kendo + Angular :)
While this post is a bit old it's one of the first ones that come up on a Google search. When creating a treeview make sure you create a HierarchicalDataSource. This allows you to define child nodes and other properties such as whether or not the item should have child nodes. This helps a ton when using a remote data source.
I have created a custom grid in a javascript file. I want to use it as a xtype on to different panels in seperate js files. If I use it on a single panel, it works fine; but when I use try it use it on different panels at the same time, I get a error in the chrome developer tool console saying:
Uncaught TypeError: Cannot read property 'isComponent' of undefined
My grid definition is as follows:
Ext.define('DataBox.view.FootNotes', {
extend : 'Ext.grid.Panel',
alias : 'widget.footNotes',
initComponent : function() {
this.columns = [ {
header : 'SL',
field : {
xtype : 'checkbox',
checked : 'true'
}
}, {
header : 'Symbol',
}, {
header : 'Notes',
}, ];
this.callParent(arguments);
}
});
and to include the grid on the panels i use following code
initComponent : function() {
/* this.footNotesInfoGrid = Ext.create('DataBox.view.FootNotes', {
colspan: 2,
border: false,
frame: 'false'
}); even tried this */
Ext.apply(this,{
items : [{
xtype : 'footNotes',
columnWidth : .50,
id : 'infoFootNotesGrid',
}]
}
}
I tried many other ways suggested on different forum discussions.. but my problem stil persists.
Can somebody point out where I am going wrong?
Don't assign created objects within a configuration! Use initComponent for that!
this line
plugins : [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ],
should be placed as
this.plugins = [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ];
anywhere in the initComponent body, but before callParent is called
Edit:
to still allow override do
if(!this.plugins) {
this.plugins = [ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
}) ];
}
Edit
Avoid using static id properties! The framework handle that part for you. Wrap your head around Ext.ComponentQuery instead. It will help you to find any Component you are looking for.
i have simple 'gridpanel' with 'tbar' like this
Ext.define('Ext.abc.grid', {
extend: 'Ext.grid.Panel',
type:1,
tbar:[
{
text:'title1',
class :'a1',
handler:function(type){
if (this.type == 1) { // button not 1
Ext.query(".a2").setDisabled(false);
}
},{
text:'title2',
class :'a2',
handler:function(type){
if (this.type == 1) { // button not 1
Ext.query(".a1").setDisabled(false);
}
}
]
});
i try to add class (a1) to button title1 and the some for title2, but when i get class like
Ext.query(".a1").setDisabled(false);
it's not working
and i can't get type = 1 when i click title1, i using this.type but results is 'button' not 1
How can i do that, thanks
You've got several problems here.
First, see sha's answer, you're getting an array as the result of your call to Ext.query(...).
Second, Ext.query returns Ext.dom.Element, which are Ext objects for representing actual DOM elements like div, img, etc. What you want to access, your buttons, are Ext.Component. You can query components with Ext.ComponentQuery.
Then, you're using this.type in your button handler functions, but when these method get called, this will be the button itself (this can be customized using the scope option), not the container on which you set type: 1.
Edit:
Here's how to make your example work:
Ext.define('Ext.abc.Grid', {
extend: 'Ext.grid.Panel'
,type: 1
,tbar: [{
text: 'title1'
,itemId: 'button1'
// just FYI, here the scope (this) is the window, because we are not
// in a method
,scope: this // so this doesn't work
,handler: function() {
// using ComponentQuery to get a reference to the other components
var grid = this.up('grid'), // by xtype
tbar = this.up(), // by relative position
button2 = tbar.down('#button2'); // by itemId
if (grid.type === 1) {
button2.disable();
}
}
}, {
text: 'title2'
,itemId: 'button2'
,handler: function() { ... }
}]
});
Now, reading your mind, here's what I think you actually want to do:
Ext.define('Ext.abc.Grid', {
extend: 'Ext.grid.Panel'
,type: 1
,tbar: [{
text: 'title1'
,itemId: 'button1'
}, {
text: 'title2'
,itemId: 'button2'
}]
// reading in your mind, I guess, this is what you really want to do:
,initComponent: function() {
this.callParent();
if (this.type === 1) {
this.down('#button2').disable();
} else {
this.down('#button1').disable();
}
}
});
Ext.query returns you an array http://docs.sencha.com/extjs/4.1.3/#!/api/Ext-method-query
You can't simply call setDisabled() on an array. You need to loop through all elements.
So I'm trying to put items dynamically to the panel that has slidenavigation feature:
// FlyoutNavigation.js
Ext.define("APN.view.FlyoutNavigation", {
id: "flyoutNavigationPanel",
extend: 'Ext.ux.slidenavigation.View',
Here is the initialisation of the view in another view:
// MainViewContainer.js
this.home = "Some var"
this.flyout = Ext.create('APN.view.FlyoutNavigation', {
id: 'flyoutNavigationPanel',
home: this.home
});
Than I'm trying to use this variable in the this.config.items section, however that doesn't work, it seems that Sencha compiles everything first and than initialiases the components, I might be wrong, I'm really new to Sencha Framework.
So here is the view where the home variable is used:
Ext.define("APN.view.FlyoutNavigation", {
id: "flyoutNavigationPanel",
extend: 'Ext.ux.slidenavigation.View',
xtype: 'flyoutnavigation',
requires: [
... heaps of things omitted ...
],
initialize: function () {
this.callParent();
this.setupDynamicItems();
},
config: {
items: [
{
itemId: 'nav_home',
id: 'homeView',
items: [{
xtype: 'articlelist',
id: 'latestNews',
feedUrlName: this.home, // - that's the place where UNDEFINED occurs
flex: 1
}
],
},
So this.home is undefined...
One possible solution
Comming from this question: How to dynamically create xtype templates in Sencha Touch
I decided to put all the code in this.config.items.add({ ... my items ... }) however Ext.ux.slidenavigation.View looks like gave me the BUG! :( as the initialise method occurs after the binding methods on items of FlyoutNavigation view.
Here is the message from of the bug: Uncaught TypeError: Cannot read property 'raw' of undefined View.js:310 which is basically this line: if (Ext.isFunction(item.raw.handler)) {
So my questions would be
How to get the instance variable in the config.items section? If that's possible, than all is OK
Or do you know the work around of this issue?
Thanks
I don't think you can use this.config when defining the class, instead you can use initialize function as I told you earlier. So you should be able to do this:
initialize : function() {
var me = this;
var home = me.config.home;
me.add({
itemId: 'nav_home',
id: 'homeView',
items: [{
xtype: 'articlelist',
id: 'latestNews',
feedUrlName: home,
flex: 1
}
],
});
}
OR if you have defined homeView in parent class, you can do this:
initialize : function() {
var me = this;
var home = me.config.home;
me.down('#homeView').add({
xtype: 'articlelist',
id: 'latestNews',
feedUrlName: home,
flex: 1
});
}
I would like to know if the following approach is supported:
Define grid schema and columns and initialize with an empty array:
var dataSource = new kendo.data.DataSource({
data: [] // intentionally empty!
});
$("#grid").kendoGrid({
dataSource: dataSource,
schema: {
model: {
fields: {
arrive: {type: "number"},
depart: {type: "number"},
src: {type: "string"}
}
}
},
columns: [
{ field: "arrive", groupable: false, title: "arrive",width:88},
{ field: "depart", groupable: false, title: "depart",width:88},
{ field: "src", groupable: true, title: "src", width:44 }
]
etcetera
});
Then, after configuration/initialization, bind to the Change event:
var grid = $('#grid').data('kendoGrid');
grid.dataSource.bind("change", function (e) {
dataChanged();
});
function dataChanged() {
var grid = $("#grid").data("kendoGrid");
grid.refresh();
}
Then do this:
function populateDatasource(event, data) {
var grid = $('#grid').data('kendoGrid');
var parsedData = $.parseJSON(data);
grid.dataSource.data(parsedData);
}
which would trigger the changed event and refresh the grid. I am thinking that the observe pattern might have some trouble if the dataSource is initialized with an empty array.
I am not sure what you mean by observe pattern. But the grid can have an empty data source. Here is a demo: http://jsbin.com/izizut/1/edit
Your grid configuration is wrong. The schema setting is part of the data source configuration not the grid. You can find more information in the data source API reference.
Also there is no need to subscribe to the change event of the data source in this case. The grid is listening to it by default and will get refreshed automatically.