how do i get a w2ui grid cell value? - w2ui

i want to get my "id" value of w2ui grid. The record came from a database
columns: [
{ field: 'id', caption: 'ID', size: '50px' },
{ field: 'name', caption: 'Name', size: '300px'},]
my function
onDblClick: function (event) {
var grid = this;
event.onComplete = function () {
var sel = grid.getSelection();
console.log('my id value ' + sel.id);
}
but nothing appear. i do it wrong?

grid.getSelection() returns an array of selected recids, see the documentation.
You should change your code as follows:
$(function() {
$('#grid').w2grid({
name: 'grid',
columns: [
{ field: 'id', caption: 'ID', size: '50px' },
{ field: 'name', caption: 'Name', size: '300px' }
],
records: [
{ recid: 1, id: '1', name: 'Name 1' },
{ recid: 2, id: '2', name: 'Name 2' }
],
onDblClick: function(event) {
var grid = this;
event.onComplete = function() {
var sel_rec_ids = grid.getSelection();
if (sel_rec_ids.length) {
var sel_record = grid.get(sel_rec_ids[0]);
console.log('selected ID:', sel_record.id, '/ selected Name:', sel_record.name);
} else {
console.log("Nothing selected!");
}
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.js"></script>
<link href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.css" rel="stylesheet" />
<div id="grid" style="width: 100%; height: 150px;"></div>
Also let me quote something, that some else commented on one of your questions in 2013:
I see you've not accepted any answer to your questions. That kinda defeats the goal of Stack Overflow. It would be great if you could review all the questions you've asked, accept correct answers and give feedback on proposed solutions that don't work

Related

EXTJS 4 - htmleditor markInvalid issue

I'm using a htmleditor field in a form and want to see the red rectangle when I use markInvalid on the field but it seems to not work.
Here a code sample :
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function() {
// Working fine, as expected
var nameField = formPanel.getForm().findField('name');
nameField.markInvalid('Name invalid message');
// Not working
// (but the docs specify markInvalid should works)
var nameField2 = formPanel.getForm().findField('name2');
nameField2.markInvalid('Name invalid message');
// Not working either
//var nameField3 = Ext.getCmp('nameId2');
//nameField3.markInvalid('Name invalid message');
}
}]
});
When you click on the button, only the textfield appear in red.
The HTMLeditor doesn't appear red.
Am I missing something ?
This markInvalid function is empty for htmleditor in it's source file that's why is not working.
You need to first override this htmleditor and create markInvalid like below.
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function(errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
In this Fiddle, I have create a demo using HtmlEditor.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('EXT.form.field.HtmlEditor', {
override: 'Ext.form.field.HtmlEditor',
markInvalid: function (errors) {
var me = this,
oldMsg = me.getActiveError();
me.setActiveErrors(Ext.Array.from(errors));
if (oldMsg !== me.getActiveError()) {
me.updateLayout();
}
}
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
bodyPadding: 10,
height:500,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
id: 'nameId',
fieldLabel: 'Name'
}, {
xtype: 'htmleditor',
name: 'name2',
id: 'nameId2',
fieldLabel: 'Name2'
}],
bbar: [{
text: 'Mark both fields invalid',
handler: function (button) {
var form = button.up('form').getForm();
form.findField('name').markInvalid('Name invalid message');
form.findField('name2').markInvalid('Html editor invalid message');
}
}]
});
}
});
CSS
<style>
.x-form-invalid .x-html-editor-wrap {
background-color: white;
background-image: url(//cdn.sencha.com/ext/gpl/4.1.1/resources/themes/images/default/grid/invalid_line.gif);
background-repeat: repeat-x;
background-position: center bottom;
border-color: rgb(204, 51, 0);
}
</style>

extjs how to bind a field to another existing form

i have a form A containing some fields about questions(a model in my application),but it can not submit directly by form.getForm().submit().the buttons in form A will open another window,and a field on that window.i want to attach the field to form A ,so i can submit those fields together.
the detail is as follows:
enter image description here
In this case, I would try to give two different ID's to forms. Next, retrieve the values from them and merge If the field names are different.
var first_form_values = Ext.getCmp('first-form').getForm().getValues();
var second_form_values = Ext.getCmp('second-form').getForm().getValues();
var all_values = Ext.Object.merge(first_form_values , second_form_values);
Then you have all the values and you can send them by Ext.Ajax etc.
Full example:
Ext.create('Ext.window.Window', {
title: 'First Form',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
id: 'first-form',
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
name: 'first-field',
}
]
},
buttons: [
{
text: 'Show second form'
handler: function()
{
Ext.create('Ext.window.Window', {
title: 'Second Form',
height: 200,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
id: 'second-form',
items: [
{
xtype: 'textfield',
fieldLabel: 'Second field',
name: 'second-field',
}
]
},
buttons: [
{
text: 'Submit'
handler: function()
{
var first_form = Ext.getCmp('first-form'),
second_form = Ext.getCmp('second-form');
if(first_form && second_form)
{
var fist_form_values = first_form.getForm().getValues(),
second_form_values = second_form.getForm().getValues();
var values = Ext.Object.merge(fist_form_values, second_form_values);
// You have all values from two forms
}
}
}
]
}).show();
}
}
]
}).show();

