In my CKEDITOR 4 plugin, I have a select element with multiple: true, settings.
How can I get the selected elements?
commit: function (data) {
console.log(this.getValue());
}
This one only return with the first selection.
Code part:
{
type: 'select',
label: 'Role list',
id: 'role',
label: 'Role list',
multiple: true,
controlStyle: 'min-height: 10em;width:100%;',
style: 'min-height: 10em;width: 100%;',
items: roleListJSON,
setup: function (data) {
//todo: setup selection from data.roles
},
commit: function (data) {
var selected_values = this.getValue(); //its wrong
}
}
Related
I am trying to create two combo boxes, one enabling users to select a state and the other a local government area (LGA), and have it so the LGAs are filtered on the basis of the state selected. I'm using Ext 3.4 and populating data stores using an AJAX request. The filtering is being done with a REST query to Django.
I believe the issue I'm having is coming down to variable scope, as the first combo box works fine but once I select a state I get an error stating "Uncaught TypeError: Cannot call method 'request' of undefined" when I'm trying to load the URL for the LGA combo box's data store. I've indicated where this is happening with a comment in the code (see below). I'm struggling to understand how I need to rejig the code to make things work. I'm a bit of a newbie to programming so apologies if the solution is a simple one. My code is below.
Thanks in advance for any help.
Ext.onReady(function() {
var stateStore = new Ext.data.JsonStore({
autoDestroy: true,
url: 'states.json',
storeId: 'ste-store',
root: 'records',
id: 'ste-store',
fields: ['state']
});
var lgaStore = new Ext.data.JsonStore({
autoDestroy: true,
url: '',
storeId: 'lga-store',
root: 'records',
id: 'lga-store',
fields: ['lga']
});
var stateCombo = new Ext.form.ComboBox({
renderTo: document.body,
id: 'ste-cb',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: stateStore,
displayField: 'state',
valueField: 'state',
listeners: {
render: function(e) {this.getStore().load()},
select: function(combo, record, index) {
var selectedState = record.get('state');
var lgaUrl = 'lgas.json?state=' + selectedState;
lgaStore.url = lgaUrl; //Error is traced back to here
lgaCombo.getStore().load();
}
}
});
var lgaCombo = new Ext.form.ComboBox({
renderTo: document.body,
id: 'lga-cb',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'local',
store: lgaStore,
displayField: 'lga',
valueField: 'lga',
});
});
first mistake of your code in mode. If you fetching data from back-end mode should be remote.
Another i advice your use select event of first combo box to get the data from server .
here is my two combo box which fetch the data remotely
new Ext.form.ComboBox({
id:"myB",
hiddenName:'myserId',
store: myStore(),
emptyText:'Select App ...',
fieldLabel:'Apps',
displayField: 'name',
valueField: 'id',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
mode:'remote',
maxLength: 50,
editable: false,
listWidth : 345,
anchor : '90%',
selectOnFocus:true,
listeners: {
// 'select' will be fired as soon as an item in the ComboBox is selected with mouse, keyboard.
select: function(combo, record, index){
var geoStorageCB = Ext.getCmp('geoCB');
geoStorageCB.getStore().proxy.setUrl('../test', true);
geoStorageCB.getStore().load({
params:{
id:combo.getValue()
}
});
}
}
}),new Ext.form.ComboBox({
id:"geoCB",
hiddenName:'geoId',
hidden : true,
store:myGeoStorage(),
emptyText:'Select GeoStorage ...',
displayField: 'storageName',
valueField: 'id',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
mode:'local',
listWidth : 345,
editable: false,
maxLength: 50,
anchor : '90%',
selectOnFocus:true
})
This Example from sencha forum can give you an idea how cascading combo works. I think the main problem of your code is your lgaStore loading method (inside stateCombo listener) doesn't use correct way to pass parameters to Django for the query. As naresh mentioned, you'd better use "lgaCombo.getStore().load({params:{...}});"
I have created a custom component, in that there is a textfield on its keyup event i need to filter the store but i m not getting any variable at event generation, but at the time of object creation i am getting the objects.
Below is the code-:
WildCardWindow = Ext.extend(Ext.Window, {
width : 300,
height : 265,
resizable:true,
closeAction:'hide',
title:'WildCard Selection Window',
autoScroll:true,
iconCls:'icon-wildcard',
bodyStyle:'background-color:#FFFFFF',
//#cfg{Array} data-The array of fields/items to show in the window
data: null,
store:null,
/**
* #property
* #type String
* The message displayed when mouse over on an uncommitted field
*/
uncommittMsg : '<b>Warning!</b> This field has been newly added in
the form designer. ' + 'It <i>can</i> be used now,
but you should be sure to save the uncommitted
changes ' + 'in the open form designer window.',
defaultIconCls : '',
initComponent : function(){
this.createStore(this.data);
this.items = this.createDataView();
WildCardWindow.superclass.initComponent.call(this);
},
createDataView: function(){
this.dataView = new Ext.DataView({
store: this.store,
autoWidth:true,
tpl: this.createTpl(),
autoHeight:true,
singleSelect : true,
overClass:'icon-view-over',
selectedClass:'icon-view-selected',
itemSelector:'.icon-dataview-item',
style:'cursor:pointer'
});
this.textField = new Ext.form.TextField({
fieldLabel: 'To',
tabTip:'Start typing to filter by field name',
name: 'f_to',
enableKeyEvents :true,
listeners: {
keyup: function () {
this.store.filter('name',this.textField.getValue(),true,false);
//Here I am not getting this.store and this.textField ???
}}
});
return [this.dataView,this.textField]
},
createStore: function(data){
this.store = new Ext.data.JsonStore({
data:data,
autoDestroy:true,
fields:[
{name: 'id'},
{name: 'name'},
{name: 'fieldclass'},
{name: 'type'},
{name: 'options'},
{name: 'isMultiMember',type:'boolean'},
{name: 'isUnCommitted',type:'boolean'}
]
});
return this.store;
},
listeners:{
close: function(){
this.store.filter('name','',true,false);
}
}
})
In the keyup of textfield i am not getting this.store and this.textfield ??
Any suggestions or where i am wrong.
Please reply soon
Because you lose your scope when that function is called.
You can do two things:
Use the bind function to copy the scope:
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Function-method-bind
I think this also works and is a more elegant solution:
var me = this;
this.textField = new Ext.form.TextField({
fieldLabel: 'To',
tabTip:'Start typing to filter by field name',
name: 'f_to',
enableKeyEvents :true,
listeners: {
keyup: function () {
me.store.filter('name',this.getValue(),true,false);
}}
});
I have a grid which uses a remote store and remote pagination because I have too many records.The store for the main grid is:
Ext.define('ArD.store.RecordsListStore', {
extend: 'Ext.data.Store',
model: 'ArD.model.RecordsListModel',
autoLoad: true,
autoSync: true,
remoteSort: true,
remoteFilter: true,
pageSize: 15,
proxy: {
type: 'ajax',
actionMethods: 'POST',
api: {
read: g_settings.baseUrl + 'index.php/recordslist/getAll',
destroy: g_settings.baseUrl + 'index.php/recordslist/deleteRecord'
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount',
successProperty: 'success'
},
writer: {
root: 'data',
writeAllFields: true,
encode: true
}
}
});
then I populate my grid and and it's all fine. But the problem is that I have a combobox which looks like this:
{
xtype: 'combo',
id: 'records_list_form_id',
emptyText: 'Choose Form',
editable: false,
store: 'FilterRecordsByForm',
displayField: 'title',
valueField: 'id',
lastQuery: '',
triggerAction: 'all',
queryMode: 'remote',
typeAhead: false,
width: 200,
listeners: {
select: this._filterRecords
}
}
And when I select something from the combobox there's the function :
_filterRecords: function()
{
var recStore = Ext.getStore('RecordsListStore');
var a = Ext.getCmp('records_list_form_id').getValue( );
var rec = Ext.getStore('FilterRecordsByForm').getAt(a);
console.log(recStore);
},
mostly just trying some things but I can get the ID of the selected element from the combobox and that is where I am.
What I need is having the id to make a new query usign my AJAX api (PHP/SQL backend) and populate the grid with the info related with this id. In my case I have 1:M relations so when I pass the Id i expect M records which I want to render on the place of the old grid.
Thanks
Leron
Use filter() method. Provide information that you need to filter by and store object will automatically request updated info from the server (you already have remoteFilter configured).
Look at Ext.Ajax() to make an on-demand ajax call to the server-side to load up your data and then use Store.loadData() or something like that to re-populate the Grid.
Here is my code
I want to load some data by Jsonp and display as list items.
Ext.setup({
onReady: function(){
Ext.regModel('Provinces', {
fields: [{
name: 'ProvinceID',
type: 'int'
}, {
name: 'ProvinceName',
type: 'string'
}]
});
var store = new Ext.data.Store({
autoLoad: true,
model: 'Provinces',
fields:['ProvinceName', 'ProvinceID'],
proxy: {
url: 'http://172.19.44.122/BC/Home/GetProvices',
type: 'jsonp'
},
autoLoad:true
});
new Ext.List({
fullscreen: true,
itemSelector: '.province',
tpl: '<tpl for="."><div class="province">{ProvinceName} - {ProvinceID}</div></tpl>',
store: store
});
}
});
The JSONP data looks like this:
Ext.data.JsonP.callback1([{"ProvinceID":1,"ProvinceName":"shanghai"},"ProvinceID":2,"ProvinceName":"zhejiang"}]);
but the reslut is the page only display two empty lines .
You should use the itemTpl property on the list, instead of tpl, like this:
new Ext.List({
fullscreen: true,
itemTpl: '{ProvinceName} - {ProvinceID}',
store: store
});
I need to dynamically populate a form from fields in a database using EXT JS forms and ASP.NET MVC and I'm having trouble finding a starting point.
The database includes all of the settings: the field names, the field data types and the original field data. When a menu is clicked on the application's main page, the clicked item's settings should appear on a separate form. The data types include checkboxes, textfields, and possibly combo boxes.
I can easily return all of the settings in Json, but I know the form will need to iterate either with Ext.each or some other method, but I'm having trouble getting my head around this. I've also thought about using an Ext reusable type as a template that accepts Json data from the database to determine the field name, type and content.
something like this:
TextSettings = Ext.extend(Ext.Container, {
layout: 'column',
autoHeight: true,
autoWidth: true,
initComponent: function() {
this.items = [
{
xtype: 'container',
style: 'float:left;clear:left;',
items: [
{
xtype: 'label',
text: 'Setting Name',
style: 'display:block;',
ref: '../../../NameLabel'
},
{
xtype: 'label',
text: 'Setting description',
style: 'display:block;font-style:italic;',
ref: '../../../DescriptionLabel'
}
]
},
{
xtype: 'container',
style: 'float:right;clear:right;',
items: [
{
xtype: 'textfield',
width: 300,
ref: '../../../SettingEdit'
}
]
}
];
TextSettings.superclass.initComponent.call(this);
}
});
Does this look like a crash course?
Has anyone else done something similar?
I ran across this Ajax function online (probably the Sencha forums) and it seems to be working.
var ajax = Ext.Ajax.request({
url: '/Controller/Items',
method: 'get',
success: function (response) {
response = Ext.util.JSON.decode(response.responseText);
//form.add(Ext.decode(response.responseText).data);
for (i = 0; i < response.data.length; i++) {
form.add({
xtype: response.data[i].xtype,
fieldLabel: response.data[i].text,
name: response.data[i].name,
value: response.data[i].value,
style: response.data[i].style,
items: response.data[i].items,
width: response.data[i].width
});
}
form.doLayout();
}
});
With the following Json output:
{success: true, data: [{xtype: 'label', text: 'Report', style: 'display:block', ref: '../../../Displaylabel' },{xtype: 'label', text: \"Report Text\", style: 'display:block;font-style:italic;', ref: '../../../DescriptionLabel'},{xtype: \"textfield\", width: 300, ref: \"../../../SettingEdit\", value: \"A comment... for YOU!!!\"}, {xtype: 'checkbox', text: 'Check it for fun'}]}
Still more work to go, but this is at least giving me dynamic text fields.