I'm using jquery-querybuilder to build out a query. I'm currently having an issue with adding in selectize as a plugin to allow for autocomplete inside the select inputs. I'm logging the data in the for loop and it prints out the correct data so I know its physically getting the data, but when typing in the input box, there is still no autocomplete and I'm not quite sure where I went wrong.
let totalMachines = [];
var rules_basic = {
condition: 'AND',
rules: [{
}, {
condition: 'OR',
rules: [{
}, {
}]
}]
};
let options = {
plugins: [],
allow_empty: true,
filters: [
{
id: 'machineName',
label: 'Machine Name',
type: 'string',
input: 'text',
operators: ['equal'],
plugin: 'selectize',
values: {
},
plugin_config: {
valueField: 'id',
labelField: 'machineName',
searchField: 'machineName',
sortField: 'machineName',
create: false,
maxItems:3,
plugins: ['remove_button'],
onInitialize: function() {
var that = this;
totalMachines.forEach(function(item) {
that.addOption(item);
console.log(item)
});
}
},
valueSetter: function(rule, value) {
rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
}
},
]
}
$.ajax({
url: '/api-endpoint',
type: 'GET',
contentType: 'application/json',
dataType: 'json',
success: function(response){
console.log(response)
response.forEach((res) => {
totalMachines.push(res[0])
})
console.log(totalMachines)
}
})
.then(() => {
// Fix for Selectize
$('#builder').on('afterCreateRuleInput.queryBuilder', function(e, rule) {
if (rule.filter.plugin == 'selectize') {
rule.$el.find('.rule-value-container').css('min-width', '200px')
.find('.selectize-control').removeClass('form-control');
}
});
$('#builder').queryBuilder(options)
})
It would be extremely helpful if someone could help me figure out how to properly configure this plugin, I've looked at every thread and haven't been able to figure it out.
Here is a simple example, using a local datasource, the namesList array
<script>
$(document).ready(function() {
let namesList = [{ id: '1', name: 'andrew' }, { id: '2', name: 'bob' }, { id: '3', name: 'charles' }, { id: '4', name: 'david' }];
let pluginConfig = {
preload: true,
valueField: 'id',
labelField: 'name',
searchField: 'name',
options: namesList,
items: ['2'],
allowEmptyOption: true,
plugins: ['remove_button'],
onInitialize: function () { },
onChange: function (value) {
console.log(value);
},
valueSetter: function (rule, value) {
rule.$el.find('.rule-value-container input')[0].selectize.setValue(value);
},
valueGetter: function (rule) {
var val = rule.$el.find('.rule-value-container input')[0].selectize.getValue();
return val.split(',');
}
}
let filterList = [{
id: 'age',
type: 'integer',
input: 'text'
},
{
id: 'id',
label: 'name',
name: 'name',
type: 'string',
input: 'text',
plugin: 'selectize',
plugin_config: pluginConfig
}];
let options = {
allow_empty: true,
operators: ['equal', 'not_equal', 'greater', 'greater_or_equal', 'less', 'less_or_equal'],
filters: filterList
}
$('#builder').queryBuilder(options);
// Fix for Selectize
$('#builder').on('afterCreateRuleInput.queryBuilder', function (e, rule) {
if (rule.filter.plugin == 'selectize') {
rule.$el.find('.rule-value-container').css('min-width', '200px').find('.selectize-control').removeClass('form-control');
}
});
});
Related
I have created a tabpanel, with images as titles, and a custom component as html. Those custom components use stores, but I'm having an error when updating a single variable (status), all the variables change. Here I show the code:
SelectableButtons component:
Ext.require('Cat3.view.fsm.data.ButtonsStore');
/**
* Selectable button with image
*/
Ext.define('Cat3.view.fsm.components.SelectableButtons', {
extend: 'Ext.view.View',
cls: 'selectable-buttons',
alias: 'widget.selectable-buttons',
tpl: [
'<tpl for=".">',
'<div class="thumb-wrap button button-{status}">',
'<img src="resources/images/cards/{type}/{status}/{name}.png">',
'<img src="resources/images/icons/icon_mandatory.png" class="button-tick button-tick-{status}">',
'</div>',
'</tpl>'
],
// Set both to false if you want single select
multiSelect: true,
simpleSelect: true,
trackOver: false,
itemSelector: 'div.thumb-wrap',
listeners: {
select: function(ths, record, eOpts) {
record.set('status', 'active');
debugAmenaButtonStatus(this);
},
deselect: function(ths, record, eOpts) {
record.set('status', 'passive');
},
selectionchange: function(selection) {
this.refresh();
},
containerclick: function(ths, e, eOpts) {
return false; // Stops the deselection of items
}
},
initComponent: function() {
var store = Ext.create('Cat3.view.fsm.data.ButtonsStore');
this.setStore(store);
this.callParent(arguments);
}
});
debugAmenaButtonStatus = function(ref) {
ref.up().up().items.items.forEach(function(tab) { // Tab
console.log(tab.items.items[0].getStore().data.items[0].data.status); // Amena Button Status
});
};
SelectableButtonsCarousel component (Tab panel). It uses another store but it isn't related:
var cardsImagePath = 'resources/images/cards/';
var ImageModel = Ext.define('ImageModel2', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'type',
type: 'string'
}, {
name: 'status',
type: 'string'
}, ]
});
var store = Ext.create('Ext.data.Store', {
model: 'ImageModel2',
data: [{
name: 'amena',
type: 'operator',
}, {
name: 'movistar',
type: 'operator',
}, {
name: 'orange',
type: 'operator',
}, {
name: 'simyo',
type: 'operator',
}, {
name: 'yoigo',
type: 'operator',
}, {
name: 'vodafone',
type: 'operator',
}]
});
Ext.define('Cat3.view.fsm.components.SelectableButtonsCarousel', {
extend: 'Ext.tab.Panel',
xtype: 'basic-tabs',
cls: 'selectable-buttons-carousel',
alias: 'widget.selectable-buttons-carousel',
store: store,
resizeTabs: false,
defaults: {
bodyPadding: 10,
layout: 'fit'
},
require: [
'Cat3.view.fsm.components.SelectableButtons',
'Cat3.view.fsm.data.ButtonsStore'
],
titleTpl: function(info) {
return '<img src="resources/images/cards/operator/' + info.status + '/' + info.name + '.png">';
},
listeners: {
render: function(p) {
var tabpanel = this;
this.store.data.items.forEach(function(item, index) {
item.data.status = index === 0 ? 'active' : 'passive';
var buttons = new Cat3.view.fsm.components.SelectableButtons();
tabpanel.add(Ext.create('Ext.Panel', {
id: 'tab-' + index,
title: tabpanel.titleTpl(item.data),
items: [ buttons ],
cls: item.data.status,
info: item.data,
listeners: {
render: function(p) {
console.log('render');
}
}
}));
});
tabpanel.setActiveTab(0);
},
tabchange: function(tabPanel, newCard, oldCard, eOpts) {
newCard.info.status = 'active';
newCard.setTitle(this.titleTpl(newCard.info));
newCard.items.items[0].refresh();
if (oldCard) {
oldCard.info.status = 'passive';
oldCard.setTitle(this.titleTpl(oldCard.info));
}
}
}
});
SelectableButtons Store:
var ImageModel = Ext.define('ImageModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'type', type: 'string'},
{name: 'status', type: 'string'},
]
});
Ext.define('Cat3.view.fsm.data.ButtonsStore', {
extend: 'Ext.data.Store',
model: 'ImageModel',
data: [
{name: 'amena', type: 'operator', status: 'passive'},
{name: 'movistar', type: 'operator', status: 'passive'},
{name: 'orange', type: 'operator', status: 'passive'},
{name: 'simyo', type: 'operator', status: 'passive'},
{name: 'yoigo', type: 'operator', status: 'passive'},
{name: 'vodafone', type: 'operator', status: 'passive'}
],
listeners: {
datachanged: function() {
console.log('store data changed');
}
}
});
All works fine, but when I select a button of SelectableButtons (one tab), the same button of each tab changes its status, and only the one selected of the active tab has to change. Any ideas why? I've checked each store is created separately and that each store has a different id.
Just an idea, for a better guess I'd need to see it working best at http://fiddle.sencha.com:
If "select one selects all", my first idea is that all buttons are just one button referred to from all places. One instance with different names.
Notice the line on your Cat3.view.fsm.components.SelectableButtons view:
initComponent: function() {
var store = Ext.create('Cat3.view.fsm.data.ButtonsStore');
...
}
You might wanna change it to
initComponent: function() {
var store = new Ext.create('Cat3.view.fsm.data.ButtonsStore');
...
}
This will create a new instance of Data Store for your view.
I am struggling to find ways how to preserve data to local storage but seems no luck on my side now. I can successfully add/ remove items in store however, whenever i try to refresh nor reload the page (google chrome) looks like no data found in store.
Here is my code:
Model: Pendingmodel.js
Ext.define('mysample.model.PendingModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'ALIAS'
},
{
name: 'OBJECT'
},
{
name: 'DATETIME'
},
{
name: 'FIELDVALUE'
}
],
proxy: {
type: 'localstorage',
id: 'PendingModelProxy'
}
}
});
Store: Pendingstore.js
Ext.define('mysample.store.PendingStore', {
extend: 'Ext.data.Store',
requires: [
'mysample.model.PendingModel'
],
config: {
autoLoad: true,
model: 'mysample.model.PendingModel',
storeId: 'PendingStore'
}
});
Controller:
onDraftCommand: function (form, isTapped) {
var isValid = true;
var me = this, getForm = me.getLeadsView();
var pendingItems = getForm.getValues();
var cleanItems = getForm.getValues();
cleanItems['reset'] = function() {
for (var prop in this) {
delete this['reset'];
delete this['eventParameter'];
this[prop] = '';
}
}
if(isTapped == true && isValid == true) {
Ext.Msg.confirm('Message', 'Are you sure you want to save this on draft?', function (btn) {
switch (btn) {
case 'yes':
var date = new Date(), id = date.getUTCMilliseconds();
var obj = {
'ALIAS': 'leadsview',
'OBJECT': 'Leads Form',
'id': id,
'DATETIME': date,
'FIELDVALUE': pendingItems,
};
console.log('Leads pending store');
console.log(obj);
Ext.data.StoreManager.lookup('PendingStore').add(obj);
Ext.data.StoreManager.lookup('PendingStore').sync();
console.log(Ext.data.StoreManager.lookup('PendingStore'));
//clear form
cleanItems.reset();
getForm.setValues(cleanItems);
//Ext.getCmp('signatureField').removeImage();
break;
default:
break;
}
});
}
}
Add a identifier strategy inside your model as below.
Ext.define('mysample.model.PendingModel', {
extend: 'Ext.data.Model',
config: {
identifier: 'uuid', // add this
fields: [
{
name: 'id',
type: 'int'
}
],
proxy: {
type: 'localstorage',
id: 'PendingModelProxy'
}
}
You need to add the unique identifier in your model, like this:-
Ext.define('mysample.model.PendingModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.identifier.Uuid'
],
config: {
identifier: {
type: 'uuid',
isUnique: true
},
fields: [
{
name: 'id',
type: 'int'
},
{
name: 'ALIAS'
},
{
name: 'OBJECT'
},
{
name: 'DATETIME'
},
{
name: 'FIELDVALUE'
}
],
proxy: {
type: 'localstorage',
id: 'PendingModelProxy'
}
}
});
I wanted to replace dojox.grid.DataGrid with new Dgrid but I have trouble with it. I'm using Dojo 1.9.1 and here is excerpts of my code:
HTML:
<script type="text/javascript"><!--
require({
baseUrl: "/res/js/",
packages: [
{ name: "dojo", location: "dojo/dojo" },
{ name: "dijit", location: "dojo/dijit" },
{ name: "dojox", location: "dojo/dojox" },
{ name: "put-selector", location: "put-selector" },
{ name: "xstyle", location: "xstyle" },
{ name: "dgrid", location: "dgrid" },
{ name: "allwins", location: "allwins" }
]
},[
"allwins/Admin",
"dojo/parser",
"dojo/domReady!"
],function(admin, Parser){
admin.initUi(/*...*/);
});
</script>
<!-- ... -->
<div data-dojo-id="invoicesTab2"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="region: 'center',
title: 'Faktury 2'">
<div id=invoicesGridTab2"></div>
</div>
JavaScript:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID" },
user_id: { label: "UID" },
invoice_no: { label: "Číslo" },
user_fullname: { label: "Plátce" },
created_formatted: { label: "Vystavena" },
payment_date_formatted: { label: "Splatnost" },
payment_total: { label: "Částka" }
}
}, "invoicesGridTab2");
grid.startup();
});
I can add few more things:
List item
I have no errors at the JavaScript console
data source is already tested with using older dojox.grid.DataGrid
it seems that main problem is with the rendering
Thanks for any help or advice!
You need to specify the field attribute in your columns that match with the response data object, for example:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID", field: "invoice_id" },
user_id: { label: "UID", field: "user_id" },
invoice_no: { label: "Číslo", field: "invoice_no" },
user_fullname: { label: "Plátce", field: "user_fullname" },
created_formatted: { label: "Vystavena", field: "created_formatted" },
payment_date_formatted: { label: "Splatnost", field: "payment_date_formatted" },
payment_total: { label: "Částka", field: "payment_total" }
}
}, "invoicesGridTab2");
grid.startup();
});
I do not know if those field names are correct, but I assume you would. :)
I am trying to create a grid builder object. This grid builder has a method, buildGrid, which I've designed to expect an object defining a bunch of paramaters for a grid:
buildOrdersGrid: function () {
var ordersGrid = buildGrid({
gridElementID: 'OrdersGrid',
gridPagerElementID: 'OrdersGridPager',
colNames: ['Order ID', 'Project Subcode', 'Incident Number', 'Cost Center', 'Name', 'Customer'],
colModel: [
{ name: 'ID', hidden: true },
{ name: 'ProjectSubcode' },
{ name: 'IncidentNumber' },
{ name: 'CostCenter' },
{ name: 'Name' },
{ name: 'Customer' }
],
defaultCaption:'Orders: no filter applied',
});
return ordersGrid;
}
function buildGrid(data) {
var grid = $('#' + data.gridElementID);
var gridPager = $('#' + data.gridPagerElementID);
grid.jqGrid({
datatype: 'local',
colNames: data.colNames,
colModel: data.colModel,
gridview: true,
height: 'auto',
pager: gridPager,
viewrecords: true,
multiselect: true,
defaultCaption: data.defaultCaption,
caption: data.defaultCaption,
shrinkToFit: false
});
return grid;
}
Something like that, but it's really new code, so open to advice on how to improve.
Now, I would like to extend this buildGrid method such that it can take non-predefined properties and give them to the jqGrid. Something like:
buildTaskGrid: function () {
var tasksGrid = buildGrid({
gridElementID: 'TasksGrid',
gridPagerElementID: 'TasksGridPager',
colNames: ['Order', 'Task ID', 'Task #', 'Type', 'Status', 'Assignee', 'Current Location', 'Dest Location', 'Change No', 'Net Patched', 'SAN Patched'],
colModel: [
{ name: 'Order' },
{ name: 'TaskID', hidden: true },
{ name: 'TaskNo' },
{ name: 'Type' },
{ name: 'Status' },
{ name: 'Assignee' },
{ name: 'CurrentLocation' },
{ name: 'DestLocation' },
{ name: 'ChangeNo' },
{ name: 'NetPatched' },
{ name: 'SANPatched' }
],
defaultCaption:'Tasks: no filter applied',
//Decorate with task-specific properties.
grouping: true,
groupingView: {
groupField: ['Order'],
groupColumnShow: [false]
},
ondblClickRow: function (rowid) {
$(this).trigger('taskDoubleClicked', selector.getRowData(rowid));
}
});
return tasksGrid;
}
I'm not sure how I should best 'find' the unanticipated properties and give them to the grid. Any ideas?
I think you can use this http://api.jquery.com/jQuery.extend/
please I'm trying to get a list of all the contacts on my phone with the following code.
var App = new Ext.Application({
name: 'SmsthingyApp',
useLoadMask: true,
launch: function () {
Ext.data.ProxyMgr.registerType("contactstorage",
Ext.extend(Ext.data.Proxy, {
create: function(operation, callback, scope) {
},
read: function(operation, callback, scope) {
},
update: function(operation, callback, scope) {
},
destroy: function(operation, callback, scope) {
}
})
);
Ext.regModel("contact", {
fields: [
{name: "id", type: "int"},
{name: "givenName", type: "string"},
{name: "familyName", type: "string"},
{name: "emails", type: "auto"},
{name: "phoneNumbers", type: "auto"}
]
});
Ext.regStore('contacts',{
model: "contact",
proxy: {
type: "contactstorage",
read: function(operation, callback, scope) {
var thisProxy = this;
navigator.contacts.find(
['id', 'name', 'emails', 'phoneNumbers', 'addresses'],
function(deviceContacts) {
//loop over deviceContacts and create Contact model instances
var contacts = [];
for (var i = 0; i < deviceContacts.length; i++) {
var deviceContact = deviceContacts[ i ];
var contact = new thisProxy.model({
id: deviceContact.id,
givenName: deviceContact.name.givenName,
familyName: deviceContact.name.familyName,
emails: deviceContact.emails,
phoneNumbers: deviceContact.phoneNumbers
});
contact.deviceContact = deviceContact;
contacts.push(contact);
}
//return model instances in a result set
operation.resultSet = new Ext.data.ResultSet({
records: contacts,
total : contacts.length,
loaded : true
});
//announce success
operation.setSuccessful();
operation.setCompleted();
//finish with callback
if (typeof callback == "function") {
callback.call(scope || thisProxy, operation);
}
},
function (e) { console.log('Error fetching contacts'); },
{multiple: true}
);
}
}
});
Ext.regModel('Sms', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'message', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title', message: 'Please select a contact for this sms.' }
]
});
Ext.regStore('SmsStore', {
model: 'Sms',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'sms-app-localstore'
},
getGroupString: function (record)
{
if (record && record.data.date)
{
return record.get('date').toDateString();
}
else
{
return '';
}
}
});
SmsthingyApp.views.ContactsList = new Ext.List({
id: 'ContactsList',
layout: 'fit',
store:'contacts',
itemTpl: '{givenName} {familyName}',
listeners: {'render': function (thisComponent)
{
SmsthingyApp.views.ContactsList.getStore().load();
}
},
onItemDisclosure: function (record) {
//Ext.dispatch({
// controller: SmsthingyApp.controllers.contacts,
// action: 'show',
// id: record.getId()
//});
}
});
SmsthingyApp.views.contactsListContainer = new Ext.Panel({
id: 'contactsListContainer',
layout: 'fit',
html: 'This is the sms list container',
items: [SmsthingyApp.views.ContactsList],
dockedItems: [{
xtype: 'toolbar',
title: 'Contacts'
}]
});
SmsthingyApp.views.smsEditorTopToolbar = new Ext.Toolbar({
title: 'Edit SMS',
items: [
{
text: 'Back',
ui: 'back',
handler: function () {
SmsthingyApp.views.viewport.setActiveItem('smsListContainer', { type: 'slide', direction: 'right' });
}
},
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
var smsEditor = SmsthingyApp.views.smsEditor;
var currentSms = smsEditor.getRecord();
// Update the note with the values in the form fields.
smsEditor.updateRecord(currentSms);
var errors = currentSms.validate();
if (!errors.isValid())
{
currentSms.reject();
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}
var smsList = SmsthingyApp.views.smsList;
var smsStore = smsList.getStore();
if (smsStore.findRecord('id', currentSms.data.id) === null)
{
smsStore.add(currentSms);
}
else
{
currentSms.setDirty();
}
smsStore.sync();
smsStore.sort([{ property: 'date', direction: 'DESC'}]);
smsList.refresh();
SmsthingyApp.views.viewport.setActiveItem('smsListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
SmsthingyApp.views.smsEditorBottomToolbar = new Ext.Toolbar({
dock: 'bottom',
items: [
{ xtype: 'spacer' },
{
text: 'Send',
handler: function () {
// TODO: Send current sms.
}
}
]
});
SmsthingyApp.views.smsEditor = new Ext.form.FormPanel({
id: 'smsEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'To',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Message'
}
],
dockedItems:[
SmsthingyApp.views.smsEditorTopToolbar,
SmsthingyApp.views.smsEditorBottomToolbar
]
});
SmsthingyApp.views.smsList = new Ext.List({
id: 'smsList',
store: 'SmsStore',
grouped: true,
emptyText: '<div style="margin: 5px;">No notes cached.</div>',
onItemDisclosure: function (record)
{
var selectedSms = record;
SmsthingyApp.views.smsEditor.load(selectedSms);
SmsthingyApp.views.viewport.setActiveItem('smsEditor', { type: 'slide', direction: 'left' });
},
itemTpl: '<div class="list-item-title">{title}</div>' +'<div class="list-item-narrative">{narrative}</div>',
listeners: {'render': function (thisComponent)
{
thisComponent.getStore().load();
}
}
});
SmsthingyApp.views.smsListToolbar = new Ext.Toolbar({
id: 'smsListToolbar',
title: 'Sent SMS',
layout: 'hbox',
items:[
{xtype:'spacer'},
{
id:'newSmsButton',
text:'New SMS',
ui:'action',
handler:function()
{
var now = new Date();
var smsId = now.getTime();
var sms = Ext.ModelMgr.create({ id: smsId, date: now, title: '', narrative: '' },'Sms');
SmsthingyApp.views.smsEditor.load(sms);
SmsthingyApp.views.viewport.setActiveItem('smsEditor', {type: 'slide', direction: 'left'});
}
}
]
});
SmsthingyApp.views.smsListContainer = new Ext.Panel({
id: 'smsListContainer',
layout: 'fit',
html: 'This is the sms list container',
dockedItems: [SmsthingyApp.views.smsListToolbar],
items: [SmsthingyApp.views.smsList]
});
SmsthingyApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items:[
SmsthingyApp.views.contactsListContainer,
SmsthingyApp.views.smsListContainer,
SmsthingyApp.views.smsEditor
]
});
}
})
I'm using eclipse and LogCat tab keeps marking this red
02-08 11:11:58.741: E/Web Console(13886): Uncaught TypeError: Cannot read property 'contacts' of undefined at file:///android_asset/www/app.js:35
I'm guessing this has something to with why I can't see the contacts in the contactsListContainer.
Any help please?
I'm not a Sencha expert but I do know that this line:
var App = new Ext.Application({
will cause problems with PhoneGap as we also declare a variable called App. It would be better to change that line to be something like:
var myApp = new Ext.Application({
to avoid the name conflict.
If that doesn't resolve your problem I suggest you read over my post on searching contacts. I'd make sure I could successfully search for contacts before adding in Sencha.