Submit all of grid rows with Extjs form submit

I have a grid panel in a form. Any row of the grid panel have a filefield. I want to send any row (name field and filename field) to server.
Model:
Ext.define('FM.model.DefineCode', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'filename', type: 'string'}
],
validations: [
{type: 'presence', field: 'id'},
{type: 'presence', field: 'name'},
{type: 'presence', field: 'filename'}
]
});
Store:
Ext.define('FM.store.DefineCode', {
extend: 'Ext.data.Store',
model: 'FM.model.DefineCode',
autoLoad: true,
data: []
});
View:
Ext.define('FM.view.map.DefineCode', {
extend: 'Ext.window.Window',
title: 'Define Code',
alias: 'widget.mmDefineCode',
width: 600,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'gridpanel',
title: 'myGrid',
store: 'DefineCode',
columns: [
{
text: 'Id',
xtype: 'rownumberer',
width: 20
}, {
text: 'Name',
dataIndex: 'name',
flex: 1,
editor:{
xtype: 'textfield'
}
}, {
text: 'File',
dataIndex: 'filename',
width: 200,
editor:{
xtype: 'filefield',
emptyText: 'Select your Icon',
name: 'photo-path',
buttonText: '',
flex: 1,
buttonConfig: {
iconCls: 'icon-upload-18x18'
},
listeners: {
change: function(e, ee, eee) {
var grid = this.up('grid');
var store = grid.getStore();
var newStore = Ext.create('FM.store.DefineCode',{});
store.insert(store.data.items.length, newStore);
}
}
},
}, {
text: '',
width: 40
}
],
height: 200,
width: 600,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]}
],
}],
buttons: [{text: 'OK', action: 'OK'}],
initComponent: function() {
var me = this;
Ext.apply(me, {});
me.callParent(arguments);
}
});
Controller:
...
form.submit({
url: 'icon/create',
});
When I submit form, only last row is sending to server.
Where is problem?
Why you using this ?
var newStore = Ext.create('FM.store.Path', {});
store.insert(store.data.items.length, newStore);
try using rowEditing to edit/submit 1 row data :
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
clicksToMoveEditor: 1,
listeners: {
'validateedit': function(editor, e) {},
'afteredit': function(editor, e) {
var me = this;
var jsonData = Ext.encode(e.record.data);
Ext.Ajax.request({
method: 'POST',
url: 'your_url/save',
params: {data: jsonData},
success: function(response){
e.store.reload({
callback: function(){
var newRecordIndex = e.store.findBy(
function(record, filename) {
if (record.get('filename') === e.record.data.filename) {
return true;
}
return false;
}
);
me.grid.getSelectionModel().select(newRecordIndex);
}
});
}
});
return true;
}
}
});
and place it to your plugin.
I don't try it first, but may be this will help you a little.
AND this is for your controller to add a record from your grid, you need a button to trigger this function.
createRecord: function() {
var model = Ext.ModelMgr.getModel('FM.model.DefineCode');
var r = Ext.ModelManager.create({
id: '',
name: '',
filename: ''
}, model);
this.getYourgrid().getStore().insert(0, r);
this.getYourgrid().rowEditing.startEdit(0, 0);
}
check this for your need, this is look a like. You need to specify the content-type.
And for your java need, please read this method to upload a file.

