Develop Reference

how to close slidable by tapping on the screen in flutter

Is there a way to close a slidable in flutter by tapping on the screen instead of sliding back? I just want the slidable to slide back automatically when there is any other interaction on the screen. Here is the section of my code where i added the slidable Widget.
Thank you in advance
Expanded(
child: ListView.builder(
//children: List.generate(todos.length, (index) => null),
itemCount: todos.length,
itemBuilder: (BuildContext context, int i){
return Slidable(
dismissal: SlidableDismissal(
child: SlidableDrawerDismissal(),
onDismissed: (actionType) {
setState(() {
todos.removeAt(i);
});
},
),
key: ValueKey(todos[i]),
actionPane: SlidableScrollActionPane(),
actionExtentRatio: 0.25,
child: ListTile(
onTap: (){
setState(() {
_isVisible= !_isVisible;
});
},
title: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: CustomCheckbox(
selectedColor: Color(0xFF005ef5)
),
),
SizedBox(
width: 5, // here put the desired space between the icon and the text
),
Flexible(
child: Text(
todos[i],
style: Theme.of(context).textTheme.bodyText1,
)
) // here we could use a column widget if we want to add a subtitle
],
),
),
actions: <Widget>[
IconSlideAction(
icon: Icons.close,
caption: 'Delete',
color: Theme.of(context).accentColor,
onTap: (){
setState(() {
todos.removeAt(i);
});
},
)
],
);
},
),
),

you can set the closeonTap:true inside IconSlideAction()

WP Gutenberg InnerBlocks not saving

I created a custom block type called with the wp-cli, it's working, but when I add innerBlocks to it, the innerBlocks display, but don't save or adhere to any other attributes other than template, templateLock and allowedBlocks are all ignored. Also when I define wp.editor.InnerBlocks as a variable, it returns null, but if I include it in the block edit section, it works fine, still doesn't save. Full code:
( function( wp ) {
var registerBlockType = wp.blocks.registerBlockType,
__ = wp.i18n.__,
el = wp.element.createElement
;
registerBlockType( 'adventures/accommodations', {
title: __( 'Accommodations' ),
icon: 'admin-multisite',
category: 'layout',
supports: {
html: false,
align: true
},
attributes: {
align: {
type: 'string',
default: 'full'
},
},
edit: function( props ) {
var attributes = props.attributes;
return [
el( 'div', {className: props.className,},
el( 'h2', {className: 'sub-header'},
'Accommodations'
),
el( wp.editor.InnerBlocks, {
allowedBlocks: ['core/columns', 'core/column', 'core/paragraph', 'core/gallery'],
template: [
['core/columns', {},[
['core/column', {}, [
['core/gallery']
]],
['core/column', {},[
['core/paragraph', { placeholder: 'Enter short description...' }]
]]
]]
],
templateLock: 'all'
}),
)
]
},
save: function( props ) {
var attributes = props.attributes;
var InnerBlocks = props.innerBlocks
return [
el( 'div', {className: props.className,},
el( 'h2', {className: 'sub-header'},
'Accommodations'
),
el( InnerBlocks.Content ),
)
]
}
});
} )(
window.wp
);
Side note, also trying to make the block align full width without block alignment controls, but can't find any documentation on how to do that. Any help would be greatly appreciated, thanks!

Ext property grid with assigned values in multiselectable combos

I am trying to assign values to a multiselectable combo box in extjs property grid. When I assign some values to the field, the grid fails to render the field. How to resolve this ? Please find the code below.
Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 400,
renderTo: Ext.getBody(),
source: {
name: "My Object",
created: Ext.Date.parse('10/15/2006', 'm/d/Y'),
timeofday: "12:00 PM",
available: false,
version: 0.01,
description: Ext.encode({
product: 'Clorox',
tagline: 'The Shinyest White!'
}),
childAccounts:['john','mike']
},
customEditors: {
timeofday: Ext.create('Ext.form.TimeField', {selectOnFocus: true}),
description: {
xtype: 'customeditorfield'
},
childAccounts:Ext.create('Ext.form.ComboBox', {store: ['john', 'mike', 'harvey'],multiSelect:true}),
},
customRenderers: {
timeofday: function( v ) {
return Ext.isDate( v ) ? Ext.Date.format( v, 'g:i A' ) : v;
}
},
propertyNames: {
name: '(name)',
created: 'Created Date',
timeofday: 'Time of Day',
available: 'Available?',
version: 'Version',
description: 'Product Description',
childAccounts: 'Child Description'
},
listeners: {
beforeedit: function( editor, e, opts ) {
if( e.record.get( 'name' )=='name' || e.record.get( 'name' )=='version' ) {
return false;
}
}
}
});

