setting dgrid allowSelectAll to true is not working - dojo

I have an empty grid, with the columns defined as below:
var json = { };
json.col1 = { label: 'Select', selector: 'checkbox' };
json.bndryName = "Boundary Name";
return json;
The boundary grid is initialized as below and the data/collection is loaded on a button click,and when I set allowSelectAll:true, I donot see the the header column rendered with a checkbox to select All. Please advise.
this._bndryGrid = new (declare([OnDemandGrid, Selection,Selector,ColumnResizer]))({
selectionMode: "multiple",
columns: columns,
class:'grid',
loadingMessage: "Loading data...",
noDataMessage: "No results found."
}, this.ap);

I'm not sure you've provided enough to go on here (and your grid doesn't even include allowSelectAll: true), but here is an example that works:
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v1.0.0'
},
{
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1'
}
]
}, [
'dojo/_base/declare',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/Selector',
'dstore/Memory',
'dojo/domReady!'
], function(declare, OnDemandGrid, Selection, Selector, Memory) {
var data = [
{ id: 1, name: 'Peter' },
{ id: 2, name: 'Paul' },
{ id: 3, name: 'Mary' }
];
var store = new Memory({ data: data });
var options = {
allowSelectAll: true,
collection: store,
columns: [
{ field: 'id', label: '', selector: 'checkbox' },
{ field: 'name', label: 'Name' }
]
};
new (declare([ OnDemandGrid, Selection, Selector ]))(options, 'gridcontainer');
});

Related

Loadash filter need to get exact match

When trying to filter array using Lodash, i am getting all the element of that array. Need to get the specific array only. Please find my coding so far
var sizeList = [{
id: 1,
title: "Test1",
type: [{
name: "1.1",
present: false
}, {
name: "1.2",
present: true
}, {
name: "1.3",
present: false
}]
}, {
id: 2,
title: "Test2",
type: [{
name: "2.1",
present: false
}, {
name: "2.2",
present: true
}, {
name: "2.3",
present: false
}]
}, {
id: 3,
title: "Test3",
type: [{
name: "3.1",
present: false
}, {
name: "3.2",
present: true
}, {
name: "3.3",
present: true
}]
}],
result = _.filter(sizeList, {
type: [{
name: '3.3'
}]
});
console.log(result);
My problem is, when i filter with name:3.3 i am getting all the element in Test3 array including 3.1, 3.2 and 3.3. I need to only 3.3. Can anyone please help.
You can map the items after filtering by type, and filter the type array as well:
var sizeList = [{"id":1,"title":"Test1","type":[{"name":"1.1","present":false},{"name":"1.2","present":true},{"name":"1.3","present":false}]},{"id":2,"title":"Test2","type":[{"name":"2.1","present":false},{"name":"2.2","present":true},{"name":"2.3","present":false}]},{"id":3,"title":"Test3","type":[{"name":"3.1","present":false},{"name":"3.2","present":true},{"name":"3.3","present":true}]}];
var result = _(sizeList)
.filter({
type: [{ name: '3.3' }]
})
.map(({ type, ...o }) => ({
...o,
type: _.filter(type, { name: '3.3' })
}))
.value();
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

Static grid with dynamic data on button click in extjs4

