Develop Reference

AngularJS - ng-select not working as expected

I have a filter drop down for some tabular data that reads data from a local storage item, the select tag is shown below, and below that is the code to add items to the select tag and the model for the filter.
The issue is that whilst the data filtered is correct when you refresh the page, the selected item only shows the correct value if the local storage value is true.
No matter what value the local storage item is selected="selected" is always added to the "Excluded from Search" option.
Can't for the life of me work out why, any help advice appreciated.
<select class="form-control form-control-sm" ng-model="filterSearch" ng-change="setFilterS()" id="theFilterS" >
<option ng-selected="{{option.value == filterSearch}}" ng-repeat="option in filterSearchOptions" value="{{option.value}}" >{{option.DisplayName}}</option>
</select>
$scope.filterSearch = localStorage.getItem("FilterSearch");
$scope.filterSearchOptions = [{
value: '',
DisplayName: 'All',
}, {
value: 'false',
DisplayName: 'Included in Search',
}, {
value: 'true',
DisplayName: 'Excluded from Search',
}];

You should try with the ng-options directive which IMO gives a simpler approach then ng-repeat
angular.module('app',[]).controller('testCtrl',function($scope){
$scope.filterSearch = 'true';
$scope.filterSearchOptions = [{
value: '',
DisplayName: 'All',
}, {
value: 'false',
DisplayName: 'Included in Search',
}, {
value: 'true',
DisplayName: 'Excluded from Search',
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="testCtrl">
<select
class="form-control form-control-sm"
ng-model="filterSearch"
ng-change="setFilterS()"
id="theFilterS"
ng-options="option.value as option.DisplayName for option in filterSearchOptions">
</select>
{{filterSearch}}
</div>

TinyMCE Plugin Template add category Listbox

I'm developping for my entreprise an external template manager with ASP.net.
in this external template manager, users can execute all the CRUD actions, so they can create/ read /update /delete.
Many departements of my entreprise use thoses templates, so I've created a category fields in my template manager, so they can filter a bit.
I'would like to modify, the plugin.js of the template plugin to add a dynamic listbox category.
So when a user want to add a template in the editor he can select his departements[category] and only the related template will be shown in the listbox [template].
I get all the template definition[title, content, description, category] from a MS SQL DB with an ASP repeater Control.
the result of the repeater generate the definition needed by the template plugin
templates:
[
{"title": "Some title 1", "description": "Some desc 1", "content": "My
content", "category": "support"},
]
So i've tried just to test (because i'm not good with JS ad Oriented Object) :
`
win = editor.windowManager.open({
title: 'Insert template',
layout: 'flex',
direction: 'column',
align: 'stretch',
padding: 15,
spacing: 10,
items: [
{
type: 'form', flex: 0, padding: 0, items: [
{
type: 'container', label: 'Templates', items: {
type: 'listbox', label: 'Templates', name: 'template',
values: values, onselect: onSelectTemplate
}
//Added BY ME
type: 'container', label: 'Category', items: {
type: 'listbox', label: 'Category', name:'category', values:
valuesCategory, onselect: onSelectCategory
}
}
]
},
{ type: 'label', name: 'description', label: 'Description', text:
'\u00a0' },
{ type: 'iframe', flex: 1, border: 1 }
],
onsubmit: function () {
insertTemplate(false, templateHtml);
},
minWidth: Math.min(DOMUtils.DOM.getViewPort().w,
editor.getParam('template_popup_width', 600)),
minHeight: Math.min(DOMUtils.DOM.getViewPort().h,
editor.getParam('template_popup_height', 500))
});
win.find('listbox')[0].fire('select');
win.find('listbox')[0].fire('select');
}`
and defined valuesCategory & onSelectCategory somewhere over that.
the list box isn't showed in the Dialog ?
I've searched on internet to find something similar with tinymce but i don't find anything like this, could someone help me to develop this functionnality ?
Thanks for your answers !
Have a nice day

Instead of modifying the editor's source code why not calculate the valid plugins from the server side and only include the relevant templates in the editor configuration?
This eliminates the need for you to modify the source code of the editor and people will not have the ability to see templates for a different department.

How to create a dynamic (on the fly) form in Sencha Touch

I am working in a sencha touch ap and I need to generate views with dynamic forms.
Configuration comes from the backend (JSON) and depending of this I paint a component or other.. for example:
"auxiliaryGroups": [
{
"id": "1000",
"name": "Basic Data",
"fields": [
{
"id": "1001",
"name": "Company name",
"editable": true,
"mandatory": true,
"calculation": true,
"internalType": "T",
"type": "textfield",
"options": []
}
]
}
],
Where type is related xtype in Sencha.
In the view I am creating all options of fields:
{
xtype : 'fieldset',
itemId: 'auxiliaryFieldsGroup3',
title: 'Requirements',
//cls : 'headerField',
items:[
{
xtype: 'togglefield',
name: 'f6',
label: 'Auxiliary field R1'
},
{
xtype: 'selectfield',
name: 'f10',
label: 'Auxiliary field R5',
placeHolder: 'Select one..',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
},
{
xtype: 'textfield'
}
]
}
And I receive the configuration from the server, I understand the view like a store of different fields, and from the controller, it should add only fields specified in the json object.
How to create this dynamically following MVC concept?
Thank you

I assume that you have all the fields in the auxiliaryGroups.fields array.
After loading the form data from AJAX you can do it like this in your success call.
succses:function(response){
var response = Ext.decode(response.responseText);
var fields = response.auxiliaryGroups.fields;
var form = Ext.create("Ext.form.Panel",{
// here your form configuration.
cls:"xyz"
});
Ext.Array.forEach(fields,function(field){
var formField = {
xtype: field.type,
label: field.name,
name: field.id
};
form.add(formField);
});
Ext.Viewport.add(form);
form.show();
}

Based on my comment on your question, my idea about dynamic form generation is using ExtJS syntax to load form definition would be something like the code below; of course it would be extended and the data can be loaded from the server.
Ext.require([
'Ext.form.*'
]);
Ext.onReady(function() {
var data = [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}];
var form = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
}
});
form.add(data);
form.render(document.body);
});
update:
When you create a view in run-time, communication between view and controller might be problematic because the controller doesn't know anything about the view. considering that the controller is responsible for initializing the view with appropriate data and handling view's events, data binding mechanism in ExtJS can solve the first part (initializing the view) which is described at View Models and Data Binding, the second part (handling view's events) can be solved with general methods in the controller, every element in the view should send its event to some specific methods and the methods based on the parameters should decide what to do.
This approach makes your methods in the controller a little fat and complicated that is the price of having dynamic form.
It is worth to mention that EXTJS raises different events in the life cycle of controllers and views and you should take benefit of them to manage your dynamic form.

I don't know about Touch, but in ExtJS, I usually do it by using the add function of a fieldset. You just loop through all your records, and create the fields on the fly.
var field = Ext.create('Ext.form.field.Text'); //or Ext.form.field.Date or a number field, whatever your back end returns.
Then set correct config options on field then
formFieldset.add(field);

How to remotely sort an Ext grid column that renders a nested object?

Simple question here, and I'm really surprised I cannot find an answer to it anywhere.
I have the following product model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'manufacturer', type: 'auto'}, // i.e. nested object literal
],
});
As can be seen, a product has a nested object inside it that contains details about a manufacturer (id, name, description, etc.).
I display products in an Ext.grid.Panel, like so:
Ext.create('Ext.grid.Panel', {
title: 'Products',
...
remoteSort: true,
columns: [
{text: 'Id', dataIndex: 'id', sortable: true},
{text: 'Name', dataIndex: 'name', sortable: true},
{text: 'Manufacturer', dataIndex: 'manufacturer', sortable: true, renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
}
},
],
});
As you can see, all three columns are configured to be sortable, and I am using remote sorting. This works for the first two columns, but the third column (manufacturer) is giving me trouble.
For instance, when a user sorts the grid by product name, Ext sends the following JSON to the server:
{ sort: [{ property: 'name', direction: 'ASC' }] }
This is fine, because the server knows to simply sort by each product's name property.
But when a user sorts the grid by manufacturer, the JSON sent is:
{ sort: [{ property: 'manufacturer', direction: 'ASC' }] }
Since the manufacturer is an object, this does not give the server any idea which property of the manufacturer it should sort by! Is it the manufacturer's id? Or is it the manufacturer's name? Or something else?
For my grid, since I render the manufacturer's name, I'd like to sort it by name. But I see no way to tell the server this. And I certainly don't want to make my server just sort by the manufacturer's name all the time.
If the JSON was sent like this it would be ideal:
{ sort: [{ property: 'manufacturer.name', direction: 'ASC' }] }
Sadly, Ext does not seem to do that (?). So, what's the solution?

