am having issue designing and getting a search field to work, i don't know how to get this working, i can see any documentation or sample code on Sencha Touch 2. any help will be appreciated. this my current stage:
`Ext.define('ikhlas.view.SearchProfile', {
extend: 'Ext.Panel',
xtype: 'searchpanel',
config:{
title: 'Search',
iconCls: 'search',
scrollable: true,
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
title:'Search Profile',
iconCls:'add',
items: [
{
xtype: 'searchfield',
name:'searchfield',
placeHolder:'Search',
},
]
},
]
}
});`
And my controller looks like this (Noting has been done, i don't know how to start help pls):
Ext.define('ikhlas.controller.SearchField',{
extend: 'Ext.app.Controller',
config:{
refs:{
submitpanel:'loginpanel'
},
control:{
}
},
});
And here are the list of Data's i want to Auto search:
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'}
i want the search field to work in such a way that as the user is typing in character, it will auto pop suggestion just like: http://docs.sencha.com/touch/2-0/#!/example/search-list
In your controller you should listen for two events, clearicontap and keyup for the searchfield.
...
control: {
'searchfield': {
keyup: 'onSearchQueryChanged',
clearicontap: 'onSearchReset'
}
},
onSearchQueryChanged: function(field) {
// as in sample
//get the store and the value of the field
var value = field.getValue(),
store = this.getStore(); //you should actually point to the real store
//first clear any current filters on thes tore
store.clearFilter();
//check if a value is set first, as if it isnt we dont have to do anything
if (value) {
//the user could have entered spaces, so we must split them so we can loop through them all
var searches = value.split(' '),
regexps = [],
i;
//loop them all
for (i = 0; i < searches.length; i++) {
//if it is nothing, continue
if (!searches[i]) continue;
//if found, create a new regular expression which is case insenstive
regexps.push(new RegExp(searches[i], 'i'));
}
//now filter the store by passing a method
//the passed method will be called for each record in the store
store.filter(function(record) {
var matched = [];
//loop through each of the regular expressions
for (i = 0; i < regexps.length; i++) {
var search = regexps[i],
didMatch = record.get('firstName').match(search) || record.get('lastName').match(search);
//if it matched the first or last name, push it into the matches array
matched.push(didMatch);
}
//if nothing was found, return false (dont so in the store)
if (regexps.length > 1 && matched.indexOf(false) != -1) {
return false;
} else {
//else true true (show in the store)
return matched[0];
}
});
}
},
onSearchReset: function(field) {
this.getStore().clearFilter();
}
...
This example will emulate the same behavior as in ST2 SDK, that is filtering a store of Ext.List. Naturally, you will probably end up implementing your own logic for filtering.
Note that searchfield is nothing more but a styled textfield, usually with clear button to the right (depends on browser/os), as defined in HTML5.
Related
I have a model that receives int bitmasks from the backend:
{"user": 7, "group":5, "other":1}
and I now want to show a form with checkboxes like this:
user: [X] read [X] write [X] execute
group: [X] read [ ] write [X] execute
other: [ ] read [ ] write [X] execute
where user can toggle on or off and then the updated bitmask is sent back to the server in a store.sync operation.
I know how to make and align the checkboxes, but ExtJS checkboxes in a form bind to boolean values through a correlation between the checkbox name and the model field name, and not to parts of bitmask.
So I have to convert back and forth between the bitmask int and a bunch of booleans. How would I implement that in a reusable manner?
I think the checkbox group component is a good candidate to render your checkboxes and also to implement the conversion logic.
Here is a reusable component to do the two-way conversion of bitmasks:
Ext.define('Fiddle.Bitmask', {
extend: 'Ext.form.CheckboxGroup',
xtype: 'fiddlebitmask',
isFormField: true,
columns: 3,
items: [{
boxLabel: 'Read',
name: 'read',
inputValue: 1,
excludeForm: true,
uncheckedValue: 0
}, {
boxLabel: 'Write',
name: 'write',
inputValue: 1,
excludeForm: true,
uncheckedValue: 0
}, {
boxLabel: 'Execute',
name: 'exec',
inputValue: 1,
excludeForm: true,
uncheckedValue: 0
}],
getModelData: function () {
let obj = {};
obj[this.name] = this.getValue();
return obj;
},
setValue: function (value) {
if (value) {
var binary = Ext.String.leftPad((value).toString(2), 3, '0');
value = {
read: Number(binary[0]),
write: Number(binary[1]),
exec: Number(binary[2])
};
}
this.callParent([value]);
},
getValue: function () {
var value = this.callParent();
var binary = `${value['read']||0}${value['write']||0}${value['exec']||0}`
return parseInt(binary, 2);
}
});
And the working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2clg
edit Component completed with getModelData implementation to support usage with form.getValues/form.updateRecord.
What version of Ext are you using? If your version supports ViewModels then I would do the conversion in the ViewModel and bind it to the view.
There is the convert and calculate config on fields as well but they are converting in one way only.
I'm using Ionic 3.x on macOS.
I have the following issue:
I have an array containing a number and an array of names.
table: { number: number, names: string[] } = {
number: 0,
names: ['']
};
I want to set the number of the array using an input for the user. I stumbled upon the AlertController.
I have written the following function thing to add a number:
addTable(){
let prompt = this.alertCtrl.create({
title: 'Add Table',
subTitle: 'Enter the table number',
inputs: [{
name: 'tableNumber',
placeholder: 'Number',
type: 'number'
}],
buttons: [
{
text: 'Cancel'
},
{
text: 'Add',
handler: data => {
//this.tables.push(data);
this.table.number = data;
}
}
]
});
prompt.present();
}
But this always sets table.number to object [object]. If I write it as this.table.number = +data; it has the value NaN. The push version also doesn't work.
How do I set table.number to a number that the user put in?
The name of the input
name: 'tableNumber'
gets added as a property name to the resulting object. You can access it like this:
handler: data => {
this.table.number = data.tableNumber;
}
heres my output Image html How can I delete Object in array and push when adding some Data
angular.module('myApp.Tree_Service', [])
.factory('TreeService', function() {
var svc = {};
var treeDirectories = [
{
name: 'Project1',
id: "1",
type: 'folder',
collapse: true,
children: [
{
name: 'CSS',
id: "1-1",
type: 'folder',
collapse: false,
children: [
{
name: 'style1.css',
id: "1-1-1",
type: 'file'
},
{
name: 'style2.css',
id: "1-1-2",
type: 'file'
}
]
}
]
}
];
svc.add = function () {}
svc.delete = function (item, index) { }
svc.getItem = function () { return treeDirectories; }
return svc;
});
})();
I'm Newbee in Angularjs and I don't know how much to play it.
Hopefully someone can help me. Im Stucked.
Well you can delete any object by just usingdelete Objname.property
So for example you want to delete Children in treeDirectories first index object you can use delete treeDirectories[0].children if you want to delete children inside children then delete treeDirectories[0].children[0].children
if you want to remove an index from an array in lowest level children then
treeDirectories[0].children[0].children.splice(index,1)
for pushing data is for object you can directly assign value to the property you want
treeDirectories[0].children[0].newproperty = "check"
And for array you can
treeDirectories[0].children[0].children.push(object)
I have following hardcoded map:
$scope.lists = {
test1: [
{ name: 'My Name' }
],
test2: [
{ name: 'My Second Name' }
]
};
$scope.selectedList = "test1";
Then inside my pug/html file:
div(ng-repeat="list in lists.selectedList")
What I need is I want to have array to be selected depend on var of selectedList. Am I able to do that in AngularJS?
You can use square-bracket syntax in angular attributes:
div(ng-repeat="list in lists[selectedList]")
I have a problem when I am binding values to a panel title.
My code basically looks like this :
Ext.define('serviceteamWorkflow.view.core.ServiceteamWorkflow', {
extend: 'Ext.Panel',
bind: {
title: 'First Name : {firstName} Last Name : {lastName}'
},
})
The problem is that nothing shows in the title when one of the bound values is null or undefined. Ie. If one of the bound values is invalid then the whole thing won't show.
I would like to just show nothing if the bound value is invalid. ie :
First Name : Last Name : Doe
Is there a way around this?
You could create a formula that would reference your bindings in your view model:
Ext.define('serviceteamWorkflow.view.core.ServiceteamWorkflow', {
extend: 'Ext.Panel',
bind: {
title: {showTitle}
},
})
Then inside your ServiceteamWorkflow view model:
requires: [
'Ext.app.bind.Formula'
],
data: {
firstName: '',
lastName: 'Johnson'
},
formulas: {
showTitle: function(get) {
var firstName = get('firstName'),
lastName = get('lastName');
return "First Name : " + firstName + " Last Name: " + lastName;
}
}
For those who are like me wondering how to set default values to viewmodel as suggested by Evan Trimboli in the first comment, it should be set in a view:
viewModel: {
data: {
firstName: '',
lastName: ''
}
}
If you set your data somewhere dynamically, for example:
this.getViewModel().set('fullName', data);
you need to set defaults like this:
viewModel: {
data: {
fullName: {
firstName: '',
lastName: ''
}
}
}