I'm trying to display different data (from different store and model) deponding on button click but failing at some point ( to be frank, I'm not sure how to use the reconfigure function). Below is my code:
Components and button click function:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 328,
width: 478,
title: 'My Panel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'Button1'
},
{
xtype: 'button',
text: 'Button2',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
},
{
xtype: 'button',
text: 'Button3'
},
{
xtype: 'gridpanel',
id: 'myGrid',
title: 'My Grid Panel',
store: 'Button1Store',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Email',
text: 'Email'
}
]
}
]
});
me.callParent(arguments);
},
onButtonClick: function(button, e, eOpts) {
//alert("button 2");
var gridVar = Ext.getCmp('myGrid');
var newStore = Ext.getCmp('MyStore2');
//alert( gridVar.columns[0].dataIndex);
//gridVar.bindStore(newStore);
gridVar.reconfigure(newStore, gridVar.columns);
}
});
Store1 and Model 1:
Ext.define('MyApp.store.Button1Store', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Button1Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.Button1Model',
storeId: 'MyStore1',
data: [
{
Name: '1',
Email: 'test1'
},
{
Name: '2',
Email: 'test2'
},
]
}, cfg)]);
}
});
Ext.define('MyApp.model.Button1Model', {
extend: 'Ext.data.Model',
idProperty: 'Button1Model',
fields: [
{
name: 'Name'
},
{
name: 'Email'
}
]
});
Store 2 and Model 2:
Ext.define('MyApp.store.Button2Store', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Button2Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.Button2Model',
storeId: 'MyStore2',
data: [
{
Name: '3',
Email: 'test3'
},
{
Name: '4',
Email: 'test4'
}
]
}, cfg)]);
}
});
Ext.define('MyApp.model.Button2Model', {
extend: 'Ext.data.Model',
fields: [
{
name: 'Name'
},
{
name: 'Email'
}
]
});
When I try this, the title and data in the grid dissappears. I tried the gridVar.bindStore(newStore); but it throwed an error stating that data is null or undefined. Pls help...
If you are using same grid for all actions then change the store's proxy URL for various actions and populate the data to grid by using load() method !!

Adding image near text in NestedList- Sencha Touch 2

I'm a new sencha learner , what i want to do is adding an image to the nested list text.
I tried to modify kithcensink exapmle code,This is my nestedlist
Ext.require('Ext.data.TreeStore', function() {
Ext.define('Kitchensink.view.NestedList', {
requires: ['Kitchensink.view.EditorPanel', 'Kitchensink.model.Kategori'],
extend: 'Ext.Container',
config: {
layout: 'fit',
items: [{
xtype: 'nestedlist',
store: {
type: 'tree',
id: 'NestedListStore',
model: 'Kitchensink.model.Kategori',
root: {},
proxy: {
type: 'ajax',
url: 'altkategoriler.json'
}
},
displayField: 'text',
listeners: {
leafitemtap: function(me, list, index, item) {
var editorPanel = Ext.getCmp('editorPanel') || new Kitchensink.view.EditorPanel();
editorPanel.setRecord(list.getStore().getAt(index));
if (!editorPanel.getParent()) {
Ext.Viewport.add(editorPanel);
}
editorPanel.show();
}
}
}]
}
});
});
I modified the store file
var root = {
id: 'root',
text: 'Lezzet Dünyası',
items: [
{
text: 'Ana Menü',
id: 'ui',
cls: 'launchscreen',
items: [
{
text: 'Et Yemekleri',
leaf: true,
view:'NestedList3',
id: 'nestedlist3'
},
{
text: 'Makarnalar',
leaf: true,
view: 'NestedList2',
id: 'nestedlist2'
},
{
text: 'Tatlılar',
leaf: true,
view: 'NestedList4',
id: 'nestedlist4'
},
{
text: 'Çorbalar',
view: 'NestedList',
leaf: true,
id: 'nestedlist'
}
]
}
]
};
How should I edit the code to add image near the nested list text ?
For example , in this site you can see a nested list example , I need an images near Blues,Jazz,Pop,Rock.
Generally, you can do more than what you need by customizing your getItemTextTpl (place it into your Ext.NestedList definition, for example:
getItemTextTpl: function(node) {
return '<span><img src="image_url" alt="alternative_text">{text}</span>';
}
Define whatever template you like through that returning string.

Add list to Sencha touch panel

I've been trying for two days to add a list or NestedList to one of my tabs in Sencha Touch and I can't do it :( My tab code is:
Darsnameh.views.Coursecard = Ext.extend(Ext.Panel,{
title: "Courses",
iconCls: "bookmarks",
style:"background:red",
dockedItems:[{
xtype:'toolbar',
title:'Courses'
}]
})
Ext.reg('coursecard',Darsnameh.views.Coursecard);
and my list code is
Ext.regModel('Contact',{
fields:['firstName','lastName']
});
Darsnameh.CoursesStore = new Ext.data.Store({
model: 'Contact',
data:[
{firstName:'Domino', lastName:'Derval' },
{firstName:'Domino2', lastName:'Derval2' },
{firstName:'Domino3', lastName:'Derval3' },
{firstName:'Domino4', lastName:'Derval4' },
{firstName:'Domino5', lastName:'Derval5' },
{firstName:'Domino6', lastName:'Derval6' }
]
});
Darsnameh.coursesList = new Ext.List({
id:'courseslist',
store: Darsnameh.CoursesStore,
itemTpl:'<div class="contact">{firstName}</div>'
});
When I add anything like
items:[Darsnameh.coursesList]
the application page is blank and nothing is shown, what should I add to have the list, or nested list in a tab?
In accordance to my previous answer i've added how to create list panel... just have a look at this
NotesApp.views.noteEditor = new Ext.form.FormPanel({
id:'noteEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
} ,
],
dockedItems: [
NotesApp.views.noteEditorTopToolbar,
]
});
NotesApp.views.noteEditorTopToolbar = new Ext.Toolbar({
title: 'Edit Note',
items: [
{
text: 'Save',
ui: 'action',
handler: function () {
var noteEditor = NotesApp.views.noteEditor;
var currentNote = noteEditor.getRecord();
noteEditor.updateRecord(currentNote);
var errors = currentNote.validate();
if (!errors.isValid()) {
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}
var notesList = NotesApp.views.notesList;
var notesStore = notesList.getStore(); // where i've declared my store
if (notesStore.findRecord('id', currentNote.data.id) === null) {
notesStore.add(currentNote);
} else {
currentNote.setDirty();
}
notesStore.sync();
}
}
]
});
var NotesStore=new Ext.data.Store({
model: 'Note',
storeId:'noteid',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'notes-app-localstore'
},
});
NotesApp.views.notesList = new Ext.List({
id: 'notesList',
store: NotesStore,
itemTpl: '<div class="list-item-title">{title}</div>'+
'<div class="list-item-narrative">{narrative}</div>',
onItemDisclosure:function(listrecord){
var selectedNote = listrecord;
NotesApp.views.noteEditor.load(selectedNote);
NotesApp.views.viewport.setActiveItem('noteEditor', { type: 'slide', direction: 'left' });
},
listeners: {
'render': function (thisComponent) {
thisComponent.getStore().load();
}
}
});