panel overlapping while loading them dynamically sencha

I have several tabs on toolbar each of them having seperate handler , i have called seperate function of each handler . The code is as below
Ext.define('myco.view.User', {
extend: 'Ext.Container',
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'User'
},
{
docked: 'top',
xtype: 'toolbar',
items: [{
text: 'My Profile',
handler: function() {
var panel = Ext.getCmp('User'),
tpl = new Ext.XTemplate([
'<div class="demo-weather">',
'<tpl for=".">',
'<div class="day">',
'<div class="date">{username}</div>',
'<tpl for="weatherIconUrl">',
'<img src="{value}">',
'</tpl>',
'<span class="temp">{tempMaxF}°<span class="temp_low">{tempMinF}°</span></span>',
'</div>',
'</tpl>',
'</div>'
]);
panel.getParent().setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
Ext.Ajax.request({
url: 'http://localhost:8000/api/myapp/user/',
method:'GET',
callbackKey: 'callback',
defaultHeaders : 'application/json',
params: {
//key: '23f6a0ab24185952101705',
//q: '94301', // Palo Alto
format: 'json',
//num_of_days: 5
},
success : function(response, opt) {
dataarray = Ext.decode(response.responseText);
weather=dataarray.objects;
panel.updateHtml(tpl.applyTemplate(weather))
panel.getParent().unmask();
},
failure : function(response, opt) {
Ext.Msg.alert('Failed', response.responseText);
panel.getParent().unmask();
}
});
}
},
{
text:'login',
handler: function() {
var main = new Ext.Panel({
title: 'My first panel', //panel's title
fullscreen: true,
//the element where the panel is going to be inserted
//html: 'Nothing important just dummy text' //panel's content
items:[
{
xtype: 'fieldset',
title: 'Login',
items: [
{
xtype: 'textfield',
label: 'Username',
name: 'username',
id : 'username'
},
{
xtype: 'passwordfield',
label: 'Password',
name: 'password',
id : 'password'
}
]
},
{
xtype: 'button',
text: 'Send',
ui: 'confirm',
handler: function() {}
}
]
});
panel.add(main);
alert('test');
}
}
]
}]
}
});
Now when i click on the tab , previous panel will not be cleared and data will get overlapped there ..... like when i click My profile profile is listed there , after that when i click login profile+ login both will be loaded one overlapping another ...
You should use Ext.tab.Panel for this, define your profile and login panels as items of a parent TabPanel, the switching will be handled by ExtJS. You can use the activate event of a Panel to add custom logic to execute when your tabs get activated.

Extjs can't dynamically add/remove fields in formpanel