By default, only "editable" values are supported by property grid, and Sencha does not count arrays as editable. You can try to override this if you want. The limitation is introduced in Ext.grid.property.Store.getReader, where there is a function isEditableValue:
isEditableValue: function(val){
return Ext.isPrimitive(val) || Ext.isDate(val) || val === null;
}
If you change this function to allow for arrays, it seems to work, but without warranty. I used the following code for quick test:
Ext.define('', {
override: 'Ext.grid.property.Store',
getReader: function() {
var newReader = !this.reader;
this.callParent(arguments);
if(newReader) this.reader.isEditableValue = function(val) {
return Ext.isPrimitive(val) || Ext.isDate(val) || Ext.isArray(val) || val === null;
}
return this.reader;
}
});
Fiddle (Without warranty, as always)

Solution:
Your "childAccounts" config is not correct. Try to replace:
childAccounts:['john','mike']
with:
childAccounts: 'john, mike'
Notes:
Tested with ExtJS 4.2.

Creating a Simple CKEditor Plugin - Select dropdown

I'm doing a plugin in CKeditor with a select [ 'Description', 'Value'].
ckeditor root/
plugins/
span/
icons/
span.png
dialogs/
span.js
plugin.js
plugin.js
> CKEDITOR.plugins.add( 'span', {
> icons: 'span',
> init: function( editor ) {
> editor.addCommand( 'span', new CKEDITOR.dialogCommand( 'spanDialog' ) );
> editor.ui.addButton( 'Span', {
> label: 'Insert Reserved Word',
> command: 'span',
> toolbar: 'insert'
> });
> CKEDITOR.dialog.add( 'spanDialog', this.path + 'dialogs/span.js' );
> } });
dialogs/span.js
CKEDITOR.dialog.add( 'spanDialog', function( editor ) {
return {
title: 'Palavras Reservadas',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab-basic',
label: 'Basic Settings',
elements: [
{
type: 'select',
id: 'span',
label: 'Reserved Words Available',
items: [ [ 'example 1', '#exanple1#' ], [ 'example 2', '#example2#' ] ],
validate: CKEDITOR.dialog.validate.notEmpty( "Field can not be empty." ),
setup: function(a) {
this.setValue(a.getAttribute("value") || "")
}
}
]
}
],
onOk: function() {
var dialog = this;
var span = editor.document.createElement( 'span' );
span.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
editor.insertElement( span );
}
};
});
At function onOK()
onOk: function() {
var dialog = this;
var span = editor.document.createElement( 'span' );
span.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) );
editor.insertElement( span );
}
I would like to add to the reader the following
<span>#example1#</span> //if I select a Exemple 1
Any tips on how to do this?
See this span with the text set ...
thank you for now

Resolved ;)
span.js
setup: function( element ) {
element.setText( this.getValue() );
},
commit: function( element ) {
element.setText( this.getValue() );
}
.... var selection = editor.getSelection();
var element = selection.getStartElement();
if ( element )
element = element.getAscendant( 'span', true );
if ( !element || element.getName() != 'span' ) {
element = editor.document.createElement( 'span' );
this.insertMode = true;
}
else
this.insertMode = false;
this.element = element;
if ( !this.insertMode )
this.setupContent( this.element );
},
onOk: function() {
var dialog = this;
var abbr = this.element;
this.commitContent( abbr );
if ( this.insertMode )
editor.insertElement( abbr );
}

Check whether cursor is inside table in ckeditor dialog?

I am using ckeditor , and I have added 1 dialog where on button click i want to check whether cursor is inside table in ckeditor dialog ?
this is dialog code where on click of button i need to check the above condition
CKEDITOR.dialog.add( 'NDFSRSDialog', function( editor ) {
return {
title: 'Formula Editor',
contents: [
{
id: 'tab-basic',
label: 'Basic condition',
elements: [
{
type: 'text',
id: 'NDFSRS',
label: 'FIELD',
validate: CKEDITOR.dialog.validate.notEmpty( " field cannot be empty" )
},
{
type: 'button',
id: 'title',
label: 'CONDITION',
validate: CKEDITOR.dialog.validate.notEmpty( " field cannot be empty" ),
onclick : function( )
{
alert(0);
}
}
]
}
],
onOk: function() {
var dialog = this;
dialog.getElement('tab-basic', 'NDFSRS' ).hide();
}
};
});

Like this ?
if($("#ckeditor").is(":focus")){
//do stuff here
}

$( '#save' ).on( 'click', function () {
var editor = CKEDITOR.instances.ficeditor,
sel = editor.getSelection(),tbchk;
tbchk = sel.getStartElement();
while(tbchk!=null){
if(tbchk!=null && tbchk.getName()=="table"){
console.log("inside table");
}
tbchk=tbchk.getParent();
}
});