ExtJS, SenchaTouch - FormPanel can't load values from a store?

How do you load values into a formpanel from a store? I've built an entire broken example here.
I'm not sure why my form fields aren't loaded.
The model:
Ext.ns('app', 'app.defaults');
Ext.regModel('MyModel', {
fields: [
{name: 'var1', type: 'integer'}
]
});
app.defaults.vars = {
var1: 5
};
The store:
var myStore = new Ext.data.Store({
model: 'MyModel',
proxy: {
type: 'localstorage',
id: 'model-proxy'
},
listeners: {
load: function(store, records, successful) {
if (this.getCount() > 1) {
alert('Error: More than one record is impossible.');
this.proxy.clear();
}
if (this.getCount() == 0) {
alert( "Count 0, loading defaults");
this.add(app.defaults.vars);
this.sync();
}
console.log("Attempting to load store");
myForm.load(this);
}
},
autoLoad: true,
autoSave: true
});
The form:
var myForm = new Ext.form.FormPanel({
id: 'my-form',
scroll: 'vertical',
items: [
{
xtype: 'fieldset',
defaults: {
labelWidth: '35%'
},
items: [
{
xtype: 'numberfield',
id: 'var1',
name: 'var1',
label: 'Var1',
placeHolder: '100',
useClearIcon: true
}
]
}
]
});
I found other way to connect formpanel with the data
After the form is loaded insert following code
myForm.getForm().loadRecord(Ext.ModelManager.create({
'var1':5
}, 'MyModel'));
So, then, load a record instead of the store. Load records[0] instead of this.