I have a form panel that uses a table layout to display a form. I need to add in functionality to add /remove a set of components.
The add button should add a new row of components underneath the existing elements & the remove button should remove that last added row.
The formpanel can add a new field but it's appearing below the buttons and the form is not increasing in width (see screen shot below). I've tried this with both the insert and add function but both have the same effect.
Does anyone know how:
1) I can add a series of components in the next row?
2) How I can remove the next row.
Partial formPanel code & button code:
![SearchForm = Ext.extend(Ext.FormPanel, {
id: 'myForm'
,title: 'Search Form'
,frame:true
,waitMessage: 'Please wait.'
//,labelWidth:80
,initComponent: function() {
var config = {
items: [{
layout:{
type:'table',
columns:5
},
buttonAlign:'center',
defaults:{
//width:150,
//bodyStyle:'padding:100px'
style:'margin-left:20px;'
},
items:[//row 1
{
xtype: 'label',
name: 'dateLabel',
cls: 'f',
text: "Required:"
},
{
xtype: 'container',
layout: 'form',
items: {
xtype: 'datefield',
fieldLabel: "From Date",
value: yesterday,
width: 110,
id: 'date1'
}
}][1]
buttons: [{
text: 'Add More Criteria (max 10 items)',
id: "addBtn",
scope: this,
handler: function(){
alert('hi');
/*this.items.add({
xtype : 'textfield',
fieldLabel : 'Extra Field',
name : 'yourName',
id : 'yourName'
}); */
this.insert(4,{
xtype: 'textfield',
id: 'input20',
//hideLabel: true,
width: 180,
fieldLabel: 'hi'
});
this.doLayout();
}
}
Easiest way would be to have a fieldset in the form to hold all the 'rows' and then add a row to this fieldset using fielset.add()
(Your 'row' can be another fieldset that has all the fields)
Dynamic form fields generation seems to be obvious and there are lots of examples and some blogs for mootools etc but in extjs world i couldn`t find a working example(probably because most people use powerful Extjs grid).I had to invent one by myself for MedAlyser project! and im sharing it with you.she might have bugs and/or be incomplete but i hope she helps a bit.
function addressCounter(incr) {
if (!this.no) {
this.no = 0;
} else {
this.no = this.no + 1;
};
};
var counter = new addressCounter();
console.log(counter.no);
//put below code inside your form items
{
xtype: 'button',
text: 'Add address ',
id: 'addaddress',
handler: function () {
counter.no = counter.no + 1;
console.log(counter.no);
Ext.getCmp('patientaddress').add([{
xtype: 'combo',
store: 'AddressType',
displayField: 'name',
valueField: 'name',
fieldLabel: 'Address Type',
id: 'addresstype' + counter.no,
name: "Patientaddress[addresstype][]",
value: 'Home'
}, {
fieldLabel: 'zip',
width: 160,
maxLength: 10,
enforceMaxLength: true,
maskRe: /[\d\-]/,
regex: /^\d{5}(\-\d{4})?$/,
regexText: 'Must be in the format xxxxx or xxxxx-xxxx',
name: "Patientaddress[zip][]",
id: 'zip' + counter.no
}, {
fieldLabel: 'Address 1',
name: "Patientaddress[address1][]",
id: 'address1' + counter.no
}, {
fieldLabel: 'Address 2',
name: "Patientaddress[address2][]",
id: 'address2' + counter.no
}, {
fieldLabel: 'City',
name: "Patientaddress[city][]",
id: 'city' + counter.no
}, {
fieldLabel: 'State',
name: "Patientaddress[state][]",
id: 'state' + counter.no
}, {
xtype: 'combo',
store: Ext.create('MA.store.Countries'),
displayField: 'name',
valueField: 'id',
forceSelection: true,
fieldLabel: 'Country',
typeAhead: true,
queryMode: 'local',
name: "Patientaddress[country][]",
id: 'country' + counter.no
} // eof
// countries;
,
Ext.getCmp('addaddress'), {
xtype: 'button',
text: 'Remove address',
id: 'removeaddress' + counter.no,
handler: function (
thisButton, eventObject) {
activeRemoveButtonId = thisButton.getId().split('removeaddress')[1];
console.log('activeRemoveButtonID:' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('address1' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('address2' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('city' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('state' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('country' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('removeaddress' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('addresstype' + activeRemoveButtonId);
Ext.getCmp('patientaddress').remove('zip' + activeRemoveButtonId);
Ext.getCmp('patientaddress').doLayout();
}
}]);
Ext.getCmp('patientaddress').doLayout();
} // eof function
}, // eof Add button
Removing fields was more complicated because the remove button needs to know exactly which field has to be removed. This code creates new fields and removes them correctly as you asked for.Any suggestions are welcome.