I have a search bar on the top of a page where user can type any word. I want to display the names of the songs which contain the word typed by user. How to design this using enyo.js?
Made a little fiddle with comments especialy for you :)
http://jsfiddle.net/joopmicroop/NEYQC/
enyo.kind({
name: 'App',
kind: enyo.Control,
components: [
{kind: 'FittableRows', components:[
{name: 'footer', kind: 'onyx.Toolbar', components: [
{kind: "onyx.InputDecorator", components: [
{kind: "onyx.Input", name:"inputfield", placeholder: "Search number"},
]},
{kind: "onyx.Button", content: "Search", ontap: "search"},
]},
{kind: "List", fit: true, name:'list', classes:'list', count: 20, fixedHeight: true, onSetupItem: "setupItem", components: [
{name: "item", classes:'listitem', ontap: "itemTap", components: [
{tag:'span', name: "name", content:"song name"},
{tag:'span', name: "index", content:"", style:'float:right;'}
]},
]},
]}
],
searchstring:'',
search: function(inSender, inEvent) {
console.log('search tapped');
console.log('inputfield value: ', this.$.inputfield.getValue());
console.log('list: ', this.$.item);
console.log('searchstring: ',this.searchstring);
this.searchstring = this.$.inputfield.getValue();
this.$.list.refresh();
},
setupItem: function(inSender, inEvent) {
// just to have something to fill in
var data = ['alibaba', 'alibobo', 'alibibi'];
this.$.index.setContent(inEvent.index);
this.$.name.setContent(data[inEvent.index %3]);
// if searchstring isn't emty get to work
if(this.searchstring != ''){
var regex = new RegExp(this.searchstring); // = /searchstrin/g
if(this.$.name.getContent().search(regex) != -1){ // -1 = not found
this.$.list.select(inEvent.index, true); // set state selected true
}
// if selected = true change add css class
this.$.item.addRemoveClass("listitemselected", inSender.isSelected(inEvent.index));
}
},
itemTap: function(inSender, inEvent) {
alert("You tapped on row: " + inEvent.index);
},
});
i got a sample posted here as part of my enyojs tutorial, but it uses a third party library called taffyDB here
Related
I want to add some styling to the last row in my grid. I wont know what the row number is as there could be any number of rows. How can I go about this? I've seen rowClass and rowRenderer but not a working example. Here is the code I have:
var displayData = function (itemViewModelList) {
var fields = [
{
name: 'ConsultantName', type: 'text', width: 100, title: 'Consultant Name'
},
{
name: 'BranchName', type: 'text', width: 100, title: 'Branch Name', css: "red"
},
{ name: 'NumberOfInvestments', type: 'text', title: 'Number Of Investments' },
{
name: 'ValueOfInvestments', type: 'money', width: 150, title: 'Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'AverageValueOfInvestments', type: 'money', width: 150, title: 'Average Value Of Investments',
itemTemplate: function (value) {
return tisCommon.formatForMoney(value);
}
},
{
name: 'Month', type: 'text', width: 100, title: 'Month',
itemTemplate: function (value) {
return moment(value, 'M').format('MMMM');;
}
},
];
var options = {
inserting: false,
editing: false,
pageSize: 20,
fields: fields,
rowHeaders: false,
colHeaders: false,
data: itemViewModelList,
controller: controller = {
loadData: function () {
},
},
};
$('#investment-grid').tisGrid('', options);
if (itemViewModelList[0].ConsultantName != null) {
$("#investment-grid").jsGrid("fieldOption", "BranchName", "visible", false);
} else {
$("#investment-grid").jsGrid("fieldOption", "ConsultantName", "visible", false);
}
};
My data being passed "itemViewModelList" is an array of objects
I resolved this by using rowClass as follows:
controller: controller =
{
loadData: function () {},
},
rowClass: function (item, itemIndex) //item is the data in a row, index is the row number.
{
if ((item.ConsultantName == "Totals") || (item.BranchName == "Totals"))
{
return "totalItem highlight";
}
}
I have my if statement where I find the item in the last row based on my conditions. When they are met, I add my custom CSS classes to that row.
I've been trying to make sure that the load event in the Rally.ui.grid.Grid is firing since I have a problem because my Grid is not filtering. I tried calling the methods myStore.setFilter() and myStore.load(), these two are firing, but I can't be sure the Grid is working properly since the first time, when it all loads, it does the filtering right, but then when I change the dropdown or combobox it doesn't.
This is how I load myStore:
this.myStore=Ext.create("Rally.data.wsapi.Store",{
model:"Task",
autoLoad:true,
filters: myFilters,
listeners:{
load:function(myStore,myData,success){
if(!this.myGrid) //IT CREATES THE GRID FOR THE FIRST TIME
{
this._loadGrid(myStore)
console.log('Grid Created!');
// this.myStore.setFilter();
// this.myStore.load();
}
else
{
this.myStore.setFilter();
//this.myStore.load();
console.log('Grid reloaded!');
console.log(myFilters);
}
},
scope:this
},
fetch:["FormattedID","State","Iteration", "Release"]
}
)
}
And this is how I load myGrid:
_loadGrid:function(myStoryStore){
this.myGrid = Ext.create("Rally.ui.grid.Grid",{
store:myStoryStore,
columnCfgs:["FormattedID","State","Iteration", "Release"],
listeners: {
load: function(myGridy){
console.log('myGrid did load!');
},
scope:this
}
});
this.add(this.myGrid);
}
Here is an example by David Thomas from his videos on building Rally apps that uses reconfigure method to which a store is passed: _myGrid.reconfigure(myStore)
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var relComboBox = Ext.create('Rally.ui.combobox.ReleaseComboBox',{
listeners:{
ready: function(combobox){
//console.log('loaded release name', combobox.getRecord().get('Name')); //getRecord() returns currently selected item
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
//console.log('what is this', this);
},
select: function(combobox){
var releaseRef = combobox.getRecord().get('_ref');
this._loadStories(releaseRef);
},
scope: this
}
});
this.add(relComboBox);
},
_loadStories: function(releaseRef){
console.log('loading stories for ', releaseRef);
var myStore = Ext.create('Rally.data.WsapiDataStore',{
model: 'User Story',
autoLoad:true,
fetch: ['Name','ScheduleState','FormattedID'],
filters:[
{
property : 'Release',
operator : '=',
value : releaseRef
}
],
listeners: {
load: function(store,records,success){
console.log("loaded %i records", records.length);
this._updateGrid(myStore);
},
scope:this
}
});
},
_createGrid: function(myStore){
console.log("load grid", myStore);
this._myGrid = Ext.create('Ext.grid.Panel', {
title: 'Stories by Release',
store: myStore,
columns: [
{text: 'ID', dataIndex: 'FormattedID', flex: 1},
{text: 'Story Name', dataIndex: 'Name', flex: 2},
{text: 'Schedule State', dataIndex: 'ScheduleState', flex: 2}
],
height: 400
});
this.add(this._myGrid);
},
_updateGrid: function(myStore){
if(this._myGrid === undefined){
this._createGrid(myStore);
}
else{
this._myGrid.reconfigure(myStore);
}
}
});
I'm new to ExtJS and try to add a button at the bottom of the grid. This button will open a modal dialog to select more persons. I don't know how to add this button after the grid. Do I have to use another component than GridPanel?
Can somebody help me?
The code looks like:
var selectedPersons = [
[1, 'Persnr', 'Name', 'Vorname']
];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'PrsOid', type: 'int'},
{name: 'PersonalNr'},
{name: 'Nachname'},
{name: 'Vorname'}
]
});
store.loadData(selectedPersons);
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
{
id : 'PersonalNr',
header : 'PersonalNr',
width : 100,
sortable : true,
dataIndex: 'PersonalNr'
},
{
header : 'Nachname',
width : 100,
sortable : true,
dataIndex: 'Nachname'
},
{
header : 'Vorname',
width : 100,
sortable : true,
dataIndex: 'Vorname'
}
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
height: 200,
//width: 460,
title: 'Personenauswahl',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
grid.render('gridSelectedPersons');
Do you mean something like a bottom bar ?
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
....
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
bbar: new Ext.Toolbar({
renderTo: document.body,
height: 30,
items: [
// begin using the right-justified button container
'->',
{
xtype:'button',
text:'The button',
//makes the button 24px high, there is also 'large' for this config
scale: 'medium'
}
]
})
how can i change the button-text ("Done" and "Cancel") in the selectfield to german or in any text i like?
xtype: 'selectfield',
name: 'sector',
width: 150,
prependText: 'Sector:',
options: [
{text: 'Alle Termine', value: 'alldates'},
]
one easy possibilty would be to override the defaults of the picker, e.g.:
Ext.override(Ext.Picker, {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
});
You can extend Ext.form.Select to allow you to apply your own configuration to the picker it uses.
Ext.ns('MySite.ux.form');
MySite.ux.form.Select = Ext.extend(Ext.form.Select , {
getPicker: function() {
if (!this.picker) {
this.picker = new Ext.Picker(Ext.apply({
slots: [{
align : 'center',
name : this.name,
valueField : this.valueField,
displayField: this.displayField,
value : this.getValue(),
store : this.store
}],
listeners: {
change: this.onPickerChange,
scope: this
}
}, this.pickerConfig));
}
return this.picker;
}
});
Ext.reg('myselectfield', MySite.ux.form.Select);
And your selectfield configuration might look like this:
{
xtype: 'myselectfield',
name: 'sector',
label: 'Sector',
pickerConfig: {
doneButton: 'Fertig',
cancelButton: 'Abbrechen'
}
}
I have a category and a subcategory column in a Jqgrid. I have enabled inline editing, both category and subcategory are dropdownlists columns (edittype:'select'). I need to filter the subcategory list based on the selected category. I wonder how can I acheive this functionlity?
I tried the below event but its not working for me
afterEditCell: function(rowid, celname, value, iRow, iCol) {
//to do here
}
the above event doesn't get fired. my all column are editable
Thanks,
This question will be often asked. So I wrote a small code example which demonstrate how to implement such scenario with local data only (for jqGrid starting with 3.7.x). For data editing (inline editing) I use here the double-click event. The modified data will be saved after pressing of the "enter" key. For the filling of select elements I use ids. If you prefer use texts of the categories and subcategories instead you should remove formatter:'select' and make the corresponding changes in building of <option> elements (see code of dataEvents event handler).
var categories = ["sport", "science"];
var subcategories = ["football", "formel 1", "physics", "mathematics"];
var mydata = [
{Name:"Lukas Podolski", Category:0, Subcategory:0},
{Name:"Michael Schumacher", Category:0, Subcategory:1},
{Name:"Albert Einstein", Category:1, Subcategory:2},
{Name:"Blaise Pascal", Category:1, Subcategory:3}
];
var subcategoriesOfCategory = [
["football", "formel 1"],
["physics", "mathematics"]
];
var grid = jQuery("#list").jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name: 'Name', width: 200 },
{ name: 'Category', width: 200, editable:true, formatter:'select',
edittype:'select', editoptions: {
value: categories,
dataInit : function (elem) {
var v = $(elem).val();
grid.setColProp('Subcategory', {
editoptions:{value:subcategoriesOfCategory[v]}});
},
dataEvents: [
{ type: 'change',
data: { id: 7 },
fn: function(e) {
var v=$(e.target).val();
var sel = grid.getGridParam('selrow');
grid.setColProp('Subcategory', { editoptions:
{value:subcategoriesOfCategory[v]}});
var res = '';
var sc = subcategoriesOfCategory[v];
for (var i=0; i<sc.length; i++) {
res += '<option role="option" value="' + i + '">' +
sc[i] + '</option>';
}
$("select#"+sel+"_Subcategory").html(res);
}
}
]
}
},
{ name: 'Subcategory', width: 200, editable:true, formatter:'select',
edittype:'select', editoptions: {value: subcategories} }
],
onSelectRow: function(id) {
if (id && id !== lastSel) {
grid.restoreRow(lastSel);
lastSel = id;
}
},
ondblClickRow: function(id, ri, ci) {
if (id && id !== lastSel) {
grid.restoreRow(lastSel);
lastSel = id;
}
grid.editRow(id, true);
return;
},
editurl: 'clientArray',
sortname: 'Name',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
pager: '#pager',
caption: "Inline Editing example"
}).navGrid('#pager', { edit: false, add: false, del: false,
search: false, view: false });
This example can be of cause modified for the case of building of select option from the server.