Okay, I asked on the Sencha Forums and got a response. It appears you can override getSortParam() in the column config. Example:
columns: [
...
{
header: 'Manufacturer',
dataIndex: 'manufacturer',
sortable: true,
renderer: function(manufacturer) {
return manufacturer.name; // render manufacturer name
},
getSortParam: function() {
return 'manufacturer.name';
},
}
...
]
This will send the ideal JSON I described in my OP. Now I just need to make my server parse this properly! :)

Submitting form in Sencha Touch

I have created a form and am trying to send its contents to a server. I used the forms example from sensa.com as a template. The form sends a message to my server, but only with my the disable caching value and not any of the form values, for example [url]/register?_dc=1829384859324 . I also modified the example to use my server url and my server received the same type of request with only _dc=... from the example.
Is there some explicit way I have to list the fields I want sent to the server?
My form code is listed below. When I call submit, I use form.submit({method: 'get'});
var formBase = {
scroll: 'vertical',
url : 'MYURL/register',
standardSubmit : false,
items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {required: true,labelAlign: 'left',labelWidth: '40%'},
items: [
{ xtype: 'textfield',name : 'first',label: 'First Name',useClearIcon: true,autoCapitalize : false
}, { xtype: 'textfield',name : 'last',label: 'Last Name',useClearIcon: true,autoCapitalize : false
}, { xtype: 'passwordfield',name : 'password',label: 'Password',useClearIcon: false
}, {xtype: 'textfield',name : 'phone',label: 'Phone Number',
}, {xtype: 'emailfield', name : 'email',label: 'Email',placeHolder: 'you#email.com',useClearIcon: true
}]
}],
listeners : {
submit : function(form, result){
console.log('success',Ext.toArray(arguments));
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
}

I've just started using Sencha Touch myself, but I'm posting my form a bit different. I've created a submit button, and given that button a handler. The code that gets executed is the following:
this.loginView.submit({
method: 'POST',
waitTitle: 'Connecting',
waitMsg: 'Sending data...',
success: function(form, result) {
Ext.Msg.alert('Login succeeded!', result.response.reason);
},
failure: function(form, result){
Ext.Msg.alert('Login Failed!', result.response.reason);
}
});
In which this.loginView refers to an Ext.form.FormPanel object (I'm separating controller-code and view-code, which I highly recommend!). Another method you could try is create your own AJAX request (using Ext.Ajax.request) and retrieve your form params using the getValues(); method from the FormPanel object.
I hope it helps!

You have to set the form property standardSubmit to true.

This post is quite old, but there might be others having similar issues with form submitting.
If you are new to Sencha and you have a form which is submitting nothing, you probably followed this tutorial Building your first app
It has a problem. Form items MUST HAVE NAME which is missing in the example.
Items should look something like the following:
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'textareafield',
name: 'message',
label: 'Message